CSS-Funktionen

CSS Grid und Flexbox Kombination CSS Farb-Funktionen

CSS bietet verschiedene eingebaute Funktionen, mit denen wir Werte dynamisch berechnen, Variablen verwalten oder flexible Layouts erstellen können. Solche Funktionen tragen wesentlich zu modernem, responsivem und wartbarem Webdesign bei.

calc()-Funktion

Mit calc() können mathematische Operationen innerhalb von CSS-Werten ausgeführt werden. So können wir Prozentangaben, Pixel und andere Maßeinheiten einfach kombinieren.

Dieses Beispiel zeigt, wie man mit calc() 50 Pixel von der vollen Breite abzieht.

var()-Funktion

Mit var() können wir CSS-Variablen verwenden, die mit dem Präfix -- definiert werden. Damit können wir zentral Farben, Größen und andere Eigenschaften steuern.

In diesem Beispiel ruft die Funktion var() den Wert einer CSS-Variable als Hintergrundfarbe ab.

minmax()-Funktion

minmax() wird im Grid-Layout verwendet und ermöglicht die Angabe von minimalen und maximalen Größen für eine Spalte oder Zeile. So lassen sich flexible und responsive Layouts erstellen.

In diesem Beispiel ist die erste Spalte des Grids mindestens 150 Pixel breit, kann aber bei mehr Platz flexibel wachsen.

Vergleich von Funktionen

Funktion	Verwendung
calc()	Zum mathematischen Kombinieren von Werten, z. B. 100% - 50px.
var()	Zum Abrufen und Wiederverwenden von CSS-Variablen.
minmax()	Zur Festlegung flexibler Grid-Spalten oder -Zeilen.

Tipps zur Verwendung von Funktionen

Mit CSS-Funktionen kannst du dynamischen und leicht wartbaren Code erstellen, aber es ist wichtig zu wissen, welche Funktion wann am nützlichsten ist.

calc() hilft, unnötige Wrapper-Elemente bei Layout-Berechnungen zu vermeiden.
var() ist besonders effektiv, wenn du dieselben Farben oder Größen an mehreren Stellen verwendest.
minmax() ermöglicht vollständig responsive Grids, die sowohl auf kleinen als auch auf großen Bildschirmen funktionieren.