- From: Paul Duffin <pduffin@volantis.com>
- Date: Fri, 17 Sep 2010 11:34:05 -0600 (MDT)
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: www-style <www-style@w3.org>
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