Функция attr()
В CSS давно существует функция attr(). Настолько давно, что она поддерживается в IE8. Её задумка в том, чтобы получать данные из атрибутов и применять их к свойствам в CSS. Если посмотреть синтаксис и параметры attr() на MDN, то это достаточно мощная функция. Нюанс в том, что браузеры поддерживают ограниченный набор возможностей. Сейчас функция работает только со строковыми значениями и только для свойства content.
a::after {
content: ' (ссылка: ' attr(href) ')';
}
Подробнее про функцию attr() на MDN.
Это ограничивает полезность attr() несколькими узкими кейсами. Один из таких — печатные стили. На бумаге нельзя нажать на ссылку и перейти на страницу, но можно вывести адрес, чтобы руками перепечатать а в поисковую строку.
В Chrome 133 завозят обновления функции attr(), расширяя её возможности до уровня, описанного в спецификации и на MDN. Теперь её можно использовать во всех CSS-свойствах, указывать тип данных, единицу измерения и резервное значение.
Тип данных указывается после имени атрибута через type(). Это нужно, чтобы CSS правильно обработал строковое значение из атрибута и конвертировал его в нужный тип.
div {
color: attr(data-color type());
}
Поддерживаемые типы:
- : угол (90deg или 0.25turn)
- : цвет (red, rgb(255 0 0), #ff0000, oklch(62.8% 0.2577 29.24), и т.д.)
- : пользовательский идентификатор (используется для именованых анимаций View Transition или именованных якорей в Anchor Positioning)
- : целое число (5, 100)
- : цисло + единица измерения (10px, 5rem, 40vw)
- : как , но ешё может быть в процентах
- : число с опциональной плавающей точкой (5, 1.5, .25)
- : процент (25%)
- : разрешение (96dpi)
- : время (3s или 3000ms)
- : функция трансформации (rotate(180deg))
Вместо типа значения можно указать одну из единиц измерения. На основе этого браузер определит нужный тип.
div {
width: attr(data-size px); /* 50px */
height: attr(data-size px); /* 50px */
}
Вторым параметром в attr() можно указать резервное значение. Оно будет использоваться, если атрибут не указан, указан с пустым значением или не удалось конвертировать тип.
div {
width: attr(data-size px, 50px);
height: attr(data-size px, 50px);
}
Эти нововведения позволят передавать значения из HTML напрямую в CSS. Это возможно и сейчас с Custom Properties, но с attr() выглядит удобнее.
#p1 {
font-size: var(--font-size, 1rem);
}
#p2 {
font-size: attr(data-font-size rem, 1rem);
}
const newfontSize = 1.5;
p1.style.setProperty('--font-size', `${newfontSize}rem`);
p2.dataset.fontSize = newfontSize;
Я думаю сообществу ещё предстоит открыть кейсы, где это можно применить. Но я уже вижу в этом пользу для контента, который настраивается через CMS. Можно будет записывать настройки из CMS в атрибуты и подтягивать через attr() вместо style с пользовательскими свойствами.
Больше подробностей и примеров можно узнать в статье Уны Кравец и в блоге Chrome for Developers. Другие браузеры положительно смотрят на это предложение и, вполне возможно, что тоже займутся внедрением.
#html #css
В CSS давно существует функция attr(). Настолько давно, что она поддерживается в IE8. Её задумка в том, чтобы получать данные из атрибутов и применять их к свойствам в CSS. Если посмотреть синтаксис и параметры attr() на MDN, то это достаточно мощная функция. Нюанс в том, что браузеры поддерживают ограниченный набор возможностей. Сейчас функция работает только со строковыми значениями и только для свойства content.
a::after {
content: ' (ссылка: ' attr(href) ')';
}
Подробнее про функцию attr() на MDN.
Это ограничивает полезность attr() несколькими узкими кейсами. Один из таких — печатные стили. На бумаге нельзя нажать на ссылку и перейти на страницу, но можно вывести адрес, чтобы руками перепечатать а в поисковую строку.
В Chrome 133 завозят обновления функции attr(), расширяя её возможности до уровня, описанного в спецификации и на MDN. Теперь её можно использовать во всех CSS-свойствах, указывать тип данных, единицу измерения и резервное значение.
Тип данных указывается после имени атрибута через type(). Это нужно, чтобы CSS правильно обработал строковое значение из атрибута и конвертировал его в нужный тип.
div {
color: attr(data-color type());
}
Поддерживаемые типы:
- : угол (90deg или 0.25turn)
- : цвет (red, rgb(255 0 0), #ff0000, oklch(62.8% 0.2577 29.24), и т.д.)
- : пользовательский идентификатор (используется для именованых анимаций View Transition или именованных якорей в Anchor Positioning)
- : целое число (5, 100)
- : цисло + единица измерения (10px, 5rem, 40vw)
- : как , но ешё может быть в процентах
- : число с опциональной плавающей точкой (5, 1.5, .25)
- : процент (25%)
- : разрешение (96dpi)
- : время (3s или 3000ms)
- : функция трансформации (rotate(180deg))
Вместо типа значения можно указать одну из единиц измерения. На основе этого браузер определит нужный тип.
div {
width: attr(data-size px); /* 50px */
height: attr(data-size px); /* 50px */
}
Вторым параметром в attr() можно указать резервное значение. Оно будет использоваться, если атрибут не указан, указан с пустым значением или не удалось конвертировать тип.
div {
width: attr(data-size px, 50px);
height: attr(data-size px, 50px);
}
Эти нововведения позволят передавать значения из HTML напрямую в CSS. Это возможно и сейчас с Custom Properties, но с attr() выглядит удобнее.
#p1 {
font-size: var(--font-size, 1rem);
}
#p2 {
font-size: attr(data-font-size rem, 1rem);
}
const newfontSize = 1.5;
p1.style.setProperty('--font-size', `${newfontSize}rem`);
p2.dataset.fontSize = newfontSize;
Я думаю сообществу ещё предстоит открыть кейсы, где это можно применить. Но я уже вижу в этом пользу для контента, который настраивается через CMS. Можно будет записывать настройки из CMS в атрибуты и подтягивать через attr() вместо style с пользовательскими свойствами.
Больше подробностей и примеров можно узнать в статье Уны Кравец и в блоге Chrome for Developers. Другие браузеры положительно смотрят на это предложение и, вполне возможно, что тоже займутся внедрением.
#html #css