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 3The 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.
Update compatibility data on GitHub
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
fallback by Mozilla Contributors is licensed under CC-BY-SA 2.5.