CSS „min()“, „max()“ und „clamp()“

Mit diesen gut unterstützten CSS-Funktionen können Sie die Größe von Elementen steuern, für ein angemessenes Abstandsverhältnis sorgen und eine flexible Typografie implementieren.

Una Kravets

Da responsives Webdesign immer komplexer wird, entwickelt sich CSS ständig weiter, um Autoren mehr Kontrolle zu geben. Die Funktionen min(), max() und clamp(), die jetzt in allen modernen Browsern unterstützt werden, gehören zu den neuesten Tools, mit denen das Erstellen von Websites und Apps dynamischer und responsiver wird. Mit diesen Funktionen können Sie die Größe von Elementen steuern, den Abstand zwischen Elementen beibehalten und eine flexible und fließende Typografie erstellen.

Mit den mathematischen Funktionen calc(), min(), max() und clamp() können mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) als Komponentenwerte verwendet werden.

CSS-Werte und ‑Einheiten – Stufe 4

Unterstützte Browser

min()

max()

clamp()

Nutzung

Sie können min(), max() und clamp() rechts neben jedem CSS-Ausdruck verwenden, wenn es sinnvoll ist. Für min() und max() geben Sie eine Argumentliste mit Werten an und der Browser bestimmt, welcher der kleinste oder größte ist. Im Fall von width: min(1rem, 50%, 10vw) berechnet der Browser beispielsweise, welche dieser relativen Einheiten die kleinste ist, und verwendet diesen Wert für die Breite des Elements.

Die Funktion max() macht dasselbe für den Höchstwert.

Wenn Sie clamp() verwenden möchten, geben Sie drei Werte ein: einen Mindestwert, einen idealen Wert, von dem aus berechnet werden soll, und einen Höchstwert.

Sie können diese Funktionen überall dort verwenden, wo <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> zulässig ist. Sie können sie einzeln (wie in font-size: max(0.5vw, 50%, 2rem)), mit calc() (wie in font-size: max(calc(0.5vw - 1em), 2rem)) oder kombiniert (wie in font-size: max(min(0.5vw, 1em), 2rem)) verwenden.

Im Folgenden finden Sie einige Beispiele für die Verwendung dieser Funktionen.

Die perfekte Breite

Laut The Elements of Typographic Style von Robert Bringhurst gilt „eine Zeilenlänge von 45 bis 75 Zeichen für eine einspaltige Seite mit einer Serifenschrift in einer bestimmten Textgröße als zufriedenstellend“.

Damit Ihre Textblöcke zwischen 45 und 75 Zeichen breit bleiben, verwenden Sie clamp() und ch (Zeichenabstand mit einer Breite von 0).

p {
  width: clamp(45ch, 50%, 75ch);
}

So kann der Browser die Breite des Absatzes bestimmen. Die Breite wird standardmäßig auf 50% festgelegt. Wenn 50% kleiner als 45ch ist, wird stattdessen 45ch als Breite verwendet. Ist 50% breiter als 75ch, wird 75ch verwendet.

Sie können auch nur min() oder max() verwenden. Wenn das Element immer eine Breite von 50% haben und auf größeren Bildschirmen nicht breiter als 75ch sein soll, verwenden Sie width: min(75ch, 50%);, um die maximale Größe festzulegen.

Ebenso können Sie mit der Funktion max() eine Mindestgröße für gut lesbaren Text festlegen, wie in width: max(45ch, 50%);. Hier wählt der Browser den größeren Wert aus. Das Element muss also mindestens 45ch Pixel breit sein.

Ränder verwalten

Mit max() können Sie auch eine Mindestabstandgröße festlegen. Dieses Beispiel stammt aus CSS Tricks, wo Leser Caluã de Lacerda Pataca diese Idee geteilt hat: Geben Sie einem Element bei größeren Bildschirmgrößen zusätzlichen Abstand, aber bei kleineren Bildschirmgrößen einen Mindestabstand. Verwenden Sie dazu calc() oder max() und ziehen Sie von beiden Seiten des Elements den Mindestabstand ab: calc((100vw - var(--contentWidth)) / 2) oder max(2rem, 50vw - var(--contentWidth) / 2). In Ihrem Stylesheet sollte es so aussehen:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Fließende Typografie

Um fluide Typografie zu ermöglichen, hat Mike Riethmeuller ein Verfahren popularisiert, bei dem mithilfe der Funktion clamp() eine Mindest- und eine Maximalschriftgröße festgelegt und eine Skalierung zwischen diesen Größen ermöglicht wird.

Vor clamp(), erforderte die Schriftgrößenänderung komplexe Stilstrings. Jetzt können Sie die Arbeit dem Browser überlassen. Legen Sie die minimale zulässige Schriftgröße (z. B. 1.5rem für einen Titel), die maximale Größe (z. B. 3rem) und die ideale Größe (z. B. 5vw) fest. Jetzt haben Sie eine Typografie, die mit der Viewport-Breite der Seite skaliert, bis die Grenzwerte für Mindest- und Höchstwerte erreicht werden. Dazu ist nur sehr wenig Code erforderlich:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Weitere Ressourcen

• CSS-Werte und ‑Einheiten auf MDN
• Spezifikation für CSS-Werte und ‑Einheiten – Stufe 4
• CSS-Tricks-Artikel zur Breite von inneren Elementen
• min(), max(), clamp() – Übersicht von Ahmad Shadeed

Titelbild von @yer_a_wizard auf Unsplash