The fallback
descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.
The fallback
descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.
/* Keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style;
If the specified fallback style is also unable to construct a representation, then its fallback style will be used. If a valid fallback style is not specified, it defaults to decimal
.
A couple of scenarios where a fallback style will be used are:
Related at-rule | @counter-style |
---|---|
Initial value | decimal |
Computed value | as specified |
<counter-style-name> <counter-style-name> = <custom-ident>
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
@counter-style fallback-example { system: fixed; symbols: "\24B6" "\24B7" "\24B8"; fallback: upper-alpha; } .list { list-style: fallback-example; }
Specification |
---|
CSS Counter Styles Level 3 # counter-style-fallback |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fallback |
91 |
91 |
33 |
No |
77 |
No |
91 |
91 |
33 |
64 |
No |
16.0 |
list-style
, list-style-image
, list-style-position
symbols()
: the functional notation creating anonymous counter styles
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback