attr()

Хотите сделать атрибут элемента видимым на странице? Используйте эту функцию!

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <div class="element" title="На самом деле внутри нет никакого текста"></div>
          <div class="element" title="На самом деле внутри нет никакого текста"></div>

        
        
          
        
      
        
          
          div::before {  content: "Элемент с классом " attr(class);}div::after {  content: "Подсказка: " attr(title);}
          div::before {
  content: "Элемент с классом " attr(class);
}

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

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"
        
          
          div::before {  content: attr(data-title);  content: attr(href);}
          div::before {
  content: attr(data-title);
  content: attr(href);
}

        
        
          
        
      

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

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

        
        
          
        
      

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

        
          
          div::before {  content: attr(data-count number, 0);  content: attr(src url, "");  content: attr(data-width px, inherit);  content: attr(data-something, "default");}
          div::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);}
          .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>
          <p>
  Подробнее о скидках и акциях можно узнать
  <a href="http://best-site.ru/sales">по ссылке</a>
</p>

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

        
        
          
        
      
Открыть демо в новой вкладке