[whatwg] Styling <details>

[Lachlan Hunt]

On 2011-04-08 11:23, James Graham wrote:
> FWIW I don't think we need cross-browser agreement here. In particular I
> think browsers should be free to implement <details> using a
> platform-native disclose widget if they like. These are not all alike
> e.g. OSX uses something like ▸, Windows something like [+] (I think?)
> and Gnome (at least with the skin I have) something like ▷.

Regardless of whether or not we agree on a common glyph to use for this, 
we should at least agree on the applicable CSS styles used to achieve 
the rendering, which is essential so that authors have an easier time 
override them with their own styles.

If we use 'list-style-type', it seems reasonable to at least agree on a 
common list-style-type value.  Existing list-style-type values in CSS do 
define applicable Unicode characters [1], which is why I suggested them.

One option is to define that the list-style-type 'disclosure-*' as magic 
values that mean to render a UA specific/platform dependent widget.  But 
that differs from all other list-style-type values and doesn't seem 
quite right.

CSS3-UI, however, uses the 'appearance' property to render native 
looking controls.

In theory, native widgets could be achieved instead by using a new 
'appearance' value like:

   summary::marker { appearance: -x-disclosure; }

(Assuming the 'appearance' value handles the open/close states 
automatically, and any animations that would be expected of native controls)

But that would make it slightly harder for authors to restyle as we 
don't yet implement ::marker, and won't implement it until we have time 
to do it properly for list-items in general (we don't want to a quick 
hack just for <summary>).

Authors would have to do this:

   summary::marker { appearance: normal; }
   summary { list-style-image: url(...); }
   [open] summary { list-style-image: url(...); }

[1] http://dev.w3.org/csswg/css3-lists/#glyph-counters

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