CSS attr() получает обновление

Bramus

Опубликовано: 15 января 2025 г.

С помощью CSS-функции ` attr() вы можете использовать значение HTML-атрибута в своих CSS-стилях. До сих пор attr() работала только внутри свойства content псевдоэлементов и могла преобразовывать значения только в CSS-строку ` <string> `.

Переработанная функция attr() , доступная начиная с Chrome версии 133, открывает новые возможности. Теперь вы можете использовать attr() с любым свойством CSS, включая пользовательские свойства, и она может преобразовывать значения в типы данных, отличные от <string> .

Примеры

В следующем примере значение свойства color для div использует значение из атрибута data-color . Это значение атрибута преобразуется в <color> с помощью attr() и type() . В качестве резервного значения устанавливается значение red .

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

В следующем примере свойство view-transition-name определяется атрибутом id элемента. Атрибут преобразуется в <custom-ident> , который является необходимым типом для view-transition-name . Без attr() вам приходилось объявлять view-transition-name для каждой карточки отдельно, тогда как теперь это можно сделать за один раз.

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
  view-transition-class: card;
}

Вы также можете преобразовать значения в длину, задав тип любому идентификатору, соответствующему единице измерения CSS или символу % . В следующем примере атрибут data-size преобразуется в значение в пикселях.

<div data-size="10">test</div>

div {
  font-size: attr(data-size px);
}

При использовании функции attr() без указания типа атрибут преобразуется в строку CSS, что аналогично предыдущему поведению.

Узнать больше

Более подробную информацию о функции attr() можно найти в спецификации и на MDN .