CSS - system

The system descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a @counter-style to define the behavior of the defined style.

Syntax  

CSS
/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Combined values */
system: fixed 3;
system: extends decimal;
cyclic
Cycles through the list of symbols provided. Once the end of the list of symbols is reached, it will loop back to the beginning and start over. This system is useful for simple bullet styles with just one symbol or for styles having multiple symbols. At least one symbol must be specified in the symbols descriptor or the counter style is not valid.

Examples

 

Example 1

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style fisheye {
  system: cyclic;
  symbols:;
  suffix: " ";
}

.list {
    list-style: fisheye;
}

 

The above counter style will render lists like this:

◉ One
◉ Two
◉ Three
fixed
Defines a finite set of symbols are specified. Once the system has looped through all the specified symbols, it will fall back. This system is useful in cases where the counter values are finite. At least one symbol must be specified in the symbols descriptor or the counter style is not valid. Also an optional <integer> can be specified after the the system, as the value of the first symbol. If this integer is omitted, value of the first integer is taken as 1.
 

Example 2

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: ' ';
}
The above counter style will render the list like this:

➀ One
➁ Two
➂ Three
4 Four
5 Five
symbolic
Cycles through the provided list of symbols. On each successive pass through the cycle, the symbols used for the counter representation are doubled, tripled and so on. For example, if the original symbols provided were "◽" and "◾", on each successive pass, they will become "◽◽" and "◾◾", "◽◽◽" and "◾◾◾" and so on. At least one symbol must be specified in the symbols descriptor or the counter style is not valid. This counter system works for positive counter values only.

 

Example 3

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}
The above counter style will render lists like this:

   a. One
   b. Two
   c. Three
 aa. Four
 bb. Five
 cc. Six
aaa. Seven
alphabetic
Interprets the specified symbols as digits to an alphabetic numbering system. If the characters "a" to "z" are specified as symbols in a counter style with the alphabetic system, then the first 26 counter representations will be "a", "b" upto "z". Upto this point, the behviour is same as that of the symbolic system described above, but after "z", it will continue like "aa", "ab", "ac"

The symbols descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the symbols descriptor is interpreted as 1, the next one as 2 and so on. This system is also defined strictly over positive counter values.

 

Example 4

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}
The above counter style will render lists like this:

  a. One
  b. Two
  c. Three
aa. Four
ab. Five
ac. Six
ba. Seven
numeric
Interprets the counter symbols as digits in a place-value numbering system. The numeric system is kind of similar to the alphabetic system described above. The main difference is that, in the alphabetic system, the first counter symbol given in the symbols descriptor is interpreted as 1, the next as 2 and so on. But in the numeric system, the first counter symbol is interpreted as 0, then the next as 1, then 2 and so on.

At least two counter symbols must be specified in the symbols descriptor or the counter style is not valid.
 

Example 5

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

The above counter style will render lists like this:

  b. One
  c. Two
ba. Three
bb. Four
bc. Five
ca. Six
cb. Seven

The first symbol provided in the symbols descriptor is interpreted as 0 here.

As shown in the following example, if digits from 0 to 9 are specified as symbols, this counter style will render symbols same as the decimal counter style.

Example 6

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style numbers {
  system: numeric;
  symbols: 0 1 2 3 4 5 6 7 8 9;
  suffix: ". ";
}

The above counter style will render the list like this:

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
10. Ten

additive
Used to represent "sign-value" numbering systems such as the Roman numerals, which rather than reuse digits in different positions to obtain different values, define additional digits for larger values. The value of a number in such a system can be found out by adding the digits in the number.

An additional descriptor called additive-symbols must be specified with at least one additive tuple or else the counter style rule will not be valid. An additive tuple is kind of a composite counter symbol, that is made up of two parts, a normal counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights or the system is invalid.
 

Example 7

HTML

HTML
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

This following @counter-style rule will render lists with Roman numerals for counter representations.

Notice that a range is specified in this example. This is because the above representation will produce correct Roman numerals only until the counter value of 3999. Once outside of the range, the rest of the counter representations will be based on the decimal style, which is the fall back. But if what you need is to represent counter values as Roman numerals, you could just use either one of  the predefined counter styles, upper-roman or lower-roman, rather than reinvenging the rule yourself.

extends
Allows authors to use the algorithm of another counter style, but alter its other aspects. If a counter style rule is using the extends system has any unspecified descriptors, their values will be taken from the extended counter style specified. If the specified counter style name specified in extends is not a currently defined counter style name, it will instead extend from the decimal counter style.

It must not contain a symbols or additive-symbols descriptor, or else the counter style rule is invalid. If one more more counter styles defenitions form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style.
 

Example 8

HTML

CSS
<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

CSS
@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}
The above counter style rule will use the algorithm, symbols and other properties of the lower-alpha counter style, but will remove the period ('.') after the counter representation and enclose the characters in paranthesis like (a) (b) etc.

Formal syntax

CSS
cyclic <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> numeric <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> alphabetic <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> symbolic <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> additive <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a>fixed <a href="css/integer" title=""><integer></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> extends <a href="css/@counter-style/system#counter-style-name"><counter-style-name></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><p>where <br><code><counter-style-name> = <custom-ident></code></p>

Description  

The system descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a @counter-style to define the behavior of the defined style.

If the algorithm specified in the system descriptor is unable to construct the representation for a particular counter value, then that counter value's representation will be constructed using the fallback system provided.

Related at-rule@counter-style
Initial valuesymbolic
Mediaall
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 33 (33) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 33 (33) No support No support No support

See Also  

Specifications  

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'system' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@counter-style/system

@counter-style CSS CSS Counter Styles CSS Descriptor NeedsLiveSample Reference