Custom dynamic properties

By 'dynamic property' I mean the combination of pseudo classes and client side state that allows a page author to reflect changes in state by updating the styles of the user interface.

e.g. The 'enabled' dynamic property consists of:
* :enabled pseudo class
* :disabled pseudo class
* enabled attribute on the input element.

Providing appropriate feedback on changes in application state is one of the most important part of user interface design and it is a common technique to use a combination of class selectors, and JavaScript that manipulates the class attribute to provide application specific 'dynamic properties'.

This is probably not something that CSS can define on its own and it is difficult to see in which specification it will fit but I think that it would be a really useful piece of functionality.
This would require the following:
* CSS - Support for custom pseudo classes (see previous email about extending namespace usage).
* HTML - Support for custom properties on elements, each allowable value of the property would be bound to a specific pseudo class. 
* ? - Something would have to define the mapping between the two.

Of course, HTML is not the only markup language to use CSS for styling. SVG and any others would also need to define custom properties, so maybe it is a more general function of DOM.

To give a concrete example, lets say that I have a 3 state button then I could do something like:

@namespace tri http://tri.button/
@dynamic-property {
    name: tristate;
    type: integer;
    tri|on: 0;
    tri|off: 1;
    tri|unknown: 2;
}

.button:tri|on {color: black; background: white}
.button:tri|off {color: white; background: black}
.button:tri|unknown {color: red}

In HTML I would use:

<input ..... id="button1" class="button" initial-states="tri:on"/>

The initial-states attribute would set the initial value of the property during loading, so that the page looks correct before any JavaScript is run.

In JavaScript I would do the following to change state:

var button = ...get button1 by id.
button.tristate = 2;

Any thoughts?

Received on Friday, 17 September 2010 14:20:55 UTC