[whatwg] Styling <details>

On 2011-04-06 03:36, Tab Atkins Jr. wrote:
> I like the idea of using display:list-item for the<summary>.  It has
> some unfortunate weaknesses due to the way that display:list-item is
> defined; in particular, you can't get an inline summary without losing
> the disclosure marker, since there's no way to make an inline
> list-item right now.

If authors want to do that now, it's not such a big deal for them to 
provide their own disclosure icon as a background image in the padding 
area, or to use this in their own styles:

   [open]>summary::before { content: url(open.png); }
          summary::before { content: url(closed.png); }.

> I expect this to be fixed on the CSS side in due
> time, with the 'display' property split into some subproperties such
> that ::marker generation is independent of the list item being inline
> or block.

Yes, that will be useful.

> I also like the display:transparent idea for handling the wrapper
> around the rest of the contents.

:-)

> Swapping out bindings (the second solution) feels hacky and bad.
> Using a <details>-specific pseudo-element (the third solution)
> doesn't actually solve the problem - it's still a box surrounding the
> extra content, so it would suffer from the same problem that was
> previous cited, where setting display:table-cell on an element in the
> contents wouldn't work as intended. Its only good side is that you
> can style the pseudoelement directly, which would make *some*
> use-cases salvageable.

Agreed, that's why I said it only provides a workaround, and we are not 
taking that approach internally.

Our implementation will be black-box-equivalent to the first two 
alternatives, minus the XBL bindings, and our UA stylesheet will be 
exactly as I described in the proposed solution.

So either of those approaches should be acceptable, though I do prefer 
the more elegant display:transparent; approach.

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

Received on Wednesday, 6 April 2011 02:26:04 UTC