Thoughts on implementing the HTML5 <details> element with pure CSS

Recently, I tried to make a mockup of the HTML5 <details> element  
using CSS and JavaScript. Here is a reference for <details>:

<http://dev.w3.org/html5/spec/Overview.html#the-details-element>

My intended rendering and behavior was to match the "disclosure  
triangle" control on Mac OS X, much like the illustrated example in  
the HTML5 spec. I found that there were only two missing features in  
existing and forthcoming CSS that blocked me from fully and generally  
specifying the rendering with just CSS:

1) I wanted a nice animation transition for expanding and collapsing  
the disclosure triangle. But <details> needs to size to its contents,  
so effectively I need to transition to and from a height of "auto".  
CSS Transitions to/from auto values are, I think not supported per  
spec, and are certainly not supported in the WebKit implementation.

2) I need the <summary> child of <details> to remain visible both when  
expanded and collapsed, but have all the other contents appear or  
disappear, including direct text node children of the <details>  
element. However, there is no way to address all of the children of  
<details> except the <summary> child with a CSS selector.

If these two things were fixed, then I could implement the rendering  
of this element fully with CSS, with script or native code needed only  
to toggle the "open" attribute of the <details> element when the  
<summary> is clicked. Doing it that way would be really nice, because  
it would provide a natural way for authors to customize the look and  
even the specific transition animation used when expanding and  
collapsing.

It seems like there may be other situations where facilities along the  
lines above are useful, so I thought I'd post about my experience here.

Regards,
Maciej

Received on Wednesday, 7 April 2010 06:14:15 UTC