Variable aus CSS in HTML nutzen?

[Rolf B]

Hallo Schweriner,

diese "CSS Variablen" heißen korrekt custom properties und lassen sich ausschließlich in CSS mittels der var(--name) Notation nutzen.

Heißt: Werte von HTML Attributen kannst du damit nicht überschreiben. CSS Custom Properties lassen sich ausschließlich als Wert für CSS Eigenschaften nutzen.

Es gibt einige wenige HTML Attribute, die als Gegenstück eine CSS Eigenschaft haben. Dazu gehören ein paar SVG Attribute wie x, y, rx, oder ry - aber wie wir gesehen haben, ist das relativ neu und wird nicht von allen Browsern unterstützt. Der Name ist nicht unbedingt gleich. Die size-Eigenschaft von input type="text" wird z.B. von der CSS Eigenschaft width überschrieben. Rahmen und Zellabstand von Tabellen gibt's auch als CSS Eigenschaften. Frag mich jetzt aber nicht nach einer ausführlichen Mapping Tabelle...

Für Genauheimer: Es gibt ein, genau ein, HTML Attribut, in dem sich CSS Custom Properties einsetzen lassen: style. Was ja logisch ist, weil der Inhalt von style CSS Eigenschaften sind.

<!-- geht -->
<div style="--farbe:#c88">
   <input type="text" size="40" style="background-color:var(--farbe)">
</div>

Eine andere Möglichkeit, HTML zu beeinflussen, besteht darin, mit JavaScript die Attribute zu überschreiben. Da kann man sich einen abbrechen, mit getComputedStyle die aktuell gültigen Eigenschaften holen, mit getPropertyValue die custom properties abfragen, etc etc.

Frage: Willst Du CSS custom properties verwenden, weil das für dich die sinnvollste Lösung ist? Oder nur, weil du glaubtest, man könne sie überall im HTML verwenden? Wenn Du serverseitig das HTML generierst, könnte es einfacher sein, die HTML Attribute dort passend zu erzeugen.

Rolf