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.
Documentation
Specification
Status in Chromium
Enabled by default (tracking bug) in:
- Chrome for desktop release 91
- Chrome for Android release 91
- Android WebView release 91
Consensus & Standardization
After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.
- Shipped/Shipping
- No signal
- Positive
- No signals
Owner
Search tags
css, counter, counter-style,Last updated on 2021-07-17
Comments
We have implemented everything of https://drafts.csswg.org/css-counter-styles-3, except: - Image symbols, which no browsers supports, and is 'at-risk' per spec. - 'speak-as' descriptor, which is an accessibility feature. We will ship @counter-style first, and then work with the accessibility team to implement 'speak-as'. Note that screen-reading of existing (predefined) counter styles are unaffected. - 'symbols()' function, which is not part of @counter-style