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

--------------------------------------------------
From: "Maciej Stachowiak" <mjs@apple.com>
Sent: Tuesday, April 06, 2010 11:13 PM
To: "www-style CSS" <www-style@w3.org>
Subject: 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.
>

Below is "pure" CSS solution of such expanding/collapsing element.
CSS should have following features in order it to work :

1) behavior: checkbox;  - this declares the DOM element to behave as
       checkbox - click on the element simply switches :checked state on and 
off
       on that element.

2) visibility:collapse; on arbitrary DOM element.
        collapsed element takes no space but has known intrinsic dimensions.
        Thus height: auto has meaning for such elements.

3) It is nice to have :animating state so you will be able to say:
    div:animating
    {
      visibility:visible; // while animating it still should be visible
      overflow-y:hidden;  // and clip content
    }

And here is that sample (from HTMLayout SDK [1]):

<html>
<head>
  <style>

    caption
    {
      background:#444;
      color:white;
      behavior: checkbox;
    }

    caption + div
    {
      visibility:collapse;
      height:0px;
      background-color:white;
      color:white;
      padding:4px;
    }

    caption:checked
    {
      color:red;
    }

    caption:checked + div
    {
      visibility:visible;
      height:auto;
      background-color:#EEE;
      color:#000;

      transition: height(quad-out,0.4s)
                  background-color(linear,0.4s)
                  color(linear,0.4s);
    }

    div:animating
    {
      visibility:visible; // while animating it still should be visible
      overflow-y:hidden;  // and clip content
    }
  </style>
  <script type="text/tiscript"></script>
</head>
<body>
  <h1>Extended transition property demo</h1>
  <p>Animation to auto value</p>

  <div style="width:50%;height:*;margin:4px *;">
    <caption>Click me!</caption>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
in culpa qui
      officia deserunt mollit anim id est laborum.
    </div>
    <div>
</body>
</html>

[1] http://www.terrainformatica.com/htmlayout/HTMLayoutDemo.zip (MS Windows 
only)
   /html_samples/transitions/to-intrinsic-height.htm

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 7 April 2010 07:16:49 UTC