skip to main content

attr()

css

Кратко 🔗

attr() — это CSS-функция, которая умеет получать значение любого атрибута у элемента, а потом использовать это значение прямо в стилях.

Пример 🔗

<div class="element" title="На самом деле внутри нет никакого текста"></div>
.element::before {
content: "Элемент с классом " attr(class);
}

.element::after {
content: "Подсказка: " attr(title);
}

See the Pen attr() 2 by Denis Ezhkov (@ezhkov) on CodePen.

Как пишется 🔗

.element::before {
content: attr(data-title);
content: attr(href);
}

С указанием типа:

.element::before {
content: attr(src url);
content: attr(data-count number);
content: attr(data-width px);
}

С указанием фолбэка, то есть запасного значения:

.element::before {
content: attr(data-count number, 0);
content: attr(src url, "");
content: attr(data-width px, inherit);
content: attr(data-something, "default");
}

Подсказки 🔗

💡 Функцию attr() можно использовать в качестве значения любого CSS-свойства, однако полностью поддерживается только свойство content. Для остальных свойств поддержка экспериментальная и может отличаться от браузера к браузеру. Актуальную информацию о поддержке можно посмотреть на Can I Use.

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

.colored {
background-image: attr(data-src url);
}

Тут мы указали, что в качестве значения для свойства background-image мы хотим использовать значение атрибута data-src. При этом уточнили, что значение атрибута data-src — это не просто строка, а корректный URL.

Примеры записи с указанием типа или фолбэка кажутся довольно перспективными, но, к сожалению, пока не поддерживаются ни одним из браузеров.

В работе 🔗

Самый распространённый случай использования функции attr() - отображение значения атрибута href после текста ссылки при печати страницы на принтере.

<p>
Подробнее о скидках и акциях можно узнать
<a href="http://best-site.ru/sales">по ссылке</a>
</p>
@media print {
a::after {
content: " [" attr(href) "]";
}
}

See the Pen attr() by Denis Ezhkov (@ezhkov) on CodePen.

Автор: Денис,