Дескриптор CSS-правила `range`

Дескриптор range позволяет автору задавать один или несколько диапазонов значений счётчика, для которых применяется стиль при определении пользовательских стилей счётчиков с помощью правила @counter-style. Если дескриптор range указан, определённый счётчик будет использоваться только для значений, попадающих в заданные диапазоны. Если значение счётчика находится за пределами указанного диапазона, для формирования представления маркера будет использован резервный стиль.

Синтаксис

/* 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;

Значения

Значение представляет собой разделённый запятыми список диапазонов, каждый из которых включает нижнюю и верхнюю границы либо ключевое слово auto.

auto

Весь набор чисел, представимых счётчиком system. Значения диапазона зависят от системы счётчика:

• Для систем cyclic, numeric и fixed диапазон составляет от отрицательного infinity до положительного infinity.
• Для систем alphabetic и symbolic диапазон составляет от 1 до положительного infinity.
• Для систем additive диапазон составляет от 0 до positive бесконечности.
• При использовании extend для расширения системы диапазон определяется значениями, которые система, для которой задаётся расширение, сгенерировала бы с помощью auto, включая расширения сложных предопределённых стилей, таких как некоторые японские, корейские, китайские и эфиопские стили счётчиков.

[ [ <integer> | infinite ]{2} ]#

Каждый диапазон в списке диапазонов, разделённых запятыми, включает два значения, каждое из которых может быть <integer> или ключевым словом infinite. Если infinite используется в качестве первого значения диапазона, оно обозначает отрицательную бесконечность; если в качестве второго — положительную бесконечность. Первое значение каждого диапазона является его нижней границей, а второе — верхней; обе границы включаются в диапазон. Если нижняя граница любого диапазона в списке выше верхней, весь дескриптор range недействителен и будет проигнорирован.

Описание

Значение дескриптора range может быть равно auto или представлять собой разделённый запятыми список диапазонов с нижней и верхней границами, заданными отрицательными или положительными целыми числами либо ключевым словом infinite.

Понимание auto

Если задано значение auto, диапазоном становится диапазон по умолчанию для системы счётчика. Если system — это cyclic, numeric или fixed, диапазон будет простираться от отрицательной до положительной бесконечности. Если system — это alphabetic или symbolic, диапазон будет простираться от 1 до положительного infinity. Для system: additive значение auto задаёт диапазон от 0 до положительного infinity.

При расширении счётчика, если для range задано значение auto, значением диапазона будет диапазон system счётчика, который расширяется, а не значение range этого счётчика, если оно задано. Например, если для счётчика «B» задано system: extends A, а сам счётчик является счётчиком alphabetic, установка range: auto для «B» задаёт диапазон «B» от 1 до infinity. Это диапазон системы alphabetic, а не обязательно диапазон, заданный в определении стиля счётчика «A». Если для «B» задано range: auto, значение range будет равно диапазону по умолчанию системы alphabetic, а не значению range, заданному в списке дескрипторов счётчика A.

Пояснение ключевого слова infinite

Если диапазон задаётся целыми числами (а не значением auto), для обозначения бесконечности можно использовать значение infinite. Если infinite указано в качестве первого значения диапазона, оно интерпретируется как отрицательная бесконечность. Если оно используется в качестве верхней границы, то есть второго значения в паре диапазона, оно интерпретируется как положительная бесконечность.

Список диапазонов

Значение range может быть равно auto, описанному выше, или представлять собой разделённый запятыми список из одного или нескольких диапазонов. Диапазон стиля счётчика является объединением всех диапазонов, заданных в списке.

Каждый диапазон в списке включает два значения. Это может быть <integer> или ключевое слово infinite. Первое значение — это нижняя граница, включительно. Второе значение — это верхняя граница, включительно. Если заданы два целых числа, меньшая граница должна идти первой. Если нижняя граница любого диапазона в списке выше верхней, весь дескриптор range недействителен и будет проигнорирован. Ключевое слово infinite не делает диапазон недействительным, поскольку его значение определяется позицией infinite: оно обозначает отрицательную или положительную бесконечность в зависимости от того, является ли оно нижней или верхней границей соответственно.

Формальное определение

Формальный синтаксис

Примеры

Задание стиля счётчика для диапазона

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

CSS

@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}

Результат

Первый диапазон в списке включает значения 2, 3 и 4. Второй включает 7, 8 и 9. Диапазон является объединением этих двух диапазонов: 2, 3, 4, 7, 8 и 9.

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

Совместимость с браузерами

См. также

• Другие дескрипторы @counter-style: system, symbols, additive-symbols, negative, prefix, suffix, pad, speak-as и fallback
• list-style, list-style-image, list-style-position
• symbols(): функциональная нотация для создания анонимных стилей счётчиков.
• Модуль стилей счётчиков CSS
• Модуль списков и счётчиков CSS