CSS custom counter styles

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 91)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Chromium flag: --enable-blink-features=CSSAtRuleCounterStyle
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: Existing WPT tests: - css/vendor-imports/mozilla/mozilla-central-reftests/counter-styles-3/ - css/css-counter-styles/

Summary

The CSS @counter-style rule allows web authors to specify and use custom counter styles in list markers and CSS counters. This helps web internationalization.

Motivation

This is a highly demanded CSS feature, especially by developers with needs in internationalization. The tracking bug (crbug.com/687225) has 40 stars, and already contains multiple detailed use cases of the feature.

Standards & signals

Specification: https://drafts.csswg.org/css-counter-styles-3
Firefox: Shipped/Shipping — Other than image symbols and 'speak-as: spell-out', Firefox has fully shipped the feature.
Safari: Positive
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=687225

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fvendor-imports%2Fmozilla%2Fmozilla-central-reftests%2Fcounter-styles-3
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20custom%20counter%20styles
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20custom%20counter%20styles
Baseline status: https://webstatus.dev/?q=CSS%20custom%20counter%20styles

Docs: https://bit.ly/2Gm1oMC

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

View on chromestatus.com