The new CSS attr() syntax

So, this is something I've been wanting in CSS for years. While the attr() function has been around since the old CSS 2.0 days, its use cases were limited.

Essentially, the only way you could use the attr() function was to grab strings and use them with the :before and :after content property. For example:

<p data-title="This text belongs before">
  Lorem ipsum
</p>
<style>
  p:before {
    content: attr(data-title);
    display: block;
  }
</style>

Preview

That's awesome (he said with hesitence), but I can only think of a handful of uses for this. And many of them are covered by other CSS technologies.

But what would be really useful would be to do something like this...

<p data-color="#ef0efa">
  Make this font PINK
</p>
<style>
  p {
    color: attr(data-color);
  }
</style>

Preview

It doesn't work! What gives? Well, the attr() function is only able to parse strings. That means you can't use colors, unit values, etc.

Well, that's how it used to work.

The New Syntax

There's a new syntax coming down the pipeline. Support is spotty and, as of the time of writing, no browser supports all the features of the spec. For example, many of the demos from here on out would not work on Firefox or Safari if I hadn't fixed them to appear correct. We'll get to that in a bit.

But check this out:

<p data-color="#ef0efa">
  Make this font PINK
</p>
<style>
  p {
    color: attr(data-color type(<color>));
  }
</style>

Preview

Yep. We can use the type() function and pass it the <color> argument and this will parse the attribute as that type. This is really neat but it's not just colors! Units like px, em, ch and others can passed without the type() function and they'll be parsed. You can also use the result of the attr() call in a calc()!

Math with calc()

<p number="200" 
  style="color: white; background: gray"
>
  Let's make a wide boy
</p>
<style>
  p {
    width: calc(
      attr(number type(<number>)) * 1.5px
    );
  }
</style>

Preview

Specify A Fallback

Consider this:

<p size="invalid number">
  Something's wrong...
</p>
<style>
  p {
    width: attr(size em, 4em);
  }
</style>

The attr function cannot parse the size attribute into a valid em value and it falls back to the third value "4em". This means that the width of this p block will become the callback value.

An Advanced Use Case

In the next example, I'm going to combine the new attr() syntax with CSS custom attributes to define the height of the children div.squares on the parent container. We're also using the bg and fg properties on each div to set the background and color properties for each .square.

<div class="container" 
  size="3" gap="10"
>
  <div class="square" bg="white" fg="black">1</div>
  <div class="square" bg="#f00" fg="#fff">2</div>
  <div class="square" bg="#0f0" fg="#000">3</div>
</div>
<style>
  .container {
    --size: attr(size em, 2em);
    display: flex;
    gap: attr(gap px, 10px);
    .square {
      display: grid;
      place-items: center;
      background: attr(bg type(<color>), white);
      color: attr(fg type(<color>), black);
      width: var(--size);
      height: var(--size);
    }
  }
</style>

Preview

What Else?

You can use custom attributes in order to offset animations from each other. Using positive offsets will start an animation after n time has elapsed while a negative offset will start the animation n time into the animation.

<div class="container">
  <div class="square" delay="-1s">1</div>
  <div class="square" delay="-2s">2</div>
  <div class="square" delay="-3s">3</div>
  <div class="square" delay="-4s">4</div>
</div>
<style>
  .square {
    display: grid;
    place-items: center;
    animation-name: squareAnimation;
    animation-iteration-count: loop;
    animation-delay: attr(delay type(<time>), 0);
  }
</style>

Multiple Types

You can use the | operator to unify types. Something like this: attr(size type(<length> | <percentage>), 50%).

And There's More

You can use something like this:

[vbox],[hbox] {
  display: flex;
}
[vbox] {
  height: attr(vbox type(<length>), fit-content);
  flex-direction: column;
}
[hbox] {
  width: attr(hbox type(<length>), fit-content);
  flex-direction: row;
}

This would essentially allow you to add hbox or vbox attributes to any element and then add use a length value like em, px, etc. It's pretty great. It's possible that you could build a flexible framework for styling. (The above is probably not the greatest idea, but it's a proof of concept!)

Limitations

You can't parse URLs. For example, this won't work:

<div class="background-splash"
  background="https://blog.gardinerbryant.com/content/image.webp"
></div>
<style>
  .background-splash {
    background-image: url(attr(background type(<url>));
    height: 300px;
    width: 300px;
  }
</style>

Browser Support

Now, the sticky wicket and bane of webdevs everywhere: browser support. Things have gotten much better on this front recently. It seems like standards are being issued and support is being rolled out at a much more brisk pace as of late.

Even Safari, whom I've heard other devs refer to as the "modern day Internet Explorer" has been updating with more regularity (even if it's slow).

But let's say you want to implement the new attr() syntax but you want a graceful fallback for Firefox and Safari. How would you go about doing that?

@supports not (x: attr(x type(*))) {
  /* ...implement your solution here */
}

You can also exclude the not to target browsers that do support the new syntax.

In fact, the above @supports line is how I've been able to make the more complex demos above appear to work in Firefox and Safari!

Conclusion

All-in-all, this is another truly exciting development for CSS and I can't wait to see what further developments are coming down the pipeline!