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/
