CSS just got smarter!
Meet the upgraded attr() function.
Chrome 133 introduces a significant enhancement to the CSS attr(). It can now be used with any CSS property, including custom properties, not just content.
It also supports multiple data types like colors, lenghts, IDs, and more, instead of being limited to strings.
This unlocks tons of possibilities to make CSS more dynamic—without a single line of JavaScript!
Some cool examples:
- Dynamically change text color based on an HTML attribute.
- Simplify visual transitions effortlessly.
- Adapt styles based on metadata
⚠️ Currently, this feature is available ONLY in Chrome 133. So don’t use it in prod just yet!
The revamped attr() will make CSS even more powerful. I can’t wait to use it safely in my projects!
Example 1:
<div data-foo="blue">test</div>div {
color: attr(data-foo type(<color>), red);
}Example 2:
<div class="cards">
<div class="card" id="card-1"></div>
<div class="card" id="card-2"></div>
<div class="card" id="card-3"></div>
</div>.card {
/* card-1, card-2, card-3, etc. */
view-transition-name: attr(id type(<custom--ident>), none);
view-transition-class: card;
}Example 3:
<div data-size="10">test</div>div {
font-size: attr(data-size px);
}To learn more tips about CSS, make sure to join my newsletter below ❤️
