Несколько интересных вещей о @counter-style

Недавно читал статью Хуана в Almanac, посвящённую at-правилу @counter-style, и готов поклясться, что он раскрыл и разобрал некоторые чрезвычайно интересные вещи, которые можно сделать для стилизации списков, в частности, маркер списка. Вы, вероятно, уже знаете о псевдоэлементе ::marker. Возможно, вам доводилось работать с кастомными счётчиками, использующими counter-reset и counter-increment. А может быть, вы предпочитаете удалять list-style (будьте осторожны!) и вручную добавлять маркер в псевдоэлемент ::before элемента списка.

Но пробовали ли вы работать с @counter-style? Оказывается, он делает много тяжёлой работы и открывает новые способы работы со списками и маркерами списков.

Стилизация маркера только одного элемента списка

Это так называемая «фиксированная» система, устанавливающая конкретный элемент.

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "💠";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

See the Pen

Присваивание символов определённым маркерам

Если используется «аддитивная» система, то можно определить, какие символы относятся к тем или иным элементам списка.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

See the Pen

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

Добавление префикса и суффикса к маркерам списка

Давным-давно Chris продемонстрировал способ вставки знаков препинания в конец маркера списка с помощью псевдо-функции ::before элемента списка:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

В наши дни это стало гораздо проще благодаря @counter-styles:

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

See the Pen

Стилизация нескольких диапазонов элементов списка

Допустим, есть список из 10 элементов, но необходимо стилизовать только элементы 1-3. Для этого можно задать диапазон:

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

See the Pen

Можно расширить предыдущий пример с игральными костями:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

See the Pen

Другой способ сделать это — использовать ключевое слово infinite в качестве первого значения:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

Возможно, вы захотите стилизовать сразу два диапазона и включить в них элементы 6-9. Не знаю, зачем это нужно, но уверен, что у вас есть веские причины.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

See the Pen

Добавление заполнения для маркеров списка

Вы когда-нибудь сталкивались с ситуацией, когда маркеры списка выстраиваются неравномерно? Обычно это происходит при переходе, скажем, от числа с одной цифрой к числу с двумя цифрами. Чтобы выровнять маркер, можно добавить в него дополнительные символы.

/* добавляет нули к маркерам элементов списка */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Теперь маркеры всегда будут выровнены…. ну, до 999 элементов.

See the Pen

На этом всё

Я подумал, что это довольно интересные способы работы с маркерами списков в CSS, идущие вразрез (понимаете?!) с традиционным подходом к подобным вещам. А поскольку стиль @counter-style стал Baseline «недавно доступным» в сентябре 2023 года, он хорошо поддерживается в браузерах.

Комментарии