demo · v133

Type explorer

Drive a single card from four typed attributes — <color>, <length>, <angle>, <percentage>. Watch each attr(name type(<…>), fallback) resolve and fall back when the attribute is missing or invalid.

This browser does not support typed attr() on arbitrary properties. Chrome 133+ required for the live demo; the source snippets are still accurate.

data-bg — <color>

data-fg — <color>

data-pad — <length>

data-tilt — <angle>

data-w — <percentage>

break one attribute

I read my own styling out of HTML attributes via typed attr(). Try corrupting one above — the fallback kicks in for just that property.

—

the rule

.demo-card2 {
  background: attr(data-bg type(<color>), var(--bg-stone));
  color:      attr(data-fg type(<color>), var(--text-black));
  padding:    attr(data-pad type(<length>), 1rem);
  transform:  rotate(attr(data-tilt type(<angle>), 0deg));
  width:      attr(data-w type(<percentage>), 100%);
}

Each attr() call carries its own fallback — corrupt or remove one attribute and only that property reverts. Compare this with the pre-CSS-Values-5 world where attr() was string-only and could only feed content on pseudos.

the rule

see also