CSS @counter-style - Fallback

The fallback descriptor allows you to define a counter style that will be used if the current counter style cannot generate a marker representation for a specific counter value.

If the provided counter style cannot produce a representation, it falls back to its own fallback style, defaulting to the decimal style if none is specified.

Fallback styles are used in situations as listed below:

  • For counter styles with range descriptors: If a value is out of the specified range, the fallback style is used.

  • In fixed systems with insufficient symbols: When there aren't enough symbols to cover all list items, the fallback style is applied to the remaining items.

Syntax

fallback = <counter-style-name>

CSS Fallback - Basic example

The following example demonstrates specifing fallback counter-style.

<html>
<head>
<style>
   @counter-style unit-counter {
      symbols: "I" "V" "X" "L" "C" "D" "M";
      additive-symbols: 1 5 10 50 100 500 1000;
      fallback: decimal;
   }
   ol {
   list-style: unit-counter;
      color: red;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
	<ol>
		<li>Head 1</li>
		<li>Head 2</li>
		<li>Head 3</li>
		<li>Head 4</li>
		<li>Head 5</li>
		<li>Head 6</li>
		<li>Head 7</li>
		<li>Head 8</li>
	</ol>
</body>
</html>

In this example, fallback: decimal; is used to provide a fallback to the decimal numbering system if the browser doesn't support the custom additive symbols.

The example used it to illustrate a practical approach to handling potential lack of support for custom counter styles in certain browsers.

Advertisements