[whatwg] Styling <details>

[Lachlan Hunt]

On 2011-04-06 02:56, Lachlan Hunt wrote:
> To render this, the following CSS should be applied by the UA stylesheet.
>
> details>summary:first-of-type {
>   display: list-item;
>   margin-left: 1em; /* LTR-specific: use 'margin-right' for rtl elements */
>   list-style-type: -o-disclosure-closed;
> }
>
> details[open]>summary:first-of-type {
>   list-style-type: -o-disclosure-open;
> }

There are a few other issues that we have identified.

1. The rendering of details will, unfortunately, inherit the quirks mode 
rendering of list-items, where the bullet is a fixed size in quirks 
mode, and based on the font-size in standards mode.  This is a quirk 
implemented by Firefox, IE and Opera for display: list-item; though 
WebKit doesn't seem to.  We are not sure if this quirk is still required 
for web compatibility.

2. If the author attempts to shoot their own foot off by using:

   summary { display: none; }

This leaves an empty <details> box of zero height in the closed state 
with no way to open it, and the renders the content without a summary or 
disclosure widget in the <details open> state.

We think this is acceptable, and that we should not introduce the magic 
that exists in Chrome's experimental implementation, where they render 
the default summary that says "Details".

3. We'd like to get some feedback from web developers, and agreement 
from other browser vendors, about exactly which glyphs are most 
appropriate to use for these disclosure states.  We considered two 
alternatives, but we think these three glyphs are the most appropriate.

U+25B8 (▸) BLACK RIGHT-POINTING SMALL TRIANGLE
U+25C2 (◂) BLACK LEFT-POINTING SMALL TRIANGLE
U+25BE (▾) BLACK DOWN-POINTING SMALL TRIANGLE

The other alternative we considered was a larger set of triangle glyphs 
that were too big for this purpose.

We created a custom SVG font with these glyphs, and I've put up a page 
illustrating how each of these look.

http://lachy.id.au/dev/2011/triangle.html

(Use Opera to see the SVG font)

Copies of these glyphs (rendered with list-style-image instead) are now 
being used in the simulation I created before.

http://lachy.id.au/dev/2011/details.html

(Check the directory listing there to get all the image files if you 
want them.)

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/