[whatwg] <details>, <summary> and styling

James Graham jgraham at opera.com
Tue Mar 29 06:54:32 PDT 2011

On 03/29/2011 03:27 PM, Wilhelm Joys Andersen wrote:
> Hi,
> I'm currently writing tests in preparation for Opera's implementation
> of <details> and <summary>. In relation to this, I have a few questions
> about issues that, as far as I can tell, are currently undefined in the
> specification.
> The spec says:
> "If there is no child summary element [of the details element], the
> user agent should provide its own legend (e.g. "Details")." [1]
> How exactly should this legend be provided? Should the user agent add
> an implied <summary> element to the DOM, similar to <tbody>, a
> pseudo-element, or a magic non-element behaving differently from both
> of the above?

FWIW I think that, from a spec point of view, it should just act as if 
the first block box container in the shadow tree contained some 
UA-provided text i.e. no magic parser behavior.

> This indicates that it is slightly more magic than I would prefer. I
> believe a closer resemblance to an ordinary element would be more
> convenient for authors - a ::summary pseudo element with "Details" as
> its content() might be the cleanest approach, although that would
> require a few more bytes in the author's stylesheet to cater to both
> author- and UA-defined summaries:
> summary, ::summary {
> color: green;
> }

::summary could be defined to just match the first block box element in 
the <details> shadow tree. That way you could just write

::summary {color:green}

for both cases. I note that optimising for the non-conforming case seems 
a bit unnecessary, however.

> That's a rather small clickable area, which might get troublesome to hit
> on a fuzzy touchscreen or for someone with limited motor skills. I suggest
> the whole block area of <summary>, too, is made clickable - as if it was
> a <label> for the ::marker.

Making the whole ::summary clickable would seem consistent with the rest 
of the platform where labels are typically clickable.

More information about the whatwg mailing list