Использование CSS-функции attr() для более умной стилизации

CSS-функция attr() извлекает значения непосредственно из HTML-атрибутов в ваши стили — но теперь она больше не ограничивается только отображением текстового содержимого. Начиная с Chrome 133, attr() может теперь парсить типизированные значения и работать с любым CSS-свойством, открывая мощные новые паттерны стилизации с минимальным использованием JavaScript.

Традиционное использование attr(): ограниченное, но полезное

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

/* Классический attr() - отображение href как текста */
a:empty::before {
  content: attr(href);
}

Это традиционное использование остается ценным для отображения значений атрибутов в виде текста — например, всплывающие подсказки, показывающие URL-адреса или атрибуты данных в псевдоэлементах. Но на этом её полезность заканчивалась.

Революция современной функции attr()

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

Базовый синтаксис

attr(<attr-name> <attr-type>?, <fallback-value>?)

Функция принимает три параметра:

• attr-name: HTML-атрибут для чтения
• attr-type: способ парсинга значения (необязательный)
• fallback-value: значение по умолчанию, если атрибут отсутствует (необязательный)

Парсинг типов: за пределами строк

Истинная мощь современной CSS-функции attr() заключается в парсинге типов. Теперь вы можете преобразовывать значения атрибутов в правильные типы данных CSS:

Значения цветов

<div class="card" data-color="#3b82f6">Синяя карточка</div>

.card {
  background-color: attr(data-color type(<color>), gray);
}

Объявление type(<color>) сообщает браузеру, что нужно парсить атрибут как значение цвета. Если атрибут отсутствует или недействителен, используется резервное значение gray.

Числовые значения с единицами измерения

<p data-size="18">Настраиваемый текст</p>

p {
  font-size: attr(data-size px, 16px);
}

Здесь CSS-функция attr() добавляет px к числовому значению. Вы также можете использовать другие единицы измерения, такие как rem, em или %.

Пользовательские идентификаторы

Одно из самых мощных применений использует <custom-ident> для динамических значений CSS-свойств:

<div class="card" id="card-1">Первая карточка</div>
<div class="card" id="card-2">Вторая карточка</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none);
}

Это автоматически назначает уникальные значения view-transition-name на основе ID элементов — идеально для переходов представлений без повторяющегося CSS.

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

Современная CSS-функция attr() поддерживает множество типов данных:

• <string> (по умолчанию)
• <color>
• <number>
• <length>
• <percentage>
• <angle>
• <time>
• <custom-ident>
• <integer>
• <transform-function>

Примечание: По соображениям безопасности значения <url> не поддерживаются, за исключением строк в свойстве content.

Реальные применения

Динамическая тематизация

<section data-theme-color="#1e293b" data-theme-spacing="2">
  <h2>Тематический раздел</h2>
</section>

section {
  background-color: attr(data-theme-color type(<color>), white);
  padding: attr(data-theme-spacing rem, 1rem);
}

Адаптивные сеточные макеты

<div class="grid" data-columns="3">
  <!-- Элементы сетки -->
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(attr(data-columns type(<integer>), 1), 1fr);
}

Поддержка браузерами и определение функций

Возможности современной CSS-функции attr() в настоящее время являются экспериментальными, с полной поддержкой только в Chrome 133+ и других браузерах на основе Chromium. Всегда используйте определение поддержки функций:

@supports (width: attr(x type(*))) {
  /* Современная attr() поддерживается */
  .element {
    color: attr(data-color type(<color>), black);
  }
}

@supports not (width: attr(x type(*))) {
  /* Резервные стили */
  .element {
    color: black;
  }
}

Для определения в JavaScript:

if (CSS.supports("width", "attr(x type(*))")) {
  // Современная attr() доступна
}

Лучшие практики

1. Всегда предоставляйте резервные значения: второй параметр обеспечивает работу ваших стилей даже при отсутствии атрибутов
2. Используйте семантические имена атрибутов: data-font-size понятнее, чем data-fs
3. Учитывайте производительность: несмотря на мощность, чрезмерное использование attr() может повлиять на производительность рендеринга
4. Валидируйте значения атрибутов: убедитесь, что ваши HTML-атрибуты содержат действительные CSS-значения для ожидаемого типа

Распространенные подводные камни

Остерегайтесь этих проблем при использовании CSS-функции attr():

• Несоответствие единиц измерения: font-size: attr(data-size) не работает без единиц измерения
• Неверный парсинг типов: убедитесь, что значения атрибутов соответствуют объявленному типу
• Особенности наследования: значения attr() вычисляются на элементе, где они используются, а не там, где они определены

Заключение

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

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..