Werner-Zenk.de - Zur Startseite

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 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>

Die CSS-Variablen werden nicht vom Browser: Microsoft Internet Explorer 11 unterstützt, jedoch von Microsoft Edge, Mozilla Firefox und Google Chrome.

Bausteine

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Pflichtfeld hervorheben

PHP - Anzahl eines Wortes in einem Array ermitteln

JavaScript - Countdown 2

MySQL - Mit mehreren Begriffen gleichzeitig suchen