Использование attr() в CSS для столбцов, цвета и размера шрифта

Я уже много лет вношу «расширенное использование attr()» в список желаний CSS. И вдруг мы видим, что поддержка этой функции начала расширятся! Спасибо команде Chrome и другим разработчикам за распространение и освещение этой замечательной функции. В этой заметке я не буду подробно описывать эту функцию, о ней это можно прочитать: Теперь CSS функция attr() поддерживает типы.

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

Суть

Раньше значение attr() всегда было строкой, что делало его пригодным только для свойства content и некоторых нишевых текстовых эффектов.

div::after {
  content: attr(data-title);
}

Даже если написать что-то вроде data-number="10", невозможно получить правильное число 10 для использования в CSS. То же самое с data-size="3rem" — нет никаких шансов получить 3rem для реального использования.

Теперь можно! Достаточно объявить, какого типа будет значение.

div {
  font-size: attr(data-font-size type(<length>));
  grid-column-start: attr(data-column-start type(<integer>));

  /* пример с ;резервным значением" */
  color: attr(data-color type(<color>), black);
}

Типы

Использование attr() для управления grid

Вот пример, где:

• data-row явно задаёт, в какой строке находится элемент
• data-columns явно задаёт, сколько столбцов должен охватывать элемент
• data-column-start и data-column-end задают, где столбец должен начинаться или заканчиваться

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

See the Pen

Использование attr() для цвета

Просто укажите цвет, который хотите использовать — это здорово!

See the Pen

Данный пример подчёркивает преимущества дополнительного "слоя" CSS для работы с элементами, в отличие от прямых встроенных стилей. Здесь не просто задаётся отдельный color, а используется заданный цвет для фактического color, затем берётся тот же цвет и color-mix() с черным, для использования в качестве фонового цвета.

Чтобы подчеркнуть больше возможностей контроля, можно использовать значения min() и max() в синтаксисе относительного цвета, чтобы, цвет имел минимальный уровень яркости, лучше всего подходящий для читабельности.

See the Pen

Над точкой перед каждой строкой задаётся фактический цвет в качестве атрибута, но когда используется для выделения цветом слова в строке, он преобразуется в oklch() и гарантирует, что часть "l" ("показатель светлости") имеет минимальное значение 0,9. Это обеспечивается с с помощью max(l, 0,9).

Использование attr() для размеров шрифтов

Установить data-font-size проще простого. Но сразу перейдём к части "дополнительный контроль". Возможно, в вашей дизайн системе установлены строгие правила относительно размера размера шрифтов, и допускается только шаг в 5px. Используя CSS round(), это можно сделать с помощью данного подхода.

See the Pen

Остальное

• Как насчёт data-gap в качестве утилиты, позволяющей просто изменять интервал, но иметь возможность округлять его до определённых значений в дизайн-системе?
• Как насчёт автоматических view-transition-names, как это сделал Bramus.
• Управляемы границы с data-border кажутся приятной возможностью. Или даже индивидуальные границы. Или индивидуальные части индивидуальных границ, такие как data-border-bottom-width.
• У меня появилась идея, что установка значения CSS переменной в значение атрибута — это способ передать значение ниже в дереве DOM, что не представляется возможным в других случаях, например…

[data-button-color] {
  --button-color: attr(data-button-color type(<color>));

  button {
    color: var(--button-color);
  }

В этом случае кажется, что можно сделать что-то вроде data-size-of-close-button в <dialog>, а затем получить доступ к этой информации, где бы вы ни реализовали кнопку закрытия.

Зачем всегда использовать data-*

Не обязательно. Идея не загрязнять имена атрибутов довольно неплохая. Если однажды веб-платформа действительно захочет по какой-то причине поддержать атрибут gap, но в результате анализа веб-сайтов обнаружит, что слишком много веб-сайтов уже используют этот атрибут — будет облом. Пространство имён data-* было создано именно для этого, так что его стоит использовать. К тому же вы получаете в подарок JavaScript свойство dataset.

До свидания и, пожалуйста, поделитесь своими идеями.