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

После предыдущего поста про современный CSS, я вспомнил, что несколько месяцев назад применил CSS-функцию attr() в реализации JsonViewer с виртуальной прокруткой.

attr() позволяет взять значение любого HTML-атрибута и использовать его в стилях. Долгое время attr можно было применять только для свойства content. Сейчас же attr() можно применять для любых свойств, но поддержка пока всего ~67% браузеров.

Чтобы реализовать дерево с виртуальной прокруткой нужно избавиться от вложенности дочерних узлов и отображать всё простым списком. А чтобы JsonViewer выглядел деревом — нужно добавить отступы в зависимости от вложенности свойства nesting-level * padding.

💡 И тут можно применить attr:

 
.json-viewer__node {
  padding-left: calc(attr(data-level type(<number>)) * 20px);
}

 
function Node({ level }) {
  return (
    <div className="json-viewer__node" data-level={level}>
      {/* ... */}
    </div>
  );
}

👉 Тут мы указали, что для свойства padding-left хотим использовать значение атрибута data-level. При этом уточнили, что это не просто строка, а число type(<number>), чтобы CSS мог правильно умножить его на 20px и посчитать итоговый отступ.

Конечно, отступы можно задать и просто через JSX, но мне в любом случае был нужен data-level атрибут, чтобы стилизовать узлы в зависимости от их уровня.

📎 Ещё один пример применения функции attr() нашел в доке. Тут мы отображаем ссылки в печатной версии страницы с помощью псевдоэлемента ::after.

 
<p> Подробнее о скидках и акциях можно узнать <a href="http://best-site.ru/sales">по ссылке</a> </p>

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

@cherkashindev #css