[whatwg] Styling <details>
cam at mcc.id.au
Tue Jan 1 16:43:01 PST 2013
I'm wondering if anybody has had any further thoughts on how <summary>
and <details> should be made stylable.
My initial feelings were along the lines of Tab's -- the disclosure
widget feels very much like something that is created like a list bullet
and matched with ::marker. But reading Ian's reply I'm beginning to
think that this is inadequate, as some platforms may not use a small
separate widget for expanding/collapsing the details at all, and thus at
some point in the future a binding should be used to define the
element's native behaviour, and authors could switch that off with
binding:none to get a stylable element.
But I also feel that authors should be able to get a useful, stylable
presentation of the element without having to construct it themselves,
e.g. by using the UA styles that Lachy suggested. Would it be feasible
to have a native presentation of the element, which you could opt out of
with binding:none, and to have something like Lachy's styles apply when
the native binding isn't being used?
When the native appearance is being used, should it be possible to
target the disclosure widget with ::marker, or to be able to use
list-style-type to change from the default disclosure widget, if the
natural presentation of a details/summary for the platform is like a
list bullet? If that is not the way the platform would present a
details/summary, should attempting to style the bullet automatically
turn off the native rendering?
One thing that I don't like about thinking of the disclosure widget as a
list bullet is that it requires the element to have display:list-item.
I am not sure how useful it would be to have a <summary> element be
inline or inline-block for example, but I feel like it would be good to
support the creation of the ::marker in a manner independent of the
But I am drawn to the idea of using list-style-type to specify the plain
CSS disclosure widget appearance. It seems natural to me for authors to
use list-style-image to supply a custom image.
More information about the whatwg