attr()Limited availability

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.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–132Not supported

133+Supportedsince Feb 4, 2025

Current: 155

Edge

12–132Not supported

133+Supportedsince Feb 6, 2025

Current: 154

Firefox

1–154Not supported

155+Supportedsince Sep 1, 2026

Current: 157

Safari

✕Not supportedup to 27

Current: 27

MobileChrome Android

18–132Not supported

133+Supportedsince Feb 4, 2025

Current: 155

Firefox Android

4–154Not supported

155+Supportedsince Sep 1, 2026

Current: 157

Safari iOS

✕Not supportedup to 27

Current: 27

How to use

Not supported in Safari, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: attr#type.

Feature detection

CSS · check before using

@supports (width: attr(data-size type(<length>))) {
  /* styles that use declaration-value */
}

/* or in JavaScript */
if (CSS.supports("width", "attr(data-size type(<length>))")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#attr-notation ↗

Usage share

caniuse.com/css3-attr ↗

Sub-features

Support for each part of the feature (16). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
<attr>.declaration-value	133	133	119	18.4	133	119	18.4
<attr>.fallback	133	133	119	18.4	133	119	18.4
<attr>.type_function	133	133	155	✕	133	155	✕
<attr>.type_function.angle	133	133	155	✕	133	155	✕
<attr>.type_function.color	133	133	155	✕	133	155	✕
<attr>.type_function.custom-ident	133	133	155	✕	133	155	✕
<attr>.type_function.ident	133	133	155	✕	133	155	✕
<attr>.type_function.image	133	133	155	✕	133	155	✕
<attr>.type_function.integer	133	133	155	✕	133	155	✕
<attr>.type_function.length	133	133	155	✕	133	155	✕
<attr>.type_function.length-percentage	133	133	155	✕	133	155	✕
<attr>.type_function.number	133	133	155	✕	133	155	✕
<attr>.type_function.percentage	133	133	155	✕	133	155	✕
<attr>.type_function.resolution	133	133	155	✕	133	155	✕
<attr>.type_function.string	133	133	155	✕	133	155	✕
<attr>.type_function.time	133	133	155	✕	133	155	✕