Перейти к содержанию

@counter-style

Правило @counter-style позволяет определять стили счетчиков, которые не являются частью предопределенного набора стилей. Правило @counter-style определяет, как преобразовать значение счетчика в строковое представление.

Изначально в CSS определен набор полезных стилей счетчиков. Однако, несмотря на то, что с течением времени к этому набору предопределенных стилей было добавлено больше стилей, эта система оказалась слишком ограничительной. Правило @counter-style устраняет этот недостаток открытым способом, позволяя авторам определять свои собственные стили счетчика, когда предопределенные стили не соответствуют их потребностям.

@-правила

Синтаксис

1
2
3
4
5
6
7
8
9
@counter-style thumbs {
  system: cyclic;
  symbols: '\1F44D';
  suffix: ' ';
}

ul {
  list-style: thumbs;
}

Каждый @counter-style идентифицируется именем и имеет набор свойств.

system

Определяет алгоритм, который будет использоваться для преобразования целочисленного значения счетчика в строковое представление.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Combined values */
system: fixed 3;
system: extends decimal;

negative

Позволяет автору указать символы, которые будут добавляться или добавляться к представлению счетчика, если значение отрицательное.

1
2
3
/* <symbol> values */
negative: '-'; /* Prepends '-' if value is negative */
negative: '(' ')'; /* Surrounds value by '(' and ')' if it is negative */

prefix

Определяет символ, который должен быть добавлен перед представлением маркера. Префиксы добавляются к представлению на заключительном этапе, поэтому в окончательном представлении счетчика он стоит перед отрицательным знаком.

1
2
3
4
/* <symbol> values */
prefix: '»';
prefix: 'Page ';
prefix: url(bullet.png);

suffix

Определяет, аналогично дескриптору префикса, символ, который добавляется к представлению маркера. Суффиксы идут после маркера представления.

1
2
3
4
/* <symbol> values */
suffix: '';
suffix: ') ';
suffix: url(bullet.png);

range

Определяет диапазон значений, к которым применяется стиль счетчика. Если стиль счетчика используется для представления значения счетчика за пределами его диапазонов, стиль счетчика возвращается к своему стилю резервирования.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* Keyword value */
range: auto;

/* Range values */
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/* Multiple range values */
range: 2 5, 8 10;
range: infinite 6, 10 infinite;

pad

Используется, когда необходимо, чтобы представления маркеров были минимальной длины. Например, если вы хотите, чтобы счетчики начинались с 01 и проходили через 02, 03, 04 и т. д., то должен использоваться дескриптор pad. Для представлений, превышающих указанное значение, маркер строится как обычно.

1
pad: 3 '0';

fallback

Определяет систему, к которой следует обращаться, если указанная система не может создать представление значения счетчика или если значение счетчика выходит за пределы указанного диапазона. Если указанный запасной вариант также не может представить значение, тогда используется запасной вариант стиля резервирования, если он указан. Если нет описанных резервных систем или если цепочка резервных систем не может представить значение счетчика, то в конечном итоге он вернется к десятичному стилю.

1
2
3
/* Keyword values */
fallback: lower-alpha;
fallback: custom-gangnam-style;

symbols

Определяет символы, которые должны использоваться для представлений маркера. Символы могут содержать строку, изображения или пользовательские идентификаторы. То, как символы используются для построения представления маркера, зависит от алгоритма, указанного в системном дескрипторе. Например, если указанная система является фиксированной, то каждый из N символов, указанных в дескрипторе, будет использоваться для представления первых N символов счетчика. Как только указанный набор символов исчерпан, для остальной части списка будет использоваться запасной стиль.

1
2
3
4
5
symbols: A B C D E;
symbols: '\24B6''\24B7''\24B8'D E;
symbols: '0' '1' '2' '4' '5' '6' '7' '8' '9';
symbols: url('first.svg') url('second.svg') url('third.svg');
symbols: indic-numbers;

В приведенном ниже правиле @counter-style вместо символов используются изображения. Значения изображений для символов в настоящее время являются рискованной функцией и не реализованы ни в одном браузере.

1
2
3
4
5
6
@counter-style winners-list {
  system: fixed;
  symbols: url('gold-medal.svg') url('silver-medal.svg')
    url('bronze-medal.svg');
  suffix: ' ';
}

additive-symbols

Хотя символы, указанные в дескрипторе символов, используются для построения представления маркера большинством алгоритмов, некоторые системы, такие как «аддитивные», полагаются на аддитивные кортежи, описанные в этом дескрипторе. Каждый аддитивный кортеж состоит из символа счетчика и целого неотрицательного веса. Аддитивные кортежи должны быть указаны в порядке убывания их весов.

1
2
3
additive-symbols: 3 '0';
additive-symbols: 3 '0', 2 '\2E\20';
additive-symbols: 3 '0', 2 url(symbol.png);

speak-as

Описывает, как считывать стиль счетчика в синтезаторах речи, таких как программы чтения с экрана. Например, значение символа маркера может быть считано в виде чисел или алфавитов для упорядоченных списков или в виде звуковых сигналов для неупорядоченных списков на основе значения этого дескриптора.

1
2
3
4
5
6
7
8
9
/* Keyword values */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* @counter-style name value */
speak-as: <counter-style-name>;

Спецификация

Поддержка браузерами

  • Firefox 33+

Пример

1
2
3
4
5
6
7
8
9
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: ' ';
}

.items {
  list-style: circled-alpha;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve
...
...
Ⓨ Twenty Five
Ⓩ Twenty Six
27 Twenty Seven
28 Twenty Eight
29 Twenty Nine
30 Thirty

Ссылки

Комментарии