Die CSS-Funktion clamp() richtig einsetzen

Als Softwareentwickler aus Leipzig entdecken wir gerne innovative Funktionen und Techniken. Relativ neu ist die CSS-Funktion clamp(), mit der ein minimaler und ein maximaler Wert, sowie ein dynamischer Zwischenwert ("preferred value") festgelegt werden kann. Die Funktion berechnet dann den tatsächlich verwendeten Wert auf der Grundlage der verfügbaren Breite (oder Höhe) des Anzeigebereichs. Wir nutzen clamp() regelmäßig in der Frontend-Entwicklung. Damit vermeiden wir, dass etwa bestimmte Elemente auf kleineren Geräten unlesbar werden oder sich der Wechsel zwischen Geräteklassen und Breakpoints steif und unnatürlich anfühlt.

Verbreitung und Syntax von clamp()

Laut caniuse.com wird clamp() mittlerweile von knapp 95% der Browser unterstützt, inkl. der aktuellen Versionen von Firefox, Chrome und Safari. Browser ohne Unterstützung "überspringen" aufgrund der Natur von CSS einfach diese Funktionen, weshalb clamp() idealerweise immer in Kombination mit einem zuvor deklarierten Fallback-Wert verwendet werden sollte.

Die Syntax der Funktion lautet wie folgt:

Die Werte können in beliebigen Einheiten angegeben werden (z.B. Pixel, Prozent oder "rem") und für verschiedene CSS-Eigenschaften verwendet werden, einschließlich Breite (width), Höhe (height) und Schriftgröße (font-size, s. "Fluide Typography mit clamp()").

Ein Beispiel: Sie möchten ein Rechteck erstellen, das immer 60% der verfügbaren Breite des Anzeigebereichs einnimmt, aber nicht schmaler als 300px und nicht breiter als 600px sein darf. Mit der Funktion clamp() kann dies wie folgt realisiert werden:

Auf diese Weise wird die Breite des Rechtecks automatisch an die verfügbare Breite des Anzeigebereichs angepasst, während sie gleichzeitig nie kleiner als 300px oder größer als 600px ist. Durch die Verwendung der relativ modernen Viewport-Unit "vw" ergibt sich der dynamische Zwischenwert in Relation zu der aktuellen Breite des Browserfensters.

Die CSS-Funktion clamp() ist somit eine elegante und flexible Möglichkeit, dynamisch skalierende Texte oder sogar Grids zu gestalten. Auf Codepen finden sich viele Beispiele, wie clamp darüber hinaus angewendet werden kann, etwa in dieser Demo.

Fluide Typographie mit clamp()

Die Verwendung von clamp() für Schriftgrößen ermöglicht die Definition einer font-size, welche mit der Größe des Browserfensters wächst, aber nicht unter eine minimale oder über eine maximale Schriftgröße hinauswächst. Entspräche eine Überschrift laut Screendesign auf einem mobilen Gerät 1.5rem und auf dem Desktop 2rem, so könnte man mithilfe der folgenden Zeile CSS eine fluide Skalierung zwischen beiden Werten auf dazwischen liegenden Geräteklassen implementieren:

Hervorzuheben ist die Angabe der Schriftgrössen in der rem-Einheit ("root em") statt in Pixeln. 1 rem entspricht standardmäßig 16 Pixeln, wobei dieser Wert etwa von Anwender:innen mit reduzierter Sehschärfe im Browser angepasst werden kann und somit die Barrierearmut von Anwendungen stärkt.

Idealerweise sollte daher auch der dynamische Zwischenwert unter Berücksichtigung von rem berechnet werden. Da die hierzu benötigte Formel nicht ganz trivial ist, empfiehlt sich die Nutzung frei zugänglicher CSS Clamp Generatoren, wie zum Beispiel Adrian Bece's "Modern fluid typography editor" oder den "Font-size Clamp Generator".

clamp() und Barrierefreiheit

Bei robole legen wir großen Wert auf Barrierefreiheit.

Eine Schriftgröße, die ausschließlich in vw- oder px-Einheiten angegeben wird, ist wie zuvor erwähnt nur bedingt barrierearm. Wenn nur ein dynamischer Wert als preferred value verwendet wird, kann die Schriftgröße im Browser nicht mehr vergrößert werden, was einen WCAG-Fehler darstellt. 

Wir empfehlen, einen Kompromiss zwischen einem dynamischen Wert (vw) und einem statischen Wert (z.B. rem) als bevorzugten Wert zu verwenden. Diese Kombination hat in der Regel keinen großen Einfluss auf das Skalierungsverhalten und gewährleistet gleichzeitig eine bessere Zugänglichkeit der Seite.

Warum wir die CSS-Funktion clamp() gerne benutzen

"Clamp stellt gewissermaßen einen Meilenstein im responsiven Webdesign dar", erklärt unser Frontend-Entwickler Felix. "Trotz des weiter wachsenden Dschungels an Geräteklassen und Screengrößen erstellen wir damit fluide Layouts deutlich schneller und benötigen weniger Regeln für spezifische Breakpoints. Das macht unsere Arbeit effizienter und verbessert die User Experience (UX)."

Sie haben Interesse an einer modernen und sauberen Programmierung Ihrer Webanwendung? Wir freuen uns auf Ihre Anfrage!