Verwendung von CSS-Math-Funktionen
CSS-Math-Funktionen ermöglichen es, einen Eigenschaftswert - wie die height
, animation-duration
oder font-size
eines Elements - als mathematischen Ausdruck zu schreiben.
Ohne die Verwendung von Mathematik sind die eingebauten CSS-Einheiten wie rem
, vw
und %
oft flexibel genug, um HTML-Elemente so zu gestalten, dass eine bestimmte Benutzererfahrung erreicht wird.
Es gibt jedoch Fälle, in denen wir uns durch die Angabe eines einzelnen Werts und einer Einheit zur Gestaltung eines Elements eingeschränkt fühlen könnten. Betrachten Sie die folgenden Beispiele:
- Wir möchten die Höhe eines Inhaltsbereichs auf "die Höhe des Viewports minus die Höhe einer Navigationsleiste" festlegen.
- Wir möchten die Breite von zwei Elementen addieren, um die Breite eines dritten Elements zu definieren.
- Wir möchten verhindern, dass eine variable
font-size
eines Textes über eine bestimmte Größe hinauswächst.
In all diesen Fällen müssen wir uns auf Mathematik verlassen, um die gewünschten Ergebnisse zu erzielen. Eine Lösung könnte sein, sich auf mathematische Funktionen zu verlassen, die durch JavaScript definiert sind, und die Stile von Elementen dynamisch basierend auf den berechneten Ergebnissen unserer Skripte festzulegen.
In vielen Fällen, einschließlich der oben genannten Beispiele, können wir stattdessen Math-Funktionen verwenden, die direkt in CSS integriert sind. Diese Lösung ist oft einfacher zu implementieren und schneller für den Browser auszuführen als die Verwendung von JavaScript.
Insgesamt können Entwickler eine Kombination aus fast zwei Dutzend CSS-Math-Funktionen in ihren Stylesheets verwenden. In diesem Leitfaden werden wir vier der häufiger verwendeten Funktionen vorstellen und die fortgeschritteneren einführen.
calc()
: Grundlegende mathematische Operationen
In den ersten beiden unserer drei Beispiele oben möchten wir den Stil eines Elements entsprechend dem Ergebnis einer Addition oder Subtraktion festlegen. Dies ist genau einer der Anwendungsfälle für calc()
.
Die calc()
-Funktion ermöglicht es Ihnen, CSS-Eigenschaftswerte unter Verwendung von Addition, Subtraktion, Multiplikation und Division anzugeben. Sie wird häufig verwendet, um zwei CSS-Werte mit unterschiedlichen Einheiten zu kombinieren, wie %
und px
.
Die calc()
-Math-Funktion nimmt einen mathematischen Ausdruck als Parameter an und gibt das Ergebnis dieses Ausdrucks zurück, z.B.:
property: calc(expression);
calc()
Beispiel
Klicken Sie auf das Wiedergabesymbol unten, um das calc()
-Beispiel im Code-Spielplatz zu sehen und es selbst auszuprobieren.
div {
background-color: black;
margin: 4px 0;
width: 100%;
}
div > code {
display: block;
background-color: red;
color: white;
height: 48px;
}
.calc1 > code {
/* Output width: `110px` */
width: calc(10px + 100px);
}
.calc2 > code {
/* Output width: `10em` */
width: calc(2em * 5);
}
.calc3 > code {
/* Output width: Depends on the container's width */
width: calc(100% - 32px);
}
.calc4 > code {
--predefined-width: 100%;
/* Output width: Depends on the container's width */
width: calc(var(--predefined-width) - calc(16px * 2));
}
min()
: Finden des Minimalwerts in einer Menge
Es gibt Fälle, in denen wir nicht möchten, dass der Wert einer CSS-Eigenschaft eine bestimmte Zahl überschreitet. Nehmen wir zum Beispiel an, wir möchten, dass die Breite unseres Inhaltscontainers die kleinere von "der vollen Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Math-Funktion min()
nutzen.
Die min()
-Math-Funktion nimmt eine Menge von durch Kommas getrennten Werten als Argumente und gibt den kleinsten dieser Werte zurück, z.B.:
property: min(<first value>, <second value>, <third value>, ...);
Diese Funktion wird häufig verwendet, um zwei CSS-Werte mit unterschiedlichen Einheiten wie %
und px
zu vergleichen.
min()
Beispiel
Klicken Sie auf das Wiedergabesymbol unten, um das min()
-Beispiel im Code-Spielplatz zu sehen und es selbst auszuprobieren.
div {
background-color: black;
margin: 4px 0;
width: 100%;
}
div > code {
display: block;
background-color: darkblue;
color: white;
height: 48px;
}
.min1 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `50%` of the container's width */
width: min(9999px, 50%);
}
.min2 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `100%` of the container's width */
width: min(9999px, 100%);
}
.min3 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `120px` of the container's width */
width: min(120px, 150px, 90%);
}
.min4 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `80px` of the container's width */
width: min(80px, 90%);
}
max()
: Finden des Maximalwerts in einer Menge
Ähnlich wie min()
möchten wir manchmal nicht, dass der Wert einer CSS-Eigenschaft unter eine bestimmte Zahl fällt. Beispielsweise könnten wir möchten, dass die Breite unseres Inhaltscontainers die größere von "der vollen Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Math-Funktion max()
verwenden.
Die max()
-Math-Funktion nimmt eine Menge von durch Kommas getrennten Werten als Argumente und gibt den größten dieser Werte zurück, z.B.:
property: max(<first value>, <second value>, <third value>, ...);
Diese Funktion wird häufig verwendet, um zwei CSS-Werte mit unterschiedlichen Einheiten wie %
und px
zu vergleichen.
Beachten Sie die Gemeinsamkeiten und Unterschiede zwischen den Beispielen für min()
und max()
.
max()
Beispiel
Klicken Sie auf das Wiedergabesymbol unten, um das max()
-Beispiel im Code-Spielplatz zu sehen und es selbst auszuprobieren.
div {
background-color: black;
margin: 4px 0;
width: 100%;
height: 48px;
}
div > code {
display: block;
background-color: darkmagenta;
color: white;
height: 48px;
}
.max1 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `50%` of the container's width */
width: max(50px, 50%);
}
.max2 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `100%` of the container's width */
width: max(50px, 100%);
}
.max3 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `90%` of the container's width */
width: max(20px, 50px, 90%);
}
.max4 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `80%` of the container's width */
width: max(80px, 80%);
}
clamp()
: Begrenzen eines Wertes zwischen zwei Werten
Wir können die Funktionen von min()
und max()
kombinieren, indem wir clamp()
verwenden. Die clamp()
-Math-Funktion nimmt einen Minimalwert, den zu begrenzenden Wert und den Maximalwert als Argumente, z.B.:
property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
- Wenn der zu begrenzende Wert kleiner als der angegebene Minimalwert ist, gibt die Funktion den Minimalwert zurück.
- Wenn der zu begrenzende Wert größer als der angegebene Maximalwert ist, gibt die Funktion den Maximalwert zurück.
- Wenn der zu begrenzende Wert zwischen den angegebenen Minimal- und Maximalwerten liegt, gibt die Funktion den ursprünglichen Wert zurück, der begrenzt werden soll.
Diese Funktion wird häufig verwendet, um zwei CSS-Werte mit unterschiedlichen Einheiten wie %
und px
zu vergleichen.
clamp()
Beispiel
Klicken Sie auf das Wiedergabesymbol unten, um das clamp()
-Beispiel im Code-Spielplatz zu sehen und es selbst auszuprobieren.
div {
background-color: black;
margin: 4px 0;
width: 100%;
height: 48px;
}
div > code {
display: block;
background-color: darkgreen;
color: white;
height: 48px;
}
.clamp1 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `20%` of the container's width */
width: clamp(20%, 1px, 80%);
}
.clamp2 > code {
/* Output width: Depends on the container's width; */
/* on this page, likely to be `90%` of the container's width */
width: clamp(10%, 9999px, 90%);
}
.clamp3 > code {
/* Output width: `125px` */
width: clamp(125px, 1px, 250px);
}
.clamp4 > code {
/* Output width: `150px` */
width: clamp(25px, 9999px, 150px);
}
Fortgeschrittene CSS-Math-Funktionen
Beim Layout und der Gestaltung von DOM-Elementen sind die vier grundlegenden Math-Funktionen calc()
, min()
, max()
und clamp()
oft ausreichend. Für fortgeschrittene Anwendungen wie Lernmaterialien zu Mathematik, 3D-Visualisierungen oder CSS-Animationen können Sie jedoch in Betracht ziehen, Folgendes zu verwenden:
- Gestufte Wertfunktionen
- Trigonometrische Funktionen
sin()
: berechnet den trigonometrischen Sinus einer Zahlcos()
: berechnet den trigonometrischen Kosinus einer Zahltan()
: berechnet den trigonometrischen Tangens einer Zahlasin()
: berechnet den trigonometrischen Inversen Sinus einer Zahlacos()
: berechnet den trigonometrischen Inversen Kosinus einer Zahlatan()
: berechnet den trigonometrischen Inversen Tangens einer Zahlatan2()
: berechnet den trigonometrischen Inversen Tangens anhand von zwei Zahlen
- Exponentialfunktionen
- Signalfunktionen
Abschließende Gedanken
- Sie können CSS-Math-Funktionen verwenden, um responsive Benutzeroberflächen zu erstellen, ohne JavaScript-Code schreiben zu müssen.
- CSS-Math-Funktionen können manchmal anstelle von CSS-Media-Queries verwendet werden, um Layout-Breakpoints zu definieren.
- Im Jahr 2023 wählten Mitglieder des Interop-Projekts "CSS Math Functions" als Fokusbereich für Verbesserungen. Das bedeutet, dass Browser-Anbieter zusammenarbeiten, um sicherzustellen, dass CSS-Math-Funktionen in allen Browsern und Geräten gleich funktionieren.