demo · v133

Typed attr()

Old attr() only worked for content and only returned a string. New attr(name type(<length>), fallback) threads typed values right into any property — no --var hop, no JS.

160px
100px
#cfe1f5
live element
box
The styles above are driven by a CSS rule using the new attr(data-w type(<length>), 120px) syntax. Browsers without Chrome 133+ support will fall back to the second argument and render a 120×80 stone box.

checking support…

the CSS

.box {
  width:      attr(data-w type(<length>), 120px);
  height:     attr(data-h type(<length>), 80px);
  background: attr(data-c type(<color>),  whitesmoke);
}

see also