Repository navigation
[css-content-3]: Allow content: <list-style-type> as shorthand for content: counter(dummy, <list-style-type>). #14003
Description
See sibling issue whatwg/html#12516. HTML defines base-select as using content: counter(fake-counter-name, disclosure-open) seemingly to get around wanting disclosure-open but not really wanting to use a counter.
Maybe it's worth us allowing content: <list-style-type>, with something akin to a "guaranteed invalid counter name"? This would allow HTML spec to then use content: disclosure-open.
This would have the fridge benefit of allowing e.g. content: circle as a more descriptive alternative to content: \25E6 and so on.
/cc @emilio
Reacted by Sebastian Zartner and Luke Warlow
Activity
[-][css-content-3]: Allow `content: <list-style-type>` as shorthand for `content: counter(dummy, <list-style-type>`.[/-][+][css-content-3]: Allow `content: <list-style-type>` as shorthand for `content: counter(dummy, <list-style-type>`).[/+][-][css-content-3]: Allow `content: <list-style-type>` as shorthand for `content: counter(dummy, <list-style-type>`).[/-][+][css-content-3]: Allow `content: <list-style-type>` as shorthand for `content: counter(dummy, <list-style-type>)`.[/+]fantasai commentedon Aug 13, 2026
I think we should restrict this list to just the built-in symbolic types (disc, circle, square, disclosure-open, etc.). Allowing any counter style opens up the syntax space too much, and also the rest of them need a counter index anyway.
tabatkins commentedon Aug 14, 2026
Yes, just the predefined symbolic types. The non-symbolic types don't really make sense (it'll expose the counter value used), and any custom counter-styles you can just copy the string you used when defining the
@counter-style.Crissov commentedon Aug 14, 2026
Per #13335 it may make sense to include
<'text-emphasis-style'>as well. (That's a weak “may”, though.)tabatkins commentedon Aug 14, 2026
While they are somewhat similar, we don't display text emphasis marks separately from text, or use pseudo-elements to render them.
css-meeting-bot commentedon Aug 19, 2026
The CSS Working Group just discussed
[css-content-3]: Allow `content: <list-style-type>` as shorthand for `content: counter(dummy, <list-style-type>)`., and agreed to the following:RESOLVED: Allow predefined symbolic counter keywords directly in 'content'The full IRC log of that discussion
<ydaniv> keithamus: the content counter uses a dummy counter name, because syntax requires it.<ydaniv> ... it's really weird, and it's there cause of legacy
<fantasai> content: disclosure-open
<masonf> Just do s/fake/specified and it'll be less weird
<lea> q+
<astearns> ack lea
<keithamus> `content: counter(fake-counter-name, disclosure-open)` -> `content: disclosure-open`
<ydaniv> lea: +1 on being able to define easilly, not sure about list-style type, the keyword would look weird
<fantasai> https://drafts.csswg.org/css-counter-styles/#simple-symbolic
<ydaniv> TabAtkins: the proposal is the current predfined static names, disc/circle/etc.
<ydaniv> fantasai: yes only predefined ones
<ydaniv> lea: ok seems fine then
<emilio> +1 to this
<masonf> +1 also
<astearns> ack fantasai
<Zakim> fantasai, you wanted to reply
<lwarlow> +1 ship it
<fantasai> PROPOSED: Allow predefined symbolic counter keywords directly in 'content'
<ydaniv> astearns: so we allow these predefined keywords, but will still work with author content
<lwarlow> +1
<masonf> +1
<ydaniv> keithamus: yes
<keithamus> +1
<kizu> +1
<fantasai> RESOLVED: Allow predefined symbolic counter keywords directly in 'content'
<ydaniv> astearns: objections?
djmarland commentedon Aug 19, 2026
I assume allowing this syntax won't interfere with concatenation, so
content: disc discwould become possible?tabatkins commentedon Aug 19, 2026
Yeah, it'll be part of
<content-list>'s definition, I suppose. The glyph is either a character of text or an anonymous inline image, both of which are okay with combining with other things.css_ast: Allow symbolic-counter-style in content syntax (#1419)
Use UA-drawn glyph for ::picker-icon to avoid negative margin hack
Use UA-drawn glyph for ::picker-icon to avoid negative margin hack
Use UA-drawn glyph for ::picker-icon to avoid negative margin hack
Use UA-drawn glyph for ::picker-icon to avoid negative margin hack
Cherry-pick 321110@main (3e1e77d). rdar://187411081