attr()
Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental.
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.attr.declaration-value | 133 | 133 | 119 | 18.4 | 133 | 18.4 |
| CSS type | ||||||
type function Experimental `type(<syntax>)` function | 133 | 133 | 149 | | 133 | |
type function.angle Experimental The CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in gradients and in some transform functions. | 133 | 133 | 149 | | 133 | |
type function.color Experimental The CSS data type represents a color. A may also include an alpha-channel transparency value, indicating how the color should composite with its background. | 133 | 133 | 149 | | 133 | |
type function.custom-ident Experimental The CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity. | 133 | 133 | 149 | | 133 | |
type function.ident Experimental The CSS data type denotes an arbitrary string used as an identifier. | 133 | 133 | 149 | | 133 | |
type function.image Experimental The CSS data type represents a two-dimensional image. | 133 | 133 | 149 | | 133 | |
type function.integer Experimental The CSS data type is a special type of number that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the column-count, counter-increment, grid-column, grid-row, and z-index properties and the @counter-style/range descriptor. | 133 | 133 | 149 | | 133 | |
type function.length Experimental The CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow. | 133 | 133 | 149 | | 133 | |
type function.length-percentage Experimental The CSS data type represents a value that can be either a length or a percentage. | 133 | 133 | 149 | | 133 | |
type function.number Experimental The CSS data type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation. | 133 | 133 | 149 | | 133 | |
type function.percentage Experimental The CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size. | 133 | 133 | 149 | | 133 | |
type function.resolution Experimental The CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. | 133 | 133 | 149 | | 133 | |
type function.string Experimental The CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes. | 133 | 133 | 149 | | 133 | |
type function.time Experimental The CSS data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties. | 133 | 133 | 149 | | 133 | |
type function.transform-function Experimental The CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property. | 133 | 133 | 149 | | 133 | |
type function.url Experimental The CSS data type is a pointer to a resource. | | | | | | |
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
- Requires an experimental browser flag to be enabled
Syntax
.bar {
width: attr(data-width length, 100px);
background: attr(data-color color, gray);
}Live demo
Use cases
-
Use attr()
Use attr() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply attr() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test attr() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using attr() does not make content harder to perceive, understand, or operate in assistive contexts.