10 CSS-Variablen und -Funktionen

10.1 Custom Properties (--variable)

CSS Custom Properties, auch bekannt als CSS-Variablen, bieten eine flexible Möglichkeit, wiederverwendbare Werte in einem Stylesheet zu definieren. Sie ermöglichen es, einheitliche Stile zu erstellen und zentralisierte Änderungen vorzunehmen, ohne mehrfach im Code Anpassungen vornehmen zu müssen. Custom Properties beginnen mit zwei Bindestrichen (--) und werden direkt im CSS-Code definiert und verwendet.

10.1.1 Definition und Verwendung von CSS-Variablen

CSS Custom Properties können in jedem Selektor definiert und verwendet werden. Üblicherweise werden sie im :root-Pseudo-Selektor definiert, um sie auf globaler Ebene bereitzustellen.

:root {
    --main-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

Hier werden drei Variablen global definiert:

• --main-color: die Hauptfarbe.
• --secondary-color: die Sekundärfarbe.
• --font-size: die Standard-Schriftgröße.

10.1.2 Verwendung von Custom Properties

CSS-Variablen werden mit der Funktion var() aufgerufen. Innerhalb der var()-Funktion kann auch ein optionaler Fallback-Wert angegeben werden, der verwendet wird, falls die Variable nicht definiert ist.

button {
    background-color: var(--main-color);
    color: #fff;
    font-size: var(--font-size, 14px); /* Fallback-Wert von 14px, falls --font-size nicht definiert ist */
}

In diesem Beispiel wird die Hintergrundfarbe des Buttons auf den Wert von --main-color gesetzt. Falls --font-size nicht verfügbar ist, wird 14px als Fallback-Schriftgröße verwendet.

10.1.3 Vorteile von Custom Properties

1. Wiederverwendbarkeit: Variablen machen es einfach, häufig verwendete Werte wie Farben oder Abstände konsistent zu halten.
2. Leichte Wartbarkeit: Änderungen an einer zentralen Stelle beeinflussen automatisch alle Stellen, an denen die Variable verwendet wird.
3. Theming: Custom Properties sind ideal für die Erstellung von Design-Themes, die es ermöglichen, Farben und Stile einfach zu wechseln.

10.1.4 Dynamische Anpassung mit JavaScript

CSS Custom Properties lassen sich mit JavaScript dynamisch ändern, was besonders nützlich ist, um Designanpassungen wie Themes oder Benutzereinstellungen umzusetzen.

<button onclick="switchTheme()">Wechsel Theme</button>

:root {
    --background-color: #ffffff;
    --text-color: #333333;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

function switchTheme() {
    document.documentElement.style.setProperty('--background-color', '#333333');
    document.documentElement.style.setProperty('--text-color', '#ffffff');
}

Mit diesem Beispiel ändert der switchTheme()-Funktionsaufruf die Farben der Custom Properties dynamisch, sodass der Hintergrund und die Textfarbe des gesamten Dokuments angepasst werden.

10.1.5 Verschachtelung und Vererbung von Variablen

CSS Custom Properties werden vererbt und können in anderen Selektoren überschrieben werden, was flexible Anpassungen für spezifische Komponenten ermöglicht.

:root {
    --main-color: #3498db;
}

.section {
    --main-color: #e74c3c; /* Überschreibt die globale Variable innerhalb dieses Elements */
    color: var(--main-color);
}

In diesem Beispiel wird --main-color in .section lokal überschrieben und erscheint in diesem Kontext in Rot, während es im restlichen Dokument Blau bleibt.

10.1.6 Fallback und Berechnung mit Variablen

Custom Properties können zusammen mit CSS-Funktionen wie calc(), min(), und max() verwendet werden, um berechnete Werte dynamisch anzupassen.

:root {
    --spacing: 10px;
    --padding: calc(2 * var(--spacing));
}

.container {
    padding: var(--padding); /* Ergibt 20px, basierend auf der Berechnung */
}

Hier wird --padding als das Doppelte von --spacing berechnet und liefert so eine dynamische Lösung für Abstandswerte.

10.2 CSS-Funktionen (calc(), min(), max(), clamp())

CSS bietet mehrere mathematische Funktionen, die es ermöglichen, dynamische und flexible Werte für CSS-Eigenschaften festzulegen. Mit Funktionen wie calc(), min(), max() und clamp() lassen sich Berechnungen direkt im CSS-Code durchführen, wodurch Layouts noch besser an unterschiedliche Bildschirmgrößen und Anforderungen angepasst werden können.

10.2.1 calc()

Die calc()-Funktion führt Berechnungen mit verschiedenen Einheiten durch und eignet sich besonders für responsive Designs, die flexible Maße benötigen. Mit calc() lassen sich Werte für Breite, Höhe, Abstände und mehr dynamisch berechnen.

.element {
    width: calc(100% - 50px);
    padding: calc(1rem + 5px);
}

• Beispiel: Die Breite des Elements beträgt 100% minus 50px, was es anpassungsfähiger an den umgebenden Container macht.
• Berechnungsoperatoren: +, -, *, / (nur im Zusammenspiel mit festen Werten).

10.2.1.1 Anwendungsfälle für calc()

• Flexibles Layout: calc() ermöglicht die Kombination von Prozenten und festen Werten, um Layouts zu gestalten, die sich an die Bildschirmgröße anpassen.
• Zentrierung: Berechnungen mit calc() ermöglichen das gleichmäßige Platzieren von Elementen in Containern mit variabler Größe.

.container {
    padding: calc(50% - 10px); /* Beispiel für eine zentrierte Positionierung */
}

10.2.2 min()

Die min()-Funktion gibt den kleineren Wert von zwei oder mehr Werten zurück und wird verwendet, um sicherzustellen, dass eine Eigenschaft nicht größer als ein bestimmter Wert ist.

.element {
    width: min(100%, 600px);
}

In diesem Beispiel passt sich die Breite des Elements dynamisch an: sie ist 100% des Containers, aber nicht breiter als 600px.

10.2.2.1 Anwendungsfälle für min()

• Responsive Maximalwerte: min() ist nützlich, um responsive Grenzen zu setzen, z. B. ein Layout, das nicht breiter als ein bestimmter Wert wird.
• Variable Schriftgrößen: min() eignet sich auch für flexible Schriftgrößen, die auf großen Bildschirmen eine maximale Grenze haben.

.title {
    font-size: min(5vw, 30px);
}

Hier wird die Schriftgröße dynamisch auf 5% der Viewport-Breite angepasst, aber sie überschreitet niemals 30px.

10.2.3 max()

Die max()-Funktion gibt den größeren Wert von zwei oder mehr Werten zurück und wird verwendet, um sicherzustellen, dass eine Eigenschaft einen Mindestwert erreicht.

.element {
    height: max(50vh, 300px);
}

In diesem Beispiel beträgt die Höhe des Elements mindestens 300px, wächst jedoch auf 50% der Viewport-Höhe, wenn mehr Platz verfügbar ist.

10.2.3.1 Anwendungsfälle für max()

• Mindestwerte für Abstände und Layouts: max() stellt sicher, dass Elemente immer eine bestimmte Mindestgröße haben, unabhängig von der Größe des Containers.
• Schriftgrößen und Abstände: Diese Funktion ist nützlich, um minimale Schriftgrößen oder Abstände festzulegen, sodass die Lesbarkeit auf kleinen Bildschirmen erhalten bleibt.

.paragraph {
    font-size: max(1rem, 2vw);
}

Hier bleibt die Schriftgröße mindestens bei 1rem, aber wächst auf bis zu 2vw, wenn genügend Platz vorhanden ist.

10.2.4 clamp()

Die clamp()-Funktion bietet eine Kombination aus minimalem, bevorzugtem und maximalem Wert und ist ideal für responsive Designs. Die Syntax lautet: clamp(min, preferred, max).

.element {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
}

In diesem Beispiel hat die Schriftgröße einen Mindestwert von 1rem und einen Maximalwert von 2.5rem, skaliert aber flexibel auf 2vw + 1rem dazwischen.

10.2.4.1 Anwendungsfälle für clamp()

• Dynamische Schriftgrößen: clamp() erlaubt es, Schriftgrößen an den Viewport anzupassen, ohne dass sie zu klein oder zu groß werden.
• Flexible Abstände: Mit clamp() lassen sich responsive Abstände definieren, die den verfügbaren Platz optimal nutzen.

.container {
    padding: clamp(10px, 2vw, 30px);
}

Hier beträgt der Padding-Wert mindestens 10px und höchstens 30px, skaliert jedoch dynamisch auf 2vw dazwischen.