Как работает CSS-функция attr()
Development | Комментировать запись
attr() — это функция CSS, которая возвращает значение свойства. Таким образом, вы можете определить контент в своей html-разметке, используя любое пользовательское свойство, а затем извлечь это значение в таблицу стилей через attr(). В основном данная функция работает со свойством content, а поддержка других свойств в настоящее время находится на экспериментальной стадии.
Давайте посмотрим на следующий пример. Во-первых, у нас есть HTML-разметка:
<span data-tooltip="Cascading Style Sheets">CSS</span>
Во-вторых, CSS:
[data-tooltip]::before { content: attr(data-tooltip); }
С помощью данной функции вы можете создавать пользовательские всплывающие подсказки на чистом CSS.
Читайте также: Градиент и изображения-границы на чистом CSS
Функция attr и браузерная поддержка
Со свойством content функция attr() работает во всех браузерах. Что касается остальных свойств, рекомендуем проверять актуальную информацию о поддержке.
Найти необходимые сведения о поддержке функции css3-attr основными браузерами можно на сайте caniuse.
Tags: CSS