Re: Custom dynamic properties

On Fri, Sep 17, 2010 at 7:20 AM, Paul Duffin <pduffin@volantis.com> wrote:
> 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;

Francois is correct - this can already be done in HTML (by using the
data-* set of attributes intended for custom data) and in XML-based
languages (by either using language-specific features or using
attributes in a custom namespace).

<button data-tristate=on>button!</button>
<style>
button[data-tristate='on'] { color: black; background: white; }
...etc...
</style>

~TJ

Received on Friday, 17 September 2010 17:00:05 UTC