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.
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
CSS-Werte und -Einheiten – Stufe 4calc()
,min()
,max()
undclamp()
können mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) als Komponentenwerte verwendet werden
Unterstützte Browser
min()
max()
clamp()
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 max()
führt dasselbe für den Maximalwert aus.
Wenn Sie clamp()
verwenden möchten, geben Sie drei Werte ein: einen Mindestwert, einen idealen Wert für die Berechnung 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 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.
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.
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.
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);
}
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.
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
- CSS-Werte und -Einheiten in der MDN
- CSS-Werte und ‐Einheiten – Spezifikation – Stufe 4
- CSS-Tricks-Artikel zur Breite des inneren Elements
- min(), max(), clamp() – Übersicht von Ahmad Shadeed
Titelbild von @yer_a_ Wizard auf Unsplash.