Как работает CSS-функция attr()

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:

Добавить комментарий