13 · Typed attr()

Typed attr()

One HTML attribute feeds CSS, no dedicated classes

Chrome 135+ · experimental

← Index

Typed attr()

The new typed attr() can read an attribute as color, number or dimension and use it in CSS.

background: attr(data-color color)

No dedicated classes

The color comes from the HTML attribute, not a CSS class per color. One selector, N colors.

attr(data-color type(<color>))

Supported types

<color>, <number>, <length>, <integer> — the browser validates and casts on its own.

html

<!-- el color lo aporta el atributo, no una clase -->
<div class="attr-box" data-color="#f59e0b" data-label="amber"></div>
<div class="attr-box" data-color="#ef4444" data-label="red"></div>
<div class="attr-box" data-color="#10b981" data-label="green"></div>

css

.attr-box {
  /* lee el atributo como <color> y lo usa de fondo */
  background: attr(data-color type(<color>));
}

.attr-box::after {
  /* lee el atributo como string */
  content: attr(data-label);
  text-transform: uppercase;
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".