Typed attr() (attr(data-x type(<length>)))

Chrome 133; Firefox 152 Nightly (Flag), Safari Technology Preview 249. Interop-2026-Fokusbereich. Nicht Baseline.

Chrome 133Edge 133Safari TPFirefox flag

`attr()` funktioniert jetzt in jeder Property und kann das Attribut als Typ parsen (`type(<length>)`, `type(<color>)`, `px`), sodass Markup-Daten wie `data-cols="3"` das Layout ohne Inline-Styles steuern.

123456

CSS

.fx-062 {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(attr(data-cols type(<integer>),2),1fr);
  font-family: system-ui
}
.fx-062 span {
  padding: 12px;
  text-align: center;
  border-radius: 6px;
  background: attr(data-accent type(<color>),#e5e7eb);
  color: #fff
}

HTML

<div class="fx-062" data-cols="3" data-accent="#ec4899"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>

Fallback: Das zweite Argument von attr() ist der Fallback-Wert für Browser ohne Unterstützung (sie behandeln das ganze attr() außerhalb von `content` als ungültig, also setze zusätzlich eine einfache Deklaration davor).

Quelle: github.com/web-platform-tests/interop/blob/main/2026/README.md and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152

Prompt

Speise Layoutwerte aus Data-Attributen mit typisiertem `attr()`: `repeat(attr(data-cols type(<integer>), 2), 1fr)`, `attr(data-accent type(<color>), gray)`. Gib immer das Fallback-Argument und eine vorangehende einfache Deklaration an, weil Stand 2026-09 nur Chromium es in Stable ausliefert.