The attr() function in CSS now supports types
The attr() function in CSS is a powerful function that allows you to use the value of an attribute of an HTML element as the value of a CSS property. This function is commonly used with the content property in pseudo-elements to display the value of an attribute on the page.
The attr() function has been around for a while and is widely used in CSS. However, it was limited to only accepting a single argument: the name of the attribute whose value you wanted to use.
On top of that, the value returned by the attr() function was always treated as a string and so, you could only use it in properties that accept string values. For instance, the content property mentioned previously.
The new syntax with types
With the latest CSS specification, the attr() function has been updated to support types. This means that you can now specify the type of the value that the attribute should be treated as.
We can now use the attr() function with a lot of properties as a result. And that makes it a lot more powerful than it was before. This opens up a whole new world of possibilities for the attr() function.
The syntax for the new attr() function looks like so.
attr(<attribute-name> type(<specific-type>))
How to use attr() with types
For instance, if we want to specify the width of an element based on the value of the data-width attribute, we can do so like this.
First, specify the data attribute on the element you want to customize.
<div data-width="100px"></div>
Then, in the CSS, we can use the attr() function with the type() function to specify that the value of the data-width attribute should be treated as a <length> type.
div {
width: attr(data-width type(<length>));
}
As you can tell, the <length> type represents a distance value and it works perfectly with the width property. This will set the width of the div element to 100px.
A practical example
Let’s say, we want to build a Chart-like UI where we want to customize the width of the div elements based on the value of the data-width attribute and the background color based on the value of the data-color attribute.
Here’s how you can do it.
<div class="box" data-width="200px" data-color="hotpink"></div>
<div class="box" data-width="300px" data-color="slateblue"></div>
<div class="box" data-width="400px" data-color="green"></div>
<div class="box" data-width="500px" data-color="slategray"></div>
<div class="box" data-width="600px" data-color="mediumvioletred"></div>
Here’s the CSS.
.box {
width: attr(data-width type(<length>));
background: attr(data-color type(<color>));
height: 80px;
}
.box::before {
content: attr(data-color);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
You can see it in action in this CodePen.
See the Pen attr() with types by Amit Merchant (@amit_merchant) on CodePen.
Notice, in this example, we are using only one common class box to customize the width of the div elements based on the value of the data-width attribute.
The background color has also been customized based on the value of the data-color attribute for all the <div>s. We are using the type(<color>) function to specify that the value of the data-color attribute should be treated as a <color> type.
In closing
You can learn more about all the types that you can use with attr() in this article by Una and other advanced examples of its new capabilities. This star rating example, for instance, is pretty cool!
See the Pen attr() star rating demo by Una Kravets (@una) on CodePen.
I think this is neat since you’ll be able to craft UIs with code as minimal as possible. You can customize every aspect of your UI without ever touching the CSS. This is essentially a “Write once, use everywhere” kind of thing and makes CSS reusable and maintainable.
The attr() function with types is only supported in the latest Chromium-based browsers (Chrome 133 and newer to be precise) at the moment. But I believe it will be supported in other browsers real soon. So, we gotta look forward to that!
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
