- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Wed, 20 Feb 2008 15:12:38 -0800
- To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
- CC: www-style <www-style@w3.org>
Daniel Glazman wrote: > Andrew Fedoniouk wrote: >> >> I think it makes sense to add another value to the list-style-type >> enumeration - "tree-line". > > Wow, that's far more than stylistic Andrew... That's clearly > behavioural. But that is only a part of the solution needed for > UL/LI turned into foldable trees. We need a queryable way to specify an > item is folded or not too... Right ? > > </Daniel> > Hi, Daniel, list-style-type: tree-line; is a pure stylistic thing. In the same way as list-style-type: square; for example. If you speak about first <select> on the picture: http://www.terrainformatica.com/htmlayout/images/tree-view-lines.png then yes, I do have CSS flags that define folded state. :expanded and :collapsed flags (and pseudo-classes). Behavior (code behind particular widget (DOM element)) just sets/resets them. And CSS does the rest. That <select> is defined as: <select> <options expanded>Metals <options expanded>Alkaline Metals <option>Lithium <code>Li</code></option> <option>Sodium <code>Na</code></option> <option>Potassium <code>K</code></option> </options> <options expanded>Transition Metals <option>Scandium <code>Sc</code></option> <option>Titanium <code>Ti</code></option> <option>Vanadium <code>V</code></option> </options> </options> <options expanded>Halogens <option>Fluorine <code>F</code></option> <option>Chlorine <code>Cl</code></option> <option>Bromine <code>Br</code></option> </options> </select> And style looks like: select options:collapsed > :not(:first-child) // normally all items inside options are hidden // except the very first one - it is a caption of the option group { visibility:collapsed; } select options:expanded > option, select options:expanded > options // but in expanded state allsubitems are shown { visibility:visible; display: list-item; list-style-type: tree-line; outline-color:red; } In my case flags :collapsed and :expanded are sort of mutually exclusive things - either one is set or none of them. I need both :collapsed and :expanded as, when set from code, they may trigger transition (animation) effects too. In my case <select> and its content (<option>/<options>) is an ordinary DOM element, e.g. <option> may contain hyperlink inside. All this can be styled as any other dom elements. I think that <select> has the same semantic meaning as, say, <nl> but gives all functionality (navigation, keyboard handling, etc) out of the box. I think <html5> will benefit if we will enable styling and rich content in <select>s. That is not so difficult to implement, really. -- Andrew Fedoniouk. http://terrainformatica.com
Received on Wednesday, 20 February 2008 23:12:59 UTC