Verwenden von CSS-Mathematikfunktionen

CSS-Mathematikfunktionen ermöglichen, dass ein Eigenschaftswert - wie die height, animation-duration oder font-size eines Elements - als mathematischer Ausdruck geschrieben wird.

Ohne mathematische Ausdrücke zu verwenden, sind die eingebauten CSS-Einheiten wie rem, vw und % oft flexibel genug, um HTML-Elemente zu gestalten, um ein bestimmtes Benutzererlebnis zu erreichen.

Es gibt jedoch Fälle, in denen wir uns eingeschränkt fühlen, wenn wir den Stil eines Elements mit einem einzelnen Wert und einer Einheit ausdrücken. Betrachten Sie die folgenden Beispiele:

  1. Wir möchten die Höhe eines Inhaltsbereichs auf "die Höhe des Viewports minus die Höhe einer Navigationsleiste" setzen.
  2. Wir möchten die Breite von zwei Elementen addieren, um die Breite eines dritten Elements zu definieren.
  3. Wir wollen verhindern, dass eine variable font-size eines Texts ü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 von JavaScript definiert sind, und die Stile der Elemente dynamisch auf Basis der von unseren Skripten berechneten Ergebnisse festzulegen.

In vielen Fällen, einschließlich der oben genannten Beispiele, können wir stattdessen Mathematikfunktionen verwenden, die direkt in CSS eingebaut sind. Diese Lösung lässt sich oft einfacher implementieren und ist für den Browser schneller auszuführen als die Verwendung von JavaScript.

Insgesamt können Entwickler eine Kombination aus fast zwei Dutzend CSS-Mathematikfunktionen in ihren Stylesheets verwenden. In diesem Leitfaden werden wir vier der häufiger verwendeten Funktionen beispielhaft erläutern und die fortgeschritteneren vorstellen.

calc(): Grundlegende mathematische Operationen

In den ersten beiden unserer drei obigen Beispiele möchten wir den Stil eines Elements entsprechend dem Ergebnis einer Additions- oder Subtraktionsoperation festlegen. Genau dafür ist calc() gedacht.

Die calc()-Funktion ermöglicht es, CSS-Property-Werte unter Verwendung von Addition, Subtraktion, Multiplikation und Division festzulegen. Sie wird häufig verwendet, um zwei CSS-Werte zu kombinieren, die unterschiedliche Einheiten haben, wie % und px.

Die calc()-Mathefunktion nimmt einen mathematischen Ausdruck als Parameter und gibt das Ergebnis dieses Ausdrucks zurück, z.B.:

css
property: calc(expression);

calc() Beispiel

Klicken Sie auf das Wiedergabesymbol unten, um das calc()-Beispiel im Code-Playground zu sehen und es selbst auszuprobieren.

css
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 möchten, dass der Wert einer CSS-Eigenschaft eine bestimmte Zahl überschreitet. Angenommen, wir möchten, dass die Breite unseres Inhaltscontainers die kleinere von "der gesamten Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Mathematikfunktion min() verwenden.

Die min()-Mathefunktion nimmt eine Menge kommagetrennter Werte als Argumente und gibt den kleinsten dieser Werte zurück, z.B.:

css
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 Wiedergabesymbol unten, um das min()-Beispiel im Code-Playground zu sehen und es selbst auszuprobieren.

css
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 bei min() möchten wir manchmal nicht, dass der Wert einer CSS-Eigenschaft unter eine bestimmte Zahl sinkt. Zum Beispiel könnten wir möchten, dass die Breite unseres Inhaltscontainers die größere von "der gesamten Breite unseres Bildschirms" und "500 Pixel" ist. In diesen Fällen können wir die CSS-Mathematikfunktion max() verwenden.

Die max()-Mathefunktion nimmt eine Menge kommagetrennter Werte als Argumente und gibt den größten dieser Werte zurück, z.B.:

css
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 Wiedergabesymbol unten, um das max()-Beispiel im Code-Playground zu sehen und es selbst auszuprobieren.

css
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()-Mathefunktion nimmt einen minimalen Wert, den zu klemmenden Wert und den maximalen Wert als Argumente, z.B.:

css
property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
  • Wenn der zu klemmende Wert kleiner als der übergebene Mindestwert ist, gibt die Funktion den Mindestwert zurück.
  • Wenn der zu klemmende Wert größer als der übergebene Höchstwert ist, gibt die Funktion den Höchstwert zurück.
  • Wenn der zu klemmende Wert zwischen den übergebenen Mindest- und Höchstwerten liegt, gibt die Funktion den ursprünglichen zu klemmenden 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 Wiedergabesymbol unten, um das clamp()-Beispiel im Code-Playground zu sehen und es selbst auszuprobieren.

css
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 Stylen von DOM-Elementen sind die vier grundlegenden Mathematikfunktionen calc(), min(), max(), und clamp() oft ausreichend. Für fortgeschrittenere Anwendungen wie Lernmaterialien zur Mathematik, 3D-Visualisierungen oder CSS-Animationen könnten Sie jedoch in Betracht ziehen, folgende Funktionen zu verwenden:

  • Schrittwertfunktionen
    • round(): Berechnet einen Wert unter Verwendung einer Rundungsstrategie
    • mod(): Berechnet den Rest einer Divisionsoperation mit demselben Vorzeichen wie der Divisor
    • rem(): Berechnet den Rest einer Divisionsoperation mit demselben Vorzeichen wie der Dividende
  • Trigonometrische Funktionen
    • sin(): Berechnet den trigonometrischen Sinus einer Zahl
    • cos(): Berechnet den trigonometrischen Kosinus einer Zahl
    • tan(): Berechnet den trigonometrischen Tangens einer Zahl
    • asin(): Berechnet den trigonometrischen Arkussinus einer Zahl
    • acos(): Berechnet den trigonometrischen Arkuskosinus einer Zahl
    • atan(): Berechnet den trigonometrischen Arkustangens einer Zahl
    • atan2(): Berechnet den trigonometrischen Arkustangens, gegeben zwei Zahlen
  • Exponentielle Funktionen
    • pow(): Berechnet eine Zahl, erhoben zu einer Potenz einer anderen Zahl
    • sqrt(): Berechnet die Quadratwurzel einer Zahl
    • hypot(): Berechnet die Quadratwurzel der Summe der Quadrate der gegebenen Zahlen
    • log(): Berechnet den Logarithmus einer Zahl (mit e als Standardbasis)
    • exp(): Berechnet e erhoben zur Potenz einer anderen Zahl
  • Vorzeichenfunktionen
    • abs(): Berechnet den absoluten Wert einer Zahl
    • sign(): Berechnet das Vorzeichen (positiv, negativ oder null) einer Zahl

Abschließende Gedanken

  • Sie können CSS-Mathematikfunktionen verwenden, um reaktionsfähige 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 haben Mitglieder des Interop-Projekts „CSS-Mathematikfunktionen“ als Schwerpunktbereich für Verbesserungen ausgewählt. Dies bedeutet, dass Browseranbieter zusammenarbeiten, um sicherzustellen, dass CSS-Mathematikfunktionen in allen Browsern und auf allen Geräten gleich funktionieren.