attr()

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.

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

        
          
          <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) "]";
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать