attr()
The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
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.
Related links
Powered by web-features