🌈 CSS Update revolutioniert CSS: Die neue attr()-Funktion

Mit der neuen attr()-Funktion kannst du Werte aus HTML-Attributen direkt in CSS-Eigenschaften einsetzen – z. B. für Farben, Grössen oder Texte.

Früher war attr() nur für den Inhalt (content) nutzbar – jetzt funktioniert sie auch in visuellen CSS-Eigenschaften wie background-color, width, font-size usw.

Damit kannst du z.B. ein Attribut wie data-color direkt als Wert für background-color verwenden – mit Typprüfung und Fallback.

Beispiel: background-color mit attr()

.my-box {
  /* Holt den Wert aus data-color, erwartet einen Farbwert, fallback ist rot */
  background-color: attr(data-color color, red);
}

<div class="my-box" data-color="#00ccff">Hallo!</div>
<div class="my-box">Fallback ist rot</div>

• Die erste Box bekommt die Hintergrundfarbe aus dem Attribut data-color.
• Die zweite Box hat kein data-color → Fallback ist red.

Erklärung der Syntax

background-color: attr(data-color color, red);

• data-color: Name des HTML-Attributs
• color: Typprüfung, erwartet einen CSS-Farbwert
• red: Fallback, falls das Attribut fehlt oder ungültig ist

Hinweise

• Browser-Support:
  Funktioniert in aktuellen Chromium-Browsern (Chrome, Edge, Opera), noch nicht in Firefox und Safari (Stand Juli 2025). Weitere Details und aktuelle Informationen betreffend Browser-Support findest du auf caniuse.com.
• Typen:
  Unterstützt werden z.B. color, length, number, url, integer, angle, percentage, ident, string

Fazit

Mit attr(data-color color, red) kannst du dynamisch Werte aus HTML-Attributen für CSS-Eigenschaften wie background-color verwenden – inklusive Typprüfung und Fallback!
Das ist ein grosser Schritt zu dynamischerem, deklarativem CSS.