# CSS Gets Dynamic with the New attr() Function

URL: https://theosoti.com/short/evolved-attr-function/
Published: 2025-03-03
Author: Theo Soti

> Explore the enhanced CSS attr() function in Chrome 133—now supporting all properties and data types for more dynamic, JS-free styling possibilities.

## 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:

```html
<div data-foo="blue">test</div>
```

```css
div {
  color: attr(data-foo type(<color>), red);
}
```

Example 2:

```html
<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>
```

```css
.card {
  /* card-1, card-2, card-3, etc. */
  view-transition-name: attr(id type(<custom--ident>), none);
  view-transition-class: card;
}
```

Example 3:

```html
<div data-size="10">test</div>
```

```css
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!