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

Hier erfahren Sie, wie Sie mit diesen gut unterstützten CSS-Funktionen die Größe von Elementen steuern, die richtigen Abstände einhalten und eine flüssige Typografie implementieren.

Una Kravets

Da responsives Design 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 Websites und Apps dynamischer und responsiver gestaltet werden können. Mit diesen Funktionen können Sie die Größe von Elementen steuern, den Abstand zwischen Elementen beibehalten und eine flexible und flüssige 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() auf der rechten Seite eines beliebigen CSS-Ausdrucks verwenden, sofern dies sinnvoll ist. Für min() und max() geben Sie eine Argumentliste mit Werten an und der Browser bestimmt, welcher Wert 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 Maximalwert.

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 zusammengesetzt (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 „alles zwischen 45 und 75 Zeichen als zufriedenstellende Zeilenlänge für eine einspaltige Seite, die in einer Serifenschrift in einer Textgröße gesetzt ist“.

Damit die Textblöcke zwischen 45 und 75 Zeichen breit bleiben, verwenden Sie clamp() und die Einheit ch (Zeichenvorschub mit Breite 0):

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

Dadurch 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. Wenn 50 % breiter als 75ch ist, wird 75ch verwendet.

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

Auf die gleiche Weise können Sie mit der Funktion max() eine Mindestgröße für lesbaren Text festlegen, z. B. width: max(45ch, 50%);. Hier wählt der Browser den größeren Wert aus, d. h., das Element muss mindestens 45ch breit sein.

Abstand verwalten

Sie können auch max() verwenden, um eine Mindestgröße für das Padding festzulegen. Dieses Beispiel stammt von CSS Tricks, wo der Leser Caluã de Lacerda Pataca diese Idee geteilt hat: Ein Element soll bei größeren Bildschirmgrößen zusätzliche Abstände haben, bei kleineren Bildschirmgrößen jedoch einen Mindestabstand beibehalten. Verwenden Sie dazu calc() oder max() und subtrahieren Sie das Mindest-Padding von beiden Seiten des Elements: 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);
}

Flexible Typografie

Um flüssige Typografie zu ermöglichen, hat Mike Riethmeuller eine Technik populär gemacht, bei der die Funktion clamp() verwendet wird, um eine minimale und maximale Schriftgröße festzulegen und die Skalierung zwischen diesen Größen zu ermöglichen.

Vor clamp(), erforderte die Gestaltung der Schriftskalierung komplexe Stilstrings. Jetzt können Sie den Browser die Arbeit für Sie erledigen lassen. Legen Sie die akzeptable Mindestschriftgröß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 Breite des Darstellungsbereichs der Seite skaliert wird, bis sie die begrenzenden Mindest- und Höchstwerte erreicht. 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 innerer Elemente
• Übersicht über min(), max() und clamp() von Ahmad Shadeed