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);
}The newer attr() usage is useful when values can come from semantic attributes, reducing duplicated constants in CSS. It is most effective when attribute data is stable and validated.
This pattern has the best payoff when documented with one clear usage rule. Consistent adoption turns small CSS features into reliable system behavior.
A practical way to adopt attr() is to scope it to one high-impact component first. Then reuse that same pattern in similar contexts so behavior stays consistent and review time stays low.
Before final rollout, validate attr() against real content and real interaction states, not only demo text.
Keep fallback values explicit when reading attributes in CSS so missing data never produces unreadable or broken UI output.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!