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

Hier erfahren Sie, wie Sie mit diesen gut unterstützten CSS-Funktionen die Größe von Elementen steuern, den richtigen Abstand einhalten und eine fließende Typografie implementieren.

Una Kravets

Da responsives Webdesign immer differenzierter wird, wird CSS ständig weiterentwickelt, 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 reaktionsschneller erstellt werden können. Mit diesen Funktionen können Sie die Größe und 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()

Unterstützte Browser

  • 79
  • 79
  • 75
  • 11.1

Quelle

max()

Unterstützte Browser

  • 79
  • 79
  • 75
  • 11.1

Quelle

clamp()

Unterstützte Browser

  • 79
  • 79
  • 75
  • 13.1

Quelle

Nutzung

Sie können min(), max() und clamp() auf der rechten Seite eines CSS-Ausdrucks verwenden, wenn dies sinnvoll ist. Für min() und max() stellen Sie eine Argumentliste von Werten bereit. Der Browser ermittelt dann, welcher der kleinste oder größte ist. Bei 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 „min()“ wählt den Minimalwert aus einer Liste von Optionen in dieser Codepen-Demo aus.

Die Funktion max() führt dasselbe für den Maximalwert aus.

Mit der Funktion „max()“ wird ein Wert aus einer Liste von Optionen in dieser Codepen-Demo ausgewählt.

Wenn Sie clamp() verwenden möchten, geben Sie drei Werte ein: einen Mindestwert, einen idealen Wert für die Berechnung und einen Höchstwert.

Die Funktion „clamp()“ hält ihren Wert zwischen dem in dieser Codepen-Demo angegebenen Mindest- und 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 allein (z. B. in font-size: max(0.5vw, 50%, 2rem)), mit calc() (wie in font-size: max(calc(0.5vw - 1em), 2rem)) oder komponiert (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 dem Artikel The Elements of Typographic Style von Robert Bringhurst "wird alles zwischen 45 und 75 Zeichen allgemein als zufriedenstellende Zeilenlänge für eine einspaltige Seite mit einer Serifenschriftseite in Textgröße angesehen."

Damit Ihre Textblöcke zwischen 45 und 75 Zeichen breit bleiben, verwenden Sie clamp() und die Einheit ch (Zeichen im Abstand von 0 Zeichen):

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

Verwenden Sie die Funktion „clamp()“, um eine Mindest- und eine maximale Breite festzulegen. Siehe Demo zu Codepen.

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

Verwenden Sie die Funktion „min()“, um eine maximale Breite festzulegen.

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

Legen Sie mit der Funktion „max()“ eine Mindestbreite fest.

Abstand verwalten

Sie können auch max() verwenden, um eine minimale Abstandsgröße festzulegen. Dieses Beispiel stammt von CSS-Tricks, in denen der Leser Caluã de Lacerda Pataca auf diese Idee kam: Ein Element sollte bei größeren Bildschirmen einen zusätzlichen Abstand haben, bei kleineren Bildschirmen aber einen Mindestabstand. Verwenden Sie dazu calc() oder max() und subtrahieren Sie den minimalen Abstand von beiden Seiten des Elements: calc((100vw - var(--contentWidth)) / 2) oder max(2rem, 50vw - var(--contentWidth) / 2). In Ihrem Stylesheet sollte dies so aussehen:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Legen Sie mit der Funktion „max()“ einen minimalen Abstand für eine Komponente fest. Siehe Demo zu Codepen.

Fließende Typografie

Um die Fließende Typografie zu aktivieren, hat Mike Riethmeuller ein Verfahren bekannt, das mit der Funktion clamp() eine minimale und maximale Schriftgröße festlegt und die Skalierung zwischen diesen Größen ermöglicht.

Verwenden Sie „clamp()“, um eine fließende Typografie zu erstellen. Siehe Demo zu Codepen.

Für die Entwicklung der Schriftskalierung mit clamp(), waren komplexe Stilstrings erforderlich. Jetzt können Sie den Browser die Arbeit für Sie erledigen lassen. Legen Sie die zulässige 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 mit sehr wenig Code eine Typografie, die mit der Breite des Darstellungsbereichs der Seite skaliert wird, bis die Grenzwerte für die Mindest- und Höchstwerte erreicht werden:

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

Weitere Ressourcen

Titelbild von @yer_a_ Wizard auf Unsplash.