CSS - CSS-Variablen

Komplexe Websites haben sehr große Mengen von CSS, oft mit vielen wiederholten Werten. Beispielsweise kann die gleiche Farbe an vielen verschiedenen Orten im Quelltext verwendet werden, die globales suchen und ersetzen erfordern, wenn diese Farbe geändert werden muss.

Durch Deklarieren einer Variablen auf der: root-Pseudo-Klasse kann man eigene Instanzen von Wiederholungen setzen.

Ein zusätzlicher Vorteil ist der semantische Bezeichner. Beispiel: main-bg-color ist einfacher zu verstehen als #00ff00, besonders wenn diese gleiche Farbe auch in einem anderen Kontext verwendet wird.


<style>

:
root {
 --
main-bg-colorbrown;
}

.
box1 {
 
colorwhite;
 
background-color: var(--main-bg-color);
}

.
box2 {
 
coloryellow;
 
background-color: var(--main-bg-color);
}
</
style>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<figure> Abbildung

CSS - Pink-Cube-Animation

PHP - IP und Host ausgeben

JavaScript - Neues Fenster öffnen

MySQL - Die Differenz zweier Uhrzeiten ermitteln

Fehlerhafter Quelltext
Die meisten Browser sind wahre Lesekünstler. Sie versuchen selbst aus dem größten Code-Chaos ein lesbares Bild für den Betrachter zu schaffen. Je mehr Fehler allerdings im Quelltext vorhanden ist, desto mehr Zeit wird er für die Darstellung benötigen. Eine fehlerfreie Ausgabe ist gleichermaßen zu bezweifeln.