13 · Typed attr()

Typed attr()

Un atributo HTML alimenta el CSS, sin clases dedicadas

Chrome 135+ · experimental

← Índice

attr() con tipo

El nuevo attr() tipado puede leer un atributo como color, número o dimensión y usarlo en CSS.

background: attr(data-color color)

Sin clases dedicadas

El color lo aporta el atributo HTML, no una clase CSS por cada uno. Un solo selector, N colores.

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

Tipos soportados

<color>, <number>, <length>, <integer> — el navegador valida y castea solo.

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;
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.