The CSS attr() Function Just Got Superpowers – Here's How to Use It

For over a decade, the attr() function in CSS has existed... but barely. Previously limited to only content manipulation in ::before and ::after pseudo-elements, it was practically useless for most real-world applications.

But that has finally changed.

In a recent update, the humble attr() function has transformed into one of the most exciting and powerful features in CSS today. It now allows dynamic styling using HTML attributes directly within your CSS—without JavaScript.

Let’s dive into how it works and why this is such a big deal.

What is the attr() Function?

At its core, attr() allows you to pull the value of an attribute from an HTML element and use it in your CSS.

You can use any attribute — standard or custom (like data-* attributes)—and plug its value directly into your styles.

Example:

<div class="box" data-color="red"></div>

.box {
  background-color: attr(data-color color, red);
}

In the example above:

• data-color is the attribute we want to read.
• color is the expected type of value.
• red is a fallback in case the attribute is missing.

Without specifying the type (color in this case), CSS treats the value as a raw string—which doesn’t work for properties like background-color that expect a typed value.

Why Was attr() Useless Before?

Previously, you could only use attr() in a very specific context:

.element::before {
  content: attr(title);
}

That was it. You couldn’t change colors, widths, animation names, or anything outside of content rendering.

Now, you can use it anywhere, for any property, and even assign types and fallbacks.

Dynamic Styling Without JavaScript

Let’s say you want to control an element’s width with a custom attribute:

<div class="box" data-width="50%"></div>

.box {
  width: attr(data-width length, 100px);
}

CSS reads the data-width attribute, and if it exists, uses its value as a length. If not, it falls back to 100px.

Supported units? Anything from px, rem, %, vw, vh, and beyond.

Using attr() for Animation Names

This is where things get interesting.

<div class="pulse-box" data-animation="pulse"></div>

.pulse-box {
  animation: attr(data-animation custom-ident, none) 1s infinite;
}

When using names (like animation or grid area names), be sure to specify the custom-ident type, which tells CSS that this string is a valid identifier, not just a plain string.

Conditionals with attr() and CSS @if

When combined with the new CSS @if feature (via Style Queries or container queries), you can create condition-based styling using attribute values.

Example:

.box {
  background-color: if(attr(data-state) == loading, green,
                        if(attr(data-state) == error, red, blue));
}

Now, your box will be:

• Green when data-state="loading"
• Red when data-state="error"
• Blue otherwise

This is like conditional logic — without any JavaScript.

Best Practices

• Always define a type (like color, length, or custom-ident) to ensure compatibility.
• Use fallback values to avoid runtime issues.
• Use data-* attributes for clear separation of logic and style.
• When dealing with names (like animations), prefer custom-ident.

Final Thoughts

This updated attr() function is a massive win for web developers. It bridges the gap between HTML and CSS in a dynamic, declarative way—without the need for JS frameworks or DOM manipulation.

Whether you’re building design systems, dashboards, or animation-heavy apps, attr() gives you a powerful tool for styling based on context.

I’ve been waiting years for this update — and it’s finally here.

Reference Links

• MDN Docs — Documentations related to attr() in css

Find me on your favorite platform

• Github — Follow me on GitHub for further useful code snippets and open source repos.
• LinkedIn Profile — Connect with me on LinkedIn for further discussions and updates.
• Twitter (X) — Connect with me on Twitter (X) for useless tech tweets.
• Instagram — Connect with me on Twitter (X) for useless tech tweets.