Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу admin@tuhub.ru.

attr()

CSS attr()

Функция attr() (аббревиатура от «attribute»)  - это функция, которая возвращает значение переданного атрибута элемента в виде строки.

Общие сведения

Например, attr(X) возвращает значение атрибута X указанного в элементе. Если у элемента нет атрибута X, то вернётся пустая строка. Для примера, у ссылок <a> есть атрибут href, который определяет местоположение на которое указывает ссылка. С помощью свойства content и функции attr() вы можете получить значение URL указанное в атрибуте href, что довольно эффективно. Это можно использовать в стилях для печатной версии страницы, чтобы вывести URL-адрес страницы на которую указывает ссылка, сразу за её содержимым (с помощью псевдоэлемента ::after). Например:

@media print {
  a[href]::after {
    content: attr(href);
  }
}

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

Функция attr() может получать значения из любых атрибутов элемента, включая кастомные data-атрибуты из HTML5. Например:

<li data-label="todo">Купить молоко!</li>
li::before {
  content: attr(data-label);
}

Поддержка браузерами

attr() поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS.

Пример

Ниже показан пример использования функции attr():