CSS Symbols()

Category: CSS
Type: Chromium catches up
Status: Proposed (Chrome Proposed)
Intent stage: None

Summary

The CSS symbols() function lets authors define a counter style inline instead of first declaring a named @counter-style at-rule. It builds an anonymous counter style from a list of string symbols plus an optional counting system (cyclic, numeric, alphabetic, symbolic, or fixed), and is accepted as the counter style in list-style-type, the list-style shorthand, and counter() / counters().

Motivation

Defining a custom list marker in CSS today requires authoring a named @counter-style rule and referencing it by name, which is needlessly verbose for one-off, anonymous markers. The symbols() function lets authors define the same counter style inline, without inventing or managing a global name. It works wherever a counter style is accepted, specifically in list-style-type and the counter()/counters() functions. Gecko has supported symbols() since 2015, but Blink and WebKit have not, so this addresses an important interoperability gap.

Standards & signals

Specification: https://drafts.csswg.org/css-counter-styles-3/#symbols-function
Firefox: Shipped/Shipping
Safari: Support
Web developers: Positive — We have a developer-filed bug asking for symbols: Lack of support for CSS `symbols()` function (https://issues.chromium.org/issues/484510686), as well as a handful of upvotes in the tracking bug Implement CSS counter styles level 3 `symbols()` function (https://issues.chromium.org/issues/40747844). There are also a few dev articles covering `symbols()` noting the lack of cross-platform support (https://css-tricks.com/almanac/functions/s/symbols/ and https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/).
Tracking bug: https://issues.chromium.org/issues/40747844

Samples: https://developer.mozilla.org/en-US/docs/Web/CSS/symbols

Explainers: https://developer.mozilla.org/docs/Web/CSS/symbols

View on chromestatus.com