🤔 Do you know how to use attr() in CSS?

1. Introduction

The attr() function in CSS allows you to retrieve the value of an HTML attribute and use it within style sheets. It is particularly useful for inserting dynamic content generated from element attributes, without having to resort to JavaScript.

A simple example:

a::after {
  content: " (" attr(href) ")";
}

In this case, each link will display its URL in parentheses, taken directly from the href attribute.

2. Syntax

The general syntax is:

attr(<attribute_name> <type>? , <default_value>?)

<attribute_name>: The name of the HTML attribute from which to retrieve the value.
<type> (optional, in CSS level 4 only): Specifies how to interpret the value (string, number, color, length, etc.).
<default_value> (optional, in CSS level 4 only): The value to use if the attribute is not present or empty.

Example with advanced syntax:

HTML:

<div data-width="200px">Hello attr() width 200px!</div>

CSS:

div { 
  width: attr(data-width type(<length>), 100px);
}

Here we try to use data-width as the length value, with fallback to 100px if the attribute is missing.

3. Support Levels

CSS Level 2 / 3

attr() is supported only in the content property.

Working example:

p::before {
  content: attr(title);
}

CSS Values and Units Level 4

Specifies that attr() can be used in any CSS property, with fallback types and values.
Current status: This extension of syntax is still poorly supported by browsers. Currently, only some experimental builds allow using attr() outside of content.

How to check syntax extension support attr()

@supports (x: attr(x type(*))) { 
  /* Browser has modern attr() support */ 
  body { 
    background-color: lightgreen; 
  }
}

@supports not (x: attr(x type(*))) { 
  /* Browser does not have modern attr() support */ 
  body { 
    background-color: gray; 
  }
}

4. Supported Data Types (CSS4)

The second optional parameter (<type>) can be:

string (default) – the value is treated as text.
color – the value is interpreted as a color.re CSS.
url – the value is treated as a URL.
integer – integer.
number – decimal number.
length, angle, time, frequency – physical or temporal units.

Example with color:

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

5. Practical use cases

5.1 Adding extra information from attributes

abbr::after { 
  content: "(" attr(title) ")";
}

5.2 Show URLs in printed links

@media print { 
  a::after { 
    content: " [" attr(href) "]"; 
  }
}

5.3 Using custom data (CSS4, experimental)

.card { 
  width: attr(data-width length, 300px);
}

6. Limitations

Limited support outside content: In current practice, attr() can be used only within content.
Not dynamic like JavaScript: Values update only if the DOM or attributes change and the browser recalculates the style.
Types and fallbacks: The extended syntax (attr(attrName type, fallback)) is still being adopted.

7. Browser support (2025)

Features	Chrome	Firefox	Safari	Edge	Work
`attr()` in `content`	✔	✔	✔	✔	✔
`attr()` in other properties (CSS4)	✔	✖*	✖*	✔	✖*

*Only available with experimental flags in some browsers.

Conclusion

The attr() function is a powerful tool for inserting data from HTML attributes directly into CSS, reducing the need for scripting. Today, it's mostly used in combination with content, but the CSS4 specification promises to significantly expand its use, making it a true alternative to certain JavaScript manipulations. For advanced use, progress in browser support will need to be monitored.

Techelopment

Cerca nel blog