CSS attr() gets an upgrade

~

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>.

~

Below is a simple example that parses the data-clr attribute 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>

It’s a basic example that should give you an idea of what the function does.

~

Here is a more on-point example that uses attr() to parse an attribute into a <custom-ident>. Handy for View Transitions when you’ve already given the elements a unique id in the markup: you simply take that id and use that as the value for 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>

For you as a web developer this means that instead of needing 100 declarations (and rules to match the elements) for 100 elements, you can dial that down to just 1. Easy peasy.

Try it out in the following embed:

~

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 →

~