Clamptastic: Die Chrome-Erweiterung zum einfachen Berechnen der CSS-Property clamp()

Beim Umsetzen von responsiven Webseiten gibt es einen viel eleganteren Weg um z.B. Schriften und Bilder/Icons zu skalieren, als diesen bei fixen Breakpoints eine bestimmte Größe zu geben. Nämlich die CSS-Property clamp(). Mit dieser kann man eine Größe anhand eines Minimal-Werts, eines bevorzugten Werts und eines Maximalwerts festlegen. Klingt erstmal einfach, doch um das ganze anständig skalieren zu lassen muss man den bevorzugten Wert berechnen und schnell sieht ein Clamp-Definition dann mal so aus: clamp(1.25rem, 1.147rem + 0.435vw, 1.5rem);

Um das ermitteln der passenden Werte zu vereinfachen, habe ich die kleine Chrome Extension Clamptastic geschrieben.
Klar gibt es dafür schon haufenweise Online-Rechner, aber in einer Browser-Extension ist das ganze nochmal etwas einfacher und mit ein paar Klicks erledigt.

Wie funktioniert clamp()?

Wie oben schon beschrieben benötigt clamp drei Werte:

1. Minimaler Wert
2. Bevorzugter Wert
3. Maximaler Wert

Für das Beispiel clamp(1.25rem, 1.147rem + 0.435vw, 1.5rem); bedeutet dies, bei einer Root-Font-Size (also die Definition von 1rem) von 16px:

1. Der Minimumwert ist 1.25rem, was in diesem Beispiel 20px entspricht (16px * 1.25). Sollte der bevorzugte Wert kleiner als dieser Wert sein, wird nicht weiter runterskaliert.
2. Der bevorzugte Wert setzt sich aus 1.147rem, was ~18,4px entspricht (16px * 1.147), und einer dynamischen Anpassung basierend auf der Viewport-Breite (vw) zusammen. Genauer ist dieser Wert für einen Viewport von 380px bis 1300px ausgelegt.
   (16px * 1.147rem) + (380px * 0.435rem /100) = 20.005px
(16px * 1.147rem) + (1300px * 0.435rem / 100) = 24.007px
Somit sind die Werte 1.147rem und 0.435vw nicht zufällig gewählt, sondern zielen genau auf eine proportionale Anpassung in dieser Viewport-Range ab.
3. Der Maximale Wert ist 1.5rem und entspricht somit 24px (16px * 1.5)

Wie man schnell erkennt lässt sich der minimale und maximale Wert schnell ermitteln wohingegen die bevorzugte Größe immer noch etwas mysteriös bleibt. Damit man nicht immer irgendwelche Formeln auspacken muss um sich für solche Fälle den korrekten Wert für den Bevorzugten Wert zu ermitteln gibt es Clamp-Calculator.

Clamp direkt im Browser errechnen mit Clamptastic

Es spart zwar schon Zeit Web-Rechner für Clamp zu verwenden, doch muss man dafür dann doch immer nochmal extra einen Tab öffnen bevor man loslegen kann. Und genau hier dachte ich mir: Das muss doch irgendwie einfacher gehen und ich entschloss mich mich mal etwas mit Chrome-Extensions zu beschäftigen, da ich keine Extension für Clamp finden konnte.

Was macht Clamptastic anders als andere Rechner?

Eigentlich garnicht so viel. Man kann den Rechner mit der Root-Font-Size, der Minimal- und Maximal-Größe sowie Min- und Max-Viewport füttern und schon spuckt es die passende Clamp-Definition aus.

Aber gegenüber anderen Rechnern ist Clamptastic direkt mit nur einem Klick im Browser einsatzbereit.
Und die Extension zieht sich zusätzlich schon die Root-Font-Size aus dem aktuellen Tab, also ein Wert weniger den man eingeben muss.

Clamptastic installieren

Clamptastic lässt sich ganz einfach über den Chrome Web Store installieren.