W3C home > Mailing lists > Public > www-style@w3.org > February 2008

Re: Collapsing elements

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 21 Feb 2008 11:12:05 -0800
Message-ID: <47BDCD05.4040903@terrainformatica.com>
To: Bert Bos <bert@w3.org>
CC: www-style <www-style@w3.org>

Bert Bos wrote:
> On Thursday 21 February 2008 16:47, Brad Kemper wrote:
>> The word "initial" sounds like it is only something that exists at
>> the beginning, and once someone starts collapsing or expanding it, it
>> is no longer initial. Does "initial" represent an open branch of the
>> tree or a closed one? It would depend on the style sheet, I guess,
>> but that makes its meaning vague.
> That's on purpose. I'm not tied to the name "initial," it just seemed a 
> reasonable word to express the two ideas that (1) there exists another 
> state and (2) this state is the default.
> Another option is giving a name to the second state rather than the 
> first. E.g., ':alternative':
>     ul {content: attr(title)}
>     ul:alternative {content: contents}
> alhough to keep the element readable in old browsers, one might want to 
> write that as:
>     ul:not(:alternative) {content: attr(title)}
> (It's actually shorter like that, but it makes you think harder :-) )
>> I would prefer something that more 
>> definitively indicated its actual current state ("opened" or
>> "closed"), the way "checked" does for checkboxes and radio buttons.
> I started with that idea, but abandoned it for the more general (and 
> admittedly more abstract) idea of initial and alternative states, 
> because one state is not necessarily more "closed" than the other:
>     div img.recto {display: none}
>     div:alternative img.verso {display: none}
>     ...
>     <div>
>       <p>Click to see the other side:
>         <img class=recto src="recto.jpg" alt="front - title">
>         <img class=verso src="verso.jpg" alt="back - index">
>     </div>
> Or:
>     p.warning {font-size: xx-small}
>     p.warning:alternative {font-size: large}
>     ...
>     <p>Click to enlarge:
>     <p class=warning>Warning: This paragraph is too small to read.
> (Yes, I know "click" is not the right word to use in an HTML document, 
> because not everybody has a mouse, but it's just for the example.)
> I even tried n-state elements (n >= 2), but that became very abstract 
> indeed...
>> But rather than invent a new state and pseudo-class, I would rather
>> see "checked' repurposed for this type of list, and given a
>> definition to mean open if checked and closed if unchecked.
> My intuition says that overloading ':checked' is dangerous and not very 
> intuitive. In the examples I gave so far there is nothing that I would 
> associate with putting a check mark. It's collapsed, expanded, toggled, 
> set to an alternative state, set to a second state, maybe changed or 
> restored, but not checked...
>> The author could always simulate reverse behavior if they wanted to,
>> I suppose, but the default style sheet could just make "checked" tree
>> LI's opened, and "unchecked" LI's closed.
> That would take away all the flexibility. It's not just lists I want to 
> collapse, it's paragraphs and sections as well. And 
> sometimes "collapsing" doesn't mean hiding, but making it smaller or 
> making it gray.
> Bert
Bert, I think that :collapsed and :expanded is the best choice 
considering the fact
that  not(:collapsed) and not(:expanded) is the :initial state you've 

I also agree that :checked is a bad choice for labeling 
collapsed/expanded states.
For example item in expandable hierarchical list can be :checked too if 
such a list
supports multiple selection for example.
Consider this sample:
Here expandable/collapsible item can also be :checked and that is 

Andrew Fedoniouk.

Received on Thursday, 21 February 2008 19:12:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:34 UTC