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

Specification link


Specification being incubated in a Community Group

Status in Chromium

Blink>CSS


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

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

Search tags

css, counter, counter-style,

Last updated on 2021-07-17