[css-lists][html] <summary> and ::marker

Recently HTML, under advisement from fantasai and I, specified that
the "disclosure triangle" on a <summary> element (part of the
<details> element) is displayed using a list marker, by setting
<summary> to display:list-item.

Unfortunately, this decision came with some additional baggage that
we're now having to work around in HTML.  In particular:

* display:list-item also automatically increments the list-item
counter, which is used by HTML's <ol> element.  This meant that using
a <details> inside of an <ol> would cause the next <li> to jump ahead
by 2.
* <summary> uses list-style-position:inside, and list-style-*
properties inherit, so if you use an HTML list inside of a <summary>,
its markers will be "inside" position as well.  (HTML purposely
doesn't set list-style-position, so that if you make an outer list
"inside" the nested lists will be too. By default, tho, they use the
initial "outside" value, and that's the expected way for them to
display.)

Both of these have fixes - the first by setting "summary {
counter-increment: list-item 0; }", the second by setting "summary > *
{ list-style-position: initial; }" - but they still make things
messier than they have to.

I propose a simple solution: rather than having "display:list-item"
cause the ::marker to be generated, as is specced today, we make
::marker *always* exist, identical to ::before.  For normal elements
you have to explicitly give it a 'content' value, just like ::before.
"display:list-item" then just makes the ::marker pay attention to the
list-style-* properties.

This would let us swap the <summary> UA style back to just:

summary {
  display: block;
}
summary::marker {
  content: disclosure-closed;
}
details[open] > summary::marker {
  content: disclosure-open;
}

(We'd also redefine disclosure-open/closed from being counter styles
to just being 'content' keywords with the same effect.)

fantasai offers an alternate proposal: leave <summary> as is, leave
the hack for the first problem, but make the list-style-* properties
actually only apply to the ::marker pseudo, rather than to list items.
Inheritance ensures that we maintain today's behavior, but HTML can
then set list-style-position:inside directly on the summary::marker,
and avoid the second problem entirely.

Thoughts?

~TJ

Received on Thursday, 21 April 2016 18:24:54 UTC