Hi,
We've been experimenting with the styling of the details element,
trying to figure out the most sensible way style it. We have tried to
find a solution that behaves the way authors expect, provides for easy
restyling by authors and avoiding the troubles associated with magic
styles that can't be expressed in CSS.
The rendering section of the spec is currently very inadequate and does
not describe accurate styles. Also, the sample XBL binding given in the
XBL 2.0 draft is also inadequate for a number of reasons.
== Requirements ==
In designing the solution, we have a number of requirements that we are
trying to meet as best we can.
1. The disclosure triangle must be styleable by authors, either to
replace with their own icon, remove it entirely, or possibly adjust
other common styles.
2. Styling the disclosure triangle should not require complicated hacks
with margins, padding or otherwise, to hide the default disclosure icon
and replace with a custom icon.
3. The default styles that apply directly to the details and summary
elements must be quite simple, such as display, margin and/or padding.
4. The styles applied to the elements in the shadow tree must not have
significant adverse effects on the details or summary elements, nor the
surrounding content. (We should avoid floating or other styles that may
give unexpected results in certain conditions.)
5. If authors change the 'display' style of either the details or
summary elements (e.g. inline, table-cell, etc.), the result should be
sensible, and not have any unexpected results caused by the styling of
the shadow tree. The binding template must not introduce extra
whitespace between elements that would affect the rendering in such cases.
6. We cannot require, nor expect, authors to use XBL to restyle these
elements. (We aren't actually implementing it with XBL, but we have been
discussing it in terms of XBL for future compatibility with it)
7. The content and styling of the shadow tree must not adversely affect
the use of ::before and ::after pseudo-elements applied to either
details or summary. (Note: Chromium's details implementation has some
strange handling for details::before, preferring to render it after the
summary instead of before.)
8. The special summary styling, including the placement of the
disclosure widget, should only apply to the first child summary element
of the details. Subsequent summary elements must not be rendered in
unexpected ways.
9. The default action of opening/closing the details should only apply
when the user clicks on either the summary text or the disclosure
triangle. It should not apply if the user clicks on the other content
within the details element.
10. The summary element must be focussable by default and keyboard
activation must be possible. The focus ring should be drawn around the
summary element and/or the disclosure triangle, and not the entire
details element.
11. The disclosure triangle and any applicable margins and padding must
render on the opposite side and point the opposite direction for RTL
languages.
12. It is preferred to reuse as much existing CSS styles as possible to
achieve the effects, avoiding unnecessary creation of special properties
or values without a good reason.
== Problems with the Spec ==
*Rendering*
There are a number of problems with the way in which the rendering
section describes how to render details [2].
When the details binding applies to a details element, the element is
expected to render as a 'block' box with its 'padding-left' property
set to '40px' for left-to-right elements (LTR-specific) and with its
'padding-right' property set to '40px' for right-to-left elements.
The first container is expected to contain at least one line box, and
that line box is expected to contain a disclosure widget (typically
a triangle), horizontally positioned within the left padding of the
details element.
According to these requirements, the details element should be rendered
something like this:
+---+-+
| | Details |
| +-|
| | The content goes here |
+-+
This is analogous to how it works for ul and ol. However, this creates
a substantial amount of padding on the left which authors are likely to
want to remove or otherwise significantly reduce in most cases.
An alternative approach is to apply a small amount of margin or padding
to the summary element alone, just enough to render the disclosure
triangle within, leaving the remaining content unindented. In this
case, a margin or padding of 1em would be a more reasonable size. 40px
is too much
+---+-+
| | Details |
+---+-|
| The content goes here |
+-+
Note that Chromium's current implementation has an appearance
