Функция attr() (CSS)

7:49 10.03.2017
Функция создана, чтобы приобрести значение атрибута элемента HTML документа. В дальнейшем полученное значение можно использовать, например, для изменения цвета фона.

Пример использования функции:
/* CSS Style */
.link::after {
    content: ' (' attr(href) ') ';
}

<!-- HTML Linl -->
<a class="link" href="http://site.com/">Ссылка на сайт</a>

На экране, текст ссылки будет выглядеть так: Ссылка на сайт (http://site.com).

Синтаксис функции начиная с CSS 2.1 выглядит так: attr(атрибут).
С приходом CSS3, синтаксис функции немного изменился и стал выглядеть так: attr(1. атрибут, 2. тип, 3. значение).
  1. Атрибут - атрибут, который необходимо передать.
  2. Тип - это могут быть адреса, размеры объекта, цвета и так далее.
  3. Значение - будет применяться в случаи, если обозреватель не смог его получить.

В версии CSS 2.1, данная функция выполняется лишь совместно со свойством «content», в версии CSS 3, функция может работать с любым свойством.

Данную функцию понимают следующие обозреватели: IE 8 и выше, Chrome 2 и выше, Opera 9 и выше, Safari 3.1 и выше, Firefox 1 и выше, Android 2.1 и выше.