Re: [CSS3] Proposal to add list-style-type: tree-line value

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