Re: Collapsing elements (was: [CSS3] Proposal to add list-style-type: tree-line value)

On Feb 20, 2008, at 3:16 PM, Bert Bos wrote:

> 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 ?
>
> Actually, I think I like it...

Me too.

>
> It's a very easy way to get a tree-like list display. I can do  
> without detailed control over the look of the lines.
>


I would prefer to have control over the lines. At the very least, the  
color of the lines. They could appear in front of any background,  
light or dark, so color would be very helpful, but why not thickness  
and style (dotted, etc.) too, following the syntax of border and  
outline? It would help in making it fit in with its surrounding design.

You could do away with a new type of line, though, if the lines were  
considered a special kind of markers of lists, and if the ::marker  
pseudo-element [1] is adopted, and the "tree-line" became a standard  
marker glyph type that was always connected to the one above it of  
the same level (like a transparent rectangle with two edges that  
would accept outlines, and an intrinsic height). Then you could have  
something like this:

LI { color: black; list-style-type: tree; }
LI::marker { color: powderblue; outline-style:dotted; outline-width: 
1px; }

I chose outline over border, because I think it would make it easier  
to align.

If you wanted a OS UI tree view, with the (not necessarily  
functional) widgets for expanding/collapsing, you should be able to  
do something like this:

ul { appearance: outline-tree; }

The widgets (plus and minus signs in boxes, for instance) could be  
PNGs with system defaults when using the system appearance. Then the  
image could be changed with something like this:

LI::marker {
	color: powderblue;
	outline-style:dotted;
	outline-width:1px;
	content: url(plusbox.png);
}
LI::marker:hover {
	content: url(plusbox-over.png);
}
LI::marker:active {
	content: url(plusbox-pressed.png);
}
LI:checked::marker {
	content: url(minusbox.png);
}
LI:checked::marker:hover {
	content: url(minusbox-over.png);
}
LI:checked::marker:active {
	content: url(minusbox-pressed.png);
}

I am imagining the "checked" pseudo-class [2] would represent the  
"on" state of an expanded item.


[1] http://www.w3.org/TR/2002/WD-css3-lists-20021107/#markers
[2] http://www.w3.org/TR/css3-selectors/#UIstates