✨ Функция 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()) * 20px); }

`function Node({ level }) { return (

{/* ... */}

); }

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

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

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

`Подробнее о скидках и акциях можно узнать по ссылке

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

@cherkashindev #css

В этом посте были ссылки, но мы их удалили по правилам Сетки````