🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Функция находится в статусе ограниченной доступности в Baseline.

Функция CSS attr() позволяет получать значение атрибутов HTML-элементов внутри CSS. Это удобно, если нужно динамично изменять стили в зависимости от атрибутов, например, показывать или скрывать элементы, менять цвета или размеры исходя из данных, заданных в HTML.

Пример: допустим, есть кнопка с атрибутом data-color. Можно через CSS установить цвет текста, исходя из этого атрибута:

button {
  color: attr(data-color);
}

Если у кнопки <button data-color="red">Нажми меня</button>, текст будет красным. Можно также задавать единицы измерения или работать с числовыми значениями, добавляя типы через attr(). Важно — эта функция хорошо работает для свойств, где допустимо использование атрибутов, например, content, width, background-image и др., и поддерживается не всеми браузерами.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.