Trick # 314 | Dieser Beitrag beinhaltet 625 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
CSS-Variablen sind ein hervorragender Weg, um dereinst Anpassungen an Ihrer Website vorzunehmen. In einer Bibliothek definieren Sie Farbwerte, Fontgrössen, Abstände und vieles mehr. Bei den CSS-Klassen werden dann nicht mehr die Werte eingesetzt, sondern deren Name in der Library. Das zahlt sich vor allem dann aus, wenn sich dereinst irgend ein Wert ändern sollte.
Zunächst erstellen wir innerhalb des CSS-Stylesheets Ihrer Website eine Bibliothek der gebräuchlichsten Werte. Die verwendete Farbpalette ist ein gutes Beispiel. Die Einträge legen wir im :root-Selector ab:
:root {
--blue: #293280;
--white: #ffffff;
}In der Folge können wir die verwendeten Namen anstelle der Werte im CSS-Stylesheet verwenden. Die Namen werden dabei als Variablen – z.-B. var(--blue)– definiert.
Der ganze CSS-Code sähe dann etwa so aus:
:root {
--blue: #293280;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}Der Vorteil liegt auf der Hand: Möchten Sie der Website eine andere Blau-Nuance zuweisen, müssen Sie nicht das gesamt Stylesheet nach den alten Farbwerten abgrasen und diese durch neue ersetzen – nein: Sie tun dies einfach in der Library und sämtlich Vorkomnisse der Variable –blue erhalten den neuen Wert.
Ganz neue Möglichkeiten
Das ganze funktioniert aber nicht nur mit Farben, sondern z.B. auch mit Pixelwerten. Nehmen wir an, dass Sie für Desktop-Monitore eine Standarfontgrösse für Lauftexte haben. Z.B. 16px. Dann wäre der Library-Eintrag so:
:root {
--main-font-size: 16px;
}Für Anzeigen bis maximal 600px Breite möchten Sie aber vielleicht einen kleineren Font. Z.B. 12px. Dann bauen Sie eine MediaQuery ein und verwenden den folgenden Code:
:root {
--main-font-size: 16px;
}
@media (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}Damit haben Sie die Werte zentral festgelegt. Im weiteren Verlauf des CSS-Stylesheets können Sie die Variable dann z.B. dem Tag «p» zuweisen:
p {
font-size: var(--main-font-size);
}Auf diese Weise wird der Lauftext auf Desktop-Monitoren automatisch mit 16px Grösse angezeigt – auf kleinen Anzeigen hingegen mit 12px.
Ziemlich elegant. Oder?
Werbung
Werbung
