{ "caniuse": [ "css-at-counter-style" ], "compat_features": [ "api.CSSCounterStyleRule", "api.CSSCounterStyleRule.additiveSymbols", "api.CSSCounterStyleRule.fallback", "api.CSSCounterStyleRule.name", "api.CSSCounterStyleRule.negative", "api.CSSCounterStyleRule.pad", "api.CSSCounterStyleRule.prefix", "api.CSSCounterStyleRule.range", "api.CSSCounterStyleRule.speakAs", "api.CSSCounterStyleRule.suffix", "api.CSSCounterStyleRule.symbols", "api.CSSCounterStyleRule.system", "css.at-rules.counter-style", "css.at-rules.counter-style.additive-symbols", "css.at-rules.counter-style.fallback", "css.at-rules.counter-style.negative", "css.at-rules.counter-style.pad", "css.at-rules.counter-style.prefix", "css.at-rules.counter-style.range", "css.at-rules.counter-style.speak-as", "css.at-rules.counter-style.suffix", "css.at-rules.counter-style.symbols", "css.at-rules.counter-style.system" ], "description": "The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.", "description_html": "The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.", "group": [ "counters" ], "kind": "feature", "name": "@counter-style", "spec": [ "https://drafts.csswg.org/css-counter-styles-3/" ], "status": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "by_compat_key": { "api.CSSCounterStyleRule": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.additiveSymbols": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.fallback": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.name": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.negative": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.pad": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.prefix": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.range": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.speakAs": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.suffix": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.symbols": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "api.CSSCounterStyleRule.system": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.additive-symbols": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.fallback": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.negative": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.pad": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.prefix": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.range": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.speak-as": { "baseline": false, "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33" } }, "css.at-rules.counter-style.suffix": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.symbols": { "baseline": false, "support": { "safari": "17", "safari_ios": "17" } }, "css.at-rules.counter-style.system": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } } }, "support": { "chrome": "91", "chrome_android": "91", "edge": "91", "firefox": "33", "firefox_android": "33", "safari": "17", "safari_ios": "17" } }, "id": "counter-style", "groups": [ "counters" ], "specs": [ { "url": "https://drafts.csswg.org/css-counter-styles-3/", "seriesComposition": "full", "shortname": "css-counter-styles-3", "series": { "shortname": "css-counter-styles", "currentSpecification": "css-counter-styles-3", "title": "CSS Counter Styles", "shortTitle": "CSS Counter Styles", "releaseUrl": "https://www.w3.org/TR/css-counter-styles/", "nightlyUrl": "https://drafts.csswg.org/css-counter-styles/" }, "seriesVersion": "3", "organization": "W3C", "groups": [ { "name": "Cascading Style Sheets (CSS) Working Group", "url": "https://www.w3.org/groups/wg/css/" } ], "release": { "url": "https://www.w3.org/TR/css-counter-styles-3/", "status": "Candidate Recommendation Snapshot", "filename": "Overview.html" }, "nightly": { "url": "https://drafts.csswg.org/css-counter-styles-3/", "status": "Editor's Draft", "alternateUrls": [ "https://w3c.github.io/csswg-drafts/css-counter-styles-3/", "https://w3c.github.io/csswg-drafts/css-counter-styles/" ], "repository": "https://github.com/w3c/csswg-drafts", "sourcePath": "css-counter-styles-3/Overview.bs", "filename": "index.html" }, "title": "CSS Counter Styles Level 3", "source": "w3c", "shortTitle": "CSS Counter Styles 3", "categories": [ "browser" ], "standing": "good", "tests": { "repository": "https://github.com/web-platform-tests/wpt", "testPaths": [ "css/css-counter-styles" ] }, "fragment": null } ], "mdnUrls": [ { "slug": "Web/CSS/Reference/At-rules/@counter-style", "title": "`@counter-style` CSS at-rule", "anchor": null, "url": "https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@counter-style" } ], "standardPositions": [], "hasNegativeStandardPosition": false, "stateOfSurveys": [], "chromeUseCounters": { "percentageOfPageLoad": 0.00425423, "url": "https://chromestatus.com/metrics/webfeature/timeline/popularity/22" }, "interop": [], "wpt": { "url": "https://wpt.fyi/results?q=feature:counter-style" }, "developerSignals": null, "bugs": { "chrome": [ "https://bugs.chromium.org/p/chromium/issues/detail?id=1166766", "https://bugs.chromium.org/p/chromium/issues/detail?id=1225033", "https://bugs.chromium.org/p/chromium/issues/detail?id=687225" ] }, "baselineLowDateAsObject": "2023-09-18T00:00:00.000Z", "baselineHighDateAsObject": "2026-03-18T00:00:00.000Z" }