<divelopers>: “Функция attr() В CSS давно существует функция attr(). Настолько давно,…”

Функция attr()

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

<style>
  a::after {
    content: ' (ссылка: ' attr(href) ')';
  }
</style>

<p>Подробнее про функцию <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr">attr()</a> на MDN.</p>

<!-- 
Будет отрисовано:

Подробнее про функцию attr() (ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/attr) на MDN.
-->

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

В Chrome 133 завозят обновления функции attr(), расширяя её возможности до уровня, описанного в спецификации и на MDN. Теперь её можно использовать во всех CSS-свойствах, указывать тип данных, единицу измерения и резервное значение.

Тип данных указывается после имени атрибута через type(). Это нужно, чтобы CSS правильно обработал строковое значение из атрибута и конвертировал его в нужный тип.

<style>
  div {
    color: attr(data-color type(<color>));
  }
</style>

<div data-color="red"></div>

Поддерживаемые типы:

- <angle>: угол (90deg или 0.25turn)
- <color>: цвет (red, rgb(255 0 0), #ff0000, oklch(62.8% 0.2577 29.24), и т.д.)
- <custom-ident>: пользовательский идентификатор (используется для именованных анимаций View Transition или именованных якорей в Anchor Positioning)
- <integer>: целое число (5, 100)
- <length>: число + единица измерения (10px, 5rem, 40vw)
- <length-percentage>: как <length>, но ешё может быть в процентах
- <number>: число с опциональной плавающей точкой (5, 1.5, .25)
- <percentage>: процент (25%)
- <resolution>: разрешение (96dpi)
- <time>: время (3s или 3000ms)
- <transform-function>: функция трансформации (rotate(180deg))

Вместо типа значения можно указать одну из единиц измерения. На основе этого браузер определит нужный тип.

<style>
  div {
    width: attr(data-size px); /* 50px */
    height: attr(data-size px); /* 50px */
  }
</style>

<div data-size="50"></div>

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

<style>
  div {
    width: attr(data-size px, 50px);
    height: attr(data-size px, 50px);
  }
</style>

<div data-size="big"></div>

Эти нововведения позволят передавать значения из HTML напрямую в CSS. Это возможно и сейчас с Custom Properties, но с attr() выглядит удобнее.

<p id="p1" style="--font-size: 2rem;"></p>
<p id="p2" data-font-size="2"></p>

<style>
  #p1 {
    font-size: var(--font-size, 1rem);
  }

  #p2 {
    font-size: attr(data-font-size rem, 1rem);
  }
</style>

<script>
  const newFontSize = 1.5;

  p1.style.setProperty('--font-size', `${newFontSize}rem`);
  p2.dataset.fontSize = newFontSize;
</script>

Я думаю сообществу ещё предстоит открыть кейсы, где это можно применить. Но я уже вижу в этом пользу для контента, который настраивается через CMS. Можно будет записывать настройки из CMS в атрибуты и подтягивать через attr() вместо style с пользовательскими свойствами.

Больше подробностей и примеров в статье Уны Кравец и в блоге Chrome for Developers. Другие браузеры положительно смотрят на это нововведение и, вполне возможно, что тоже займутся его внедрением.

#html #css