W3C home > Mailing lists > Public > www-style@w3.org > April 2016

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 21 Apr 2016 23:36:58 -0700
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <44A87375-6825-42AA-A4ED-8C8146C1DA83@gmail.com>
To: Florian Rivoal <florian@rivoal.net>


> On Apr 21, 2016, at 5:55 PM, Florian Rivoal <florian@rivoal.net> wrote:
> 
> 
>> On Apr 22, 2016, at 03:24, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> 
>> 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?

Is the problem we're trying to solve "how to make summary use ::marker"? Why not just let it use ::before, or use shadow Dom? 

> I like your (Tab's) proposal better. It's easy to understand, easy to use, avoids overloading the semantics implied by "display:list-item". Also, it gives us one more pseudo element to use and abuse for all sorts of effects, which I expect will be very welcome by authors.

Much as I'd like more pseudo-element boxes, I'd prefer a less hacky way to get multiple ::before boxes, and also multiple  ::after boxes. Something like ::before(3) to create a ::before element that is an adjacent sibling right before the ::before(2), which is in turn  an adjacent sibling right before the ::before(1). And ::before(1) would be the same as ::before as we know it.
Received on Friday, 22 April 2016 06:37:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC