Re: Custom dynamic properties

I think it could already by done that way :

.button { // default state
   background: gray;
}

.button[tristate=on] {
   background: lime;
}

.button[tristate=off] {
   background: red;
}

You can modify the HTML Attribute using element.setAttribute("tristate", 
"on").



-----Message d'origine----- 
From: Paul Duffin
Sent: Friday, September 17, 2010 4:20 PM
To: www-style
Subject: 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:30:19 UTC