This content originally appeared on Bram.us and was authored by Bramus!
~
A feature shipping in Chrome 133 – which goes stable on Feb 4 – is a more powerful attr(). From Chrome 133 onwards you use attr() with any CSS property — not just content – and it can parse values into data types other than <string>.
~
Here is an example that parses the data-clr atrribute into a <color>.
<style>
div {
color: attr(data-clr type(<color>), red);
}
</style>
<div data-clr="blue">My text color is blue</div>
<div>My text color is red (the fallback value)</div>~
Here is a more advanced example that parses an attribute into a <custom-ident>. Handy for View Transitions when you’ve already given the elements a unique id. in the markup: simply take that id and use that as the view-transition-name.
<style>
.card[id] {
view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
view-transition-class: card;
}
</style>
<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 class="card" id="card-4"></div>
</div>Here’s a live demo. Each .card elements get a view-transition-name derived from the id attribute.
~
Supporting the (upcoming) release of this more powerful `attr()` function I published a blog post on the Chrome for Developers blog and also updated MDN:
- https://developer.chrome.com/blog/advanced-attr →
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr →
~
🔥 Like what you see? Want to stay in the loop? Here's how:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-01-20T18:53:21+00:00) CSS attr() gets an upgrade. Retrieved from https://www.scien.cx/2025/01/20/css-attr-gets-an-upgrade/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.