Verwendung von CSS-Mathematikfunktionen
CSS-Mathematikfunktionen ermöglichen es, einen Eigenschaftswert - wie height
, animation-duration
oder font-size
eines Elements - als mathematischen Ausdruck zu schreiben.
Ohne Verwendung von Mathematik sind die eingebauten CSS-Einheiten wie rem
, vw
und %
oft flexibel genug, um HTML-Elemente so zu gestalten, dass ein bestimmtes Benutzererlebnis erreicht wird.
Es gibt jedoch Fälle, in denen wir uns eingeschränkt fühlen könnten, den Stil eines Elements mit einem einzigen Wert und einer Einheit auszudrücken. 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" setzen.
- Wir möchten die Breite von zwei Elementen zusammenfügen, 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 darin bestehen, auf mathematische Funktionen zu setzen, die durch JavaScript definiert sind, und die Stile von Elementen dynamisch basierend auf den von unseren Skripten berechneten Ergebnissen festzulegen.
In vielen Fällen, einschließlich der oben genannten Beispiele, können wir stattdessen Mathematikfunktionen direkt in CSS nutzen. Diese Lösung ist oft einfacher zu implementieren und schneller vom Browser auszuführen als die Verwendung von JavaScript.
Insgesamt können Entwickler eine Kombination von fast zwei Dutzend CSS-Mathematikfunktionen in ihren Stylesheets verwenden. In diesem Leitfaden werden wir vier der häufiger verwendeten Beispiele veranschaulichen und die fortgeschritteneren vorstellen.
calc()
: Grundlegende mathematische Operationen
In den ersten beiden unserer drei oben genannten Beispiele möchten wir den Stil eines Elements entsprechend dem Ergebnis einer Addition oder Subtraktion festlegen. Dies ist genau ein Anwendungsfall für calc()
.
Die calc()
-Funktion erlaubt es Ihnen, CSS-Eigenschaftswerte unter Verwendung von Addition, Subtraktion, Multiplikation und Division anzugeben. Sie wird häufig verwendet, um zwei CSS-Werte zu kombinieren, die unterschiedliche Einheiten haben, wie %
und px
.
Die calc()
-Mathematikfunktion nimmt einen mathematischen Ausdruck als Parameter und gibt das Ergebnis dieses Ausdrucks zurück, z.B.:
property: calc(expression);
calc()
Beispiel
Klicken Sie auf das Abspielen-Symbol 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()
: Den minimalen Wert in einer Menge finden
Es gibt Fälle, in denen wir nicht wollen, dass der Wert einer CSS-Eigenschaft eine bestimmte Zahl überschreitet. Angenommen, wir möchten, dass die Breite unseres Inhaltscontainers der kleinere Wert von "die volle Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Mathematikfunktion min()
verwenden.
Die min()
-Mathematikfunktion nimmt eine Reihe 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 zu vergleichen, die unterschiedliche Einheiten haben, wie %
und px
.
min()
Beispiel
Klicken Sie auf das Abspielen-Symbol 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()
: Den maximalen Wert in einer Menge finden
Ähnlich wie min()
wollen wir manchmal nicht, dass der Wert einer CSS-Eigenschaft unter eine bestimmte Zahl fällt. Beispielsweise möchten wir, dass die Breite unseres Inhaltscontainers der größere Wert von "die volle Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Mathematikfunktion max()
verwenden.
Die max()
-Mathematikfunktion nimmt eine Reihe 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 zu vergleichen, die unterschiedliche Einheiten haben, wie %
und px
.
Beachten Sie die Ähnlichkeiten und Unterschiede zwischen den Beispielen für min()
und max()
.
max()
Beispiel
Klicken Sie auf das Abspielen-Symbol 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()
: Einen Wert zwischen zwei Werten begrenzen
Wir können die Funktionen von min()
und max()
kombinieren, indem wir clamp()
verwenden. Die clamp()
-Mathematikfunktion nimmt einen minimalen Wert, den zu begrenzenden Wert und den maximalen Wert als Argumente, z.B.:
property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
- Wenn der zu begrenzende Wert kleiner ist als der übergebene Minimalwert, gibt die Funktion den Minimalwert zurück.
- Wenn der zu begrenzende Wert größer ist als der übergebene Maximalwert, gibt die Funktion den Maximalwert zurück.
- Wenn der zu begrenzende Wert zwischen dem übergebenen minimalen und maximalen Wert liegt, gibt die Funktion den ursprünglichen zu begrenzenden Wert zurück.
Diese Funktion wird häufig verwendet, um zwei CSS-Werte zu vergleichen, die unterschiedliche Einheiten haben, wie %
und px
.
clamp()
Beispiel
Klicken Sie auf das Abspielen-Symbol 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);
}
Erweiterte CSS-Mathematikfunktionen
Beim Layouten und Gestalten von DOM-Elementen sind die vier grundlegenden Mathematikfunktionen calc()
, min()
, max()
und clamp()
oft ausreichend. Für fortgeschrittene Verwendungen wie Lernmaterialien zur Mathematik, 3D-Visualisierungen oder CSS-Animationen sollten Sie jedoch in Betracht ziehen, folgende Funktionen zu verwenden:
- Stufungsfunktionen
- Trigonometrische Funktionen
sin()
: berechnet den trigonometrischen Sinus einer Zahlcos()
: berechnet den trigonometrischen Kosinus einer Zahltan()
: berechnet den trigonometrischen Tangens einer Zahlasin()
: berechnet den trigonometrischen Arkussinus einer Zahlacos()
: berechnet den trigonometrischen Arkuskosinus einer Zahlatan()
: berechnet den trigonometrischen Arkustangens einer Zahlatan2()
: berechnet den trigonometrischen Arkustangens mit zwei Zahlen
- Exponentielle Funktionen
pow()
: berechnet eine Zahl, die auf die Potenz einer anderen Zahl erhöht wirdsqrt()
: berechnet die Quadratwurzel einer Zahlhypot()
: berechnet die Quadratwurzel der Summe der Quadrate der angegebenen Zahlenlog()
: berechnet den Logarithmus einer Zahl (mite
als Standardbasis)exp()
: berechnete
hoch eine andere Zahl
- Vorzeichenfunktionen
Abschließende Gedanken
- Sie können CSS-Mathematikfunktionen nutzen, um responsive Benutzeroberflächen zu erstellen, ohne JavaScript-Code zu schreiben.
- CSS-Mathematikfunktionen 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-Mathematikfunktionen“ als einen Schwerpunktbereich für Verbesserungen aus. Das bedeutet, dass Browserhersteller zusammenarbeiten, um sicherzustellen, dass CSS-Mathematikfunktionen in allen Browsern und Geräten gleich funktionieren.