Summary
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. 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 few scenarios where fallback style will be used are:
- When the {{cssxref('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
{{cssxref('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.
{{cssinfo}}
Syntax
/* Keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style;
Formal syntax
{{csssyntax}}
Example
HTML Content
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
CSS Content
@counter-style fallback-example { system: fixed; symbols: "\24B6" "\24B7" "\24B8"; fallback: upper-alpha; } .list { list-style: fallback-example; }
Live Example
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/fallback') }}
The above list will display as follows:
Ⓐ. One
Ⓑ. Two
Ⓒ. Three
D. Four
E. Five
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}} | {{Spec2('CSS3 Counter Styles')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop(33)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop(33)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.