Теперь CSS функция attr() поддерживает типы

attr() обычно используется вместе со свойством content в псевдоэлементах для отображения значения атрибута на странице.

Функция attr() давно существует и широко используется в CSS. Однако она принимала только один аргумент: имя атрибута, значение которого требуется использовать.

Кроме того, значение, возвращаемое функцией attr(), всегда рассматривалось как строка, поэтому её можно было использовать только в свойствах, принимающих строковые значения. Например, свойство content, о котором говорилось ранее.

Новый синтаксис с типами

В последней редакции CSS спецификации функция attr() была обновлена и стала поддерживать типы. Это означает, что теперь можно указать тип значения, к которому должен относиться атрибут.

В результате мы можем использовать функцию attr() с большим количеством свойств. И это делает её гораздо более мощной, чем раньше. Открывается целый мир новых возможностей для CSS функции attr().

Новый синтаксис функции attr() выглядит следующим образом.

attr(<attribute-name> type(<specific-type>))

Как использовать функцию attr() с типами

Например, если необходимо задать ширину элемента на основе значения атрибута data-width, это можно сделать следующим образом.

Сначала укажите атрибут data на элементе, который нужно настроить.

<div data-width="100px"></div>

Затем в CSS с помощью функции attr() и функции type() можно указать, что значение атрибута data-width должно рассматриваться как тип <length>.

div {
  width: attr(data-width type(<length>));
}

Как видите, тип <length> представляет значение длины, и прекрасно сочетается со свойством width. В результате ширина элемента div будет равна 100px.

Практический пример

Допустим, необходимо создать UI, похожий на диаграмму, где требуется настроить ширину элементов div на основе значения атрибута data-width и цвет фона на основе значения атрибута data-color.

И вот как это можно реализовать.

<div class="box" data-width="200px" data-color="hotpink"></div>
<div class="box" data-width="300px" data-color="slateblue"></div>
<div class="box" data-width="400px" data-color="green"></div>
<div class="box" data-width="500px" data-color="slategray"></div>
<div class="box" data-width="600px" data-color="mediumvioletred"></div>

.box {
  width: attr(data-width type(<length>));
  background: attr(data-color type(<color>));
  height: 80px;
}

.box::before {
  content: attr(data-color);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
}

Посмотреть на него в действии можно в данном CodePen.

See the Pen

Обратите внимание, что в этом примере используется только один общий класс box для настройки ширины элементов div на основе значения атрибута data-width.

Цвет фона также настраивается на основе значения атрибута data-color для всех <div>. С помощью функции type(<color>) указывается, что значение атрибута data-color должно рассматриваться как тип <color>.

В завершение

Более подробно обо всех типах, которые можно использовать с помощью attr(), можно узнать из этой статьи Una и других продвинутых примеров использования её новых возможностей. Например, этот пример со шкалой рейтинга звёзд очень крут!

See the Pen

Я считаю, что это отлично, поскольку можно будет создавать UI с минимально возможным кодом. Можно будет настраивать каждый аспект UI, не прикасаясь к CSS. По сути, это что-то вроде Напиши один раз, используй везде, что делает CSS многоразовым и удобным в обслуживании.

Функция attr() с типами пока поддерживается только в последних версиях браузеров на базе Chromium (Chrome 133 и новее, если быть точным). Но я считаю, что очень скоро она будет поддерживаться и в других браузерах.