Chrome 155 ships CSS symbols() — inline list markers, eleven years after Firefox
Chrome 155, which reached stable on October 6, adds the CSS symbols() function: a way to define a list-marker style inline, right in the list-style-type value, instead of writing a separate @counter-style rule. Firefox has supported it since version 35 in January 2015. Safari has not shipped it; MDN’s compatibility data, checked on October 14, lists no Safari version.
What one line now does
symbols() takes an optional counting system and a list of strings. Footnote markers, for example:
According to the CSS Counter Styles Level 3 draft, everything else about the style it creates is fixed: no prefix, a suffix of a single space (not the “. ” that ordinary numbered lists use), a range of auto, decimal as the fallback, a hyphen for negative numbers and no padding. Leave out the system and you get symbolic. The fixed system starts counting at 1, and alphabetic and numeric need at least two symbols.
What it cannot do
Everything else still needs @counter-style: the additive system behind Roman numerals, your own prefix or suffix, a range, padding, speak-as, extending an existing style, or reusing one style by name across a site. @counter-style itself is Baseline: Chrome 91, Firefox 33 and Safari 17 (September 2023) all support it, so it is also the choice for anything that must look right in Safari today.
What Safari does with it today
We tested in Chromium 141, a build from before the change, which treats symbols() the way Safari does now: the declaration is invalid, so it is dropped. An ordered list with only the symbols() line showed plain decimal numbers; a list that declared a string marker first kept that marker. So put the fallback first:
Which of our generator’s presets fit in one line
Our CSS Counter Style Generator writes full @counter-style rules. Four of its six presets translate directly to symbols(); the visible difference is the suffix, which becomes a space instead of the generator’s “. ”.
| Preset | System | symbols() version |
|---|---|---|
| emoji-stars | cyclic | symbols(cyclic "⭐" "🌟" "✨") |
| binary | numeric | symbols(numeric "0" "1") |
| greek-alpha | alphabetic | symbols(alphabetic "α" "β" … "ω") |
| circled | fixed | symbols(fixed "①" "②" … "⑩"); item 11 and later fall back to decimal, as in the generator |
| roman-upper, roman-lower | additive | Not possible: use the generator’s @counter-style rule |
Should you switch?
For a one-off marker on a page you control, symbols() saves a rule and keeps the style next to the list it styles. For anything shared across pages, anything with a custom suffix, or anything that has to look the same in Safari, keep using @counter-style.