Re: Custom dynamic properties

Given that HTML has no namespace support I had not considered using attributes and attribute selectors due to the chance of clashing with a built in or extension attribute. I had not considered the data-* attributes which are frankly a poor substitute for a proper namespace mechanism but it is sufficient.

I am also concerned that there is some difference between the behaviour of a pseudo class selector and an attribute selector. Otherwise, what was the point of adding the :enabled and :disabled pseudo classes when you could do that with attribute selectors and the disabled attribute.

----- Original Message -----
> 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:34:38 UTC