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

Bramus

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

Переработанная функция attr()

С помощью 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 .