In this demo or proof of concept, the user can construct and manipulate a stylesheet dynamically. She can do this by dragging the little blue, downward-pointing arrowhead to the left or right. New rows can be added by pressing the plus ('+') sign at the right of the page. No styles have to be copied to the DIV elements in the added rows because the column style is kept in the cascade using the constructed stylesheet. (In the Google Chrome web browser's Developer Tools, the styles of the DIVs having class "column-1" or "column-2" are clearly labeled as being in a constructed stylesheet.)
The preset buttons replace the 'userProportion' class on the container with one of a few predefined rule groups in the stylesheet.
The demo is more fully explained in an article by Sam Foster on Sitepen, where he presented it.
Dynamic stylesheets will be useful as part of the Zen technology. If a user uses Zen technology to edit the DOM of her a page on her website, she could also modify the look of an element (even custom elements) and then choose the specificity of the change, either specific to that element or applicable to the whole class. The height and width of an element could be changed using a framework such as the jQuery UI Resizable plugin. The color and background color of an element could be changed using a jQuery colorpicker plugin. Some HTML attributes (such as, perhaps, align, alt, autofocus, checked, class, href, id, label, list, src, title, value, and many more could be set using functions specific to the particular attribute types.
Currently, there is no prototype of the use of dynamic stylesheets using Biwascheme with Zen's sequential-programming technology for web applications.