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.
Syntax
/* Keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style;
Description
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:
- When the
range
descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range. - When the
fixed
system
is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | decimal |
Computed value | as specified |
Formal syntax
<counter-style-name>where
<counter-style-name> = <custom-ident>
Examples
Specifying a fallback counter style
HTML
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
CSS
@counter-style fallback-example { system: fixed; symbols: "\24B6" "\24B7" "\24B8"; fallback: upper-alpha; } .list { list-style: fallback-example; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'fallback' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fallback | Chrome No support No | Edge No support No | Firefox Full support 33 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 33 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
list-style
,list-style-image
,list-style-position
symbols()
: the functional notation creating anonymous counter styles