CSS Clamp() für responsive Webseiten

Von Ivaylo Ivanov 29-10-2021 Selbst gemacht, Programmierung, UI / UX-Design 15 Minuten

In Anbetracht der unterschiedlichen Darstellungsformen und Bildschirmgrößen, in denen Nutzer Webseiten betrachten – von Handys über Tablets bis hin zu Laptops und Desktops – sind responsive Webseiten im heutigen Webdesign sehr zu empfehlen.

Wenn es um Flexibilität und flüssige Layouts geht, ist es wichtig, die Kontrolle über das Raster, die Breiten, Höhen, Bilder usw. zu behalten. CSS-Funktionen – wie min(), max() und Media Queries – sind wichtige Werkzeuge, mit denen sich Eigenschaften und Elemente unter bestimmten Bedingungen an verschiedene Größen anpassen lassen. Dies erhöht die Responsivität einer Webseite.

Um die Responsivität zu verbessern und fließende Übergänge zu schaffen, sind Entwickler immer auf der Suche nach Funktionen und Eigenschaften, die es ihnen erleichtern, anpassungsfähige und reaktionsfähige Webseiten mit möglichst wenig Code zu schreiben.
Die Weiterentwicklung von CSS bietet eine neue Funktion namens clamp(). Mit dieser Funktion können wir einen Mindestwert, einen bevorzugten Wert und einen Höchstwert in einer einzigen Codezeile angeben.

Um clamp() richtig zu verstehen, werden wir zunächst seine Vorgänger – min() und max() – untersuchen.

Min()

Die Funktion min() ermöglicht es, den kleinsten Wert aus einer Liste von durch Kommas getrennten Ausdrücken als Wert einer CSS-Eigenschaft zu deklarieren. Der kleinste angegebene Wert kann auch ein einzelner Ausdruck sein.
Wenn wir einen min()-Wert festlegen, berechnet der Browser den Wert und passt die Eigenschaft entsprechend an, bis er den Minimalwert erreicht und dann stoppt.

<DOCTYPE html> 
<html> 
  <body> 
    <p>Dies ist ein Beispiel für min() mit einer Mindestbreite von 200px<</p> 
  </body> 
</html>

*{ 
  box-sizing: border-box; 
} 
 
p{ 
  background: pink; 
  width: min(200px); 
  height: 100px; 
  padding: 20px; 
  margin:0 auto; 
  font-size: 15px;         
}

Wir setzen die Mindestbreite hier auf 200px, sodass die Breite nie größer werden kann als diese.

<DOCTYPE html> 
<html> 
  <body> 
    <p>Dies ist ein Beispiel für min() mit einer Mindestbreite von 50vw und 500px</p> 
  </body> 
</html>

*{ 
  box-sizing: border-box; 
} 
 
p{ 
  background: pink; 
  width: min(50%, 500px); 
  height: 100px; 
  padding: 20px; 
  margin:0 auto; 
  font-size: 15px;         
}

In diesem Beispiel liegt die Mindestbreite zwischen 50% und 500px. Der Browser wählt zwischen den beiden Bezeichnungen auf der Grundlage des Browserfensters. Wenn er berechnet, dass 50% weniger als 500px ist, verwendet er „50%“ und ignoriert die „500px“. Wenn die Berechnung des Browsers ergibt, dass 500px an irgendeiner Stelle weniger als 50 % des Browserfensters ausmachen, wählt er 500px anstelle des Prozentwerts.

Max()

Max() ist das Gegenteil von min(). Diese Funktion nimmt einen oder mehrere durch Komma getrennte Ausdrücke oder Werte als Parameter an. Der größte Wert in einer max()-Funktion ist derjenige, den das Element/die Eigenschaft maximal annimmt.
Betrachten wir das gleiche Beispiel wie min().

width: max(50%, 500px)

Der Browser wählt entweder 50% oder 500px, da dies der maximale Wert ist.
Max() und Min() schließen sich nicht gegenseitig aus. Wir können sie für dasselbe Element/dieselbe Eigenschaft gleichzeitig verwenden.

h1{ 
  background: pink; 
  height: 100px; 
  width: 300px; 
  min-width: 100px; 
  max-width: 500px; 
}

Clamp(): Wie funktioniert das?

Min() und max() haben Entwicklern jahrelang gute Dienste geleistet, aber clamp() ist ein Fortschritt in diesem Bereich. Laut MDN Web Docs,

Die CSS-Funktion clamp() klemmt einen Wert zwischen einer oberen und einer unteren Grenze. clamp() ermöglicht die Auswahl eines mittleren Wertes innerhalb eines Wertebereichs zwischen einem definierten Minimum und Maximum.
Die Funktion clamp() kann überall dort verwendet werden, wo eine Länge <length>, Frequenz <frequency>, Winkel <angle>, Zeit <time>, Prozent <percentage>, Zahl <number> oder ganzzahliger Wert <integer> zulässig ist.

Clamp() bietet eine robustere Methode zur Definition von Größen, Längen und Breiten mit dem Zusatz eines bevorzugten Wertes. Anstatt die Werte min() und max() getrennt zu schreiben, werden sie mit clamp() in einer Zeile beschrieben.

Die Syntax für clamp() lautet wie folgt: clamp(min, bevorzugter Wert, max)

Wir deklarieren zuerst den Min-Wert, dann den Vorzugswert und dann den Max-Wert, in dieser Reihenfolge. Wie bei den Funktionen min() und max() ist der Minimalwert der kleinste Wert, den wir dem Element zuweisen wollen – er kann nicht unterschritten werden.
Der Maximalwert ist der größte Wert, der dem Element zugewiesen wird. Die Eigenschaft kann nicht über diesen Maximalwert hinausgehen, unabhängig von der Browserfenstergröße oder der Bildschirmgröße.
Der bevorzugte Wert liegt zwischen den Werten „max“ und „min“. Normalerweise wird er als Standardwert festgelegt.

Clamp() funktioniert unter bestimmten Bedingungen, die durch die Werte „min“, „max“ und „preferred“ definiert sind. Wenn wir eine Clamp-Funktion deklarieren, passt sich der Browser an und setzt sich auf den „min“-Wert, wenn der bevorzugte Wert niedriger als der Minimalwert ist; er setzt sich auf den „max“-Wert, wenn der bevorzugte Wert höher als der „max“-Wert ist.
Der Browser verwendet den bevorzugten Wert, wenn dieser zwischen dem Mindest- und dem Höchstwert liegt.

Schauen wir uns die folgenden Beispiele an.

Clamp() mit Schriftarten

Die Anpassung von Schriftarten an unterschiedliche Bildschirmgrößen ist ziemlich schwierig. Wenn wir die Schriftgröße auf dem Desktop auf „24px“ einstellen, mag das gut aussehen. Aber auf einem Handy wäre der Text zu groß und die Benutzer werden es schwierig finden, den Inhalt zu verstehen.

Mit clamp() können wir verschiedene Werte einstellen, um zwischen verschiedenen Ansichten responsive zu wechseln. So wird unser Text in einem bestimmten Browserfenster je nach Bildschirmgröße kleiner oder größer.

<html> 
<body>
  <div id="clampexample">
    <h1>Title Here</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> 
    </div>
</body> 
</html>

#clampexample{ 
  background: burlywood; 
  padding: 1rem; 
  width: 50vw; 
  margin:auto; 
} 

p{ 
  font-size:clamp(10px, 2vw, 18px); 
}

Wenn wir den Browser an die Bildschirmgrößen anpassen, stellen wir fest, dass der Text kleiner wird, wenn sich der Browser zusammenzieht, aber nie unter 10px geht. Dann wird er größer, wenn wir erweitern, aber nie größer als 18px, da dies die angegebenen Werte sind.

Clamp() mit Breitenangaben

<html> 
<body> 
  <div id="clampexample"> 
    <h1>Title Here</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> 
  </div>
</body> 
</html>

p{ 
  background: burlywood; 
  padding: 1rem; 
  width: clamp(100px, 50vw, 500px); 
  margin: auto; 
}

In der obigen Demonstration setzen wir unsere Absatzbreite auf 50vw des Browsers. Unser Mindestwert ist 100px und max - 500px. Wenn wir den Browser vergrößern und verkleinern, wächst die Breite des Absatzes bis zu 500px und stoppt oder schrumpft auf 100px und stoppt. Andernfalls wird er einfach bei 50vw angezeigt.

Clamp() mit Bildern

Für Webentwickler ist die Kontrolle darüber, wie Bilder auf einer Webseite und auf verschiedenen Medienbildschirmen erscheinen, Teil eines berüchtigten Kampfes. Anders als Text haben Bilder feste Breiten und Höhen. Wenn sie nicht effektiv verwaltet werden, können sie unscharf, verzogen oder zu klein mit vielen umgebenden Leerräumen erscheinen.
Die Verwendung von clamp() ist ein effizienter Weg, um die Darstellung von Bildern für verschiedene Anzeigegrößen zu beeinflussen und zu verwalten.
Bevor diese nützliche Funktion zur Verfügung stand, mussten wir Bilder in „divs“ einfügen und dann das „div“ manipulieren, um die Bildposition anzupassen. Mit clamp() können wir nun direkt an der Anzeige von Bildern arbeiten, was uns eine flexiblere Positionierung ermöglicht, und wir benötigen dabei weniger Code.

Clamp() für Hero Images

Hero Images haben einen ähnlichen Zweck wie Webbanner. Sie nehmen in der Regel 100 % der Breite des Browsers ein. Allerdings können wir diese Bilder mit Einschränkungen versehen, damit sie nicht zu groß oder zu klein wirken.

<html> 
  <body> 
    <img src="https://www.online-image-editor.com/styles/2019/images/power_girl.png" alt="girlonline">
  </body> 
</html>

img{ 
  width: clamp(600px, 100%, 1400px) 
}

Clamp() für Bildraster

Bildraster sind im Webdesign sehr beliebt und mit clamp() können wir die max und min Höhe für unsere Bilder festlegen. Wenn wir genau wissen, wie die Menschen die Bilder wahrnehmen, die wir zuvor angepasst haben, machen wir einen entscheidenden Schritt in Richtung eines perfekten Kundenerlebnisses. Unsere Grafiken sollten immer gut zu sehen sein und sich perfekt an jede Bildschirmgröße anpassen.
Unsere Galerie wird mit einer Flexbox zusätzlich zu clamp() erstellt

<body> 
<ul class="imggallery"> 
  <li> 
    <img 
      src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" 
      alt="" 
    /> 
  </li> 
  <li> 
    <img 
      src="https://www.online-image-editor.com/styles/2019/images/power_girl.png" 
      alt="" 
    /> 
  </li> 
  <li> 
    <img 
      src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" 
      alt="" 
    /> 
  </li> 
  <li> 
    <img 
      src="https://www.online-image-editor.com/styles/2019/images/power_girl.png" 
      alt="" 
    /> 
  </li> 
  <li> 
    <img 
      src="https://www.online-image-editor.com/styles/2019/images/power_girl.png" 
      alt="" 
    /> 
  </li> 
</ul> 
</body>

body { 
  margin: 0.5rem; 
  background-color: rgb(32, 19, 19); 
}
img { 
  object-fit: cover; 
  width: 100%; 
  height: 100%; 
}
.imggallery { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
} 
.imggallery li { 
  flex: 1 1 15rem; 
  height: clamp(150px, 30vw, 500px); 
}

Fließende/Content-Bilder

Bildergalerien sind nur eine der vielen Möglichkeiten, wie wir Bilder auf responsiven Webseiten darstellen können. Eine weit verbreitete Praxis ist die Anordnung von Bildern nebeneinander mit etwas Text um sie herum.
Auf kleineren Bildschirmen müssen wir möglicherweise dasselbe Format beibehalten. Es ist nicht nötig, dass das Bild den gesamten Bildschirm ausfüllt und der Text darunter fließt.

<html> 
  <body> 
    <div class="imgtext"> 
      <img src="https://www.online-image-editor.com/styles/2019/images/power_girl.png" alt="girlonline"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div> 
  </body> 
</html>

.imgtext img{ 
  float: left;
  width: clamp(200px, 50vw, 500px); 
}

In diesem Beispiel wird deutlich, dass das Bild das gleiche Format beibehält und auf der linken Seite der Webseite bleibt, während der Text es umgibt. Wenn die Bildschirmgröße kleiner wird, wird auch das Bild kleiner, aber nicht kleiner als 200 Pixel.

Clamp() mit CSS-Raster-Layout

CSS Grid ist ein trendiges Rasterlayout. Es ist ein zweidimensionales Layout, das es Entwicklern ermöglicht, responsive Inhalte in Zeilen und Spalten anzuordnen. CSS-Grid funktioniert hauptsächlich mit einer Funktion namens minmax().
Wir verwenden diese CSS-Funktion direkt im Grid-Code, um Abmessungen und Größen für jede Vorlage zu erstellen. Sie funktioniert genau wie die bewährten min() und max(), die wir gerade untersucht haben.
Wir können Grid-Vorlagen wie folgt festlegen: Der Minimalwert ist 150px und der Maximalwert - 25%. Die nächste Spalte erhält einen Bruchteil. Beispiel folgend:

display: grid;
grid-template-columns:  minmax(150px, 25%) 1fr;

Clamp() funktioniert nicht auf der Grid-Template-Spalte, obwohl dies eine interessante Möglichkeit wäre, ein Grid zu strukturieren. Es funktioniert jedoch bei einer Grid-Lücke – dem Zwischenraum zwischen den Spalten. Nachdem wir die Spalten und Zeilen deklariert haben, verwenden wir clamp(), um den Abstand zwischen ihnen zu steuern.

<body> 
  <div class="section"> 
    <div class="firstsection">
      This is the first column that is set to 150px and 25% 
    </div> 
    <div class="secondsection">
      This is the second column that is set to 1fr  
    </div> 
  </div> 
</body>

.section{ 
  display: grid; 
  grid-template-columns: minmax(150px, 25%) 1fr; 
  grid-template-rows: 300px; 
  grid-gap: clamp(5px, 2vw, 20px);   
}
.firstsection{ 
  background-color: cadetblue; 
  padding: 3em; 
}
.secondsection{ 
  background-color: rgb(177, 164, 116); 
  padding: 3em; 
}

Clamp() und Media Queries

Media Queries und ihre jeweiligen Haltepunkte sind die ultimativen Funktionen für responsive Webdesigns. Die Verwendung von clamp() mit Media Queries ist eine fantastische Möglichkeit, weiche und fließende Übergänge zwischen Haltepunkten zu schaffen, da die Haltepunkte von Media Queries allein dazu neigen, abrupt zu sein.

<body>
  <p>This is a new text</p>
</body>

@media screen AND (min-width: 400px) { 
  p{ 
    font-size: clamp(10px, 14px, 20px) 
  } 
}

Calc() mit Clamp()

Min() und max() arbeiten umfassend mit calc(). Mit calc() können wir Wertberechnungen durchführen. Das Ergebnis dieser Operationen ist der Ausdruckswert.

width: calc(100% - 80px)

Mit clamp() und calc() können wir Operationen mit kommagetrennten Ausdrücken durchführen, indem wir einen der vier folgenden Operatoren verwenden: Addition, Multiplikation, Subtraktion und Division. Wir empfehlen, calc() innerhalb von clamp() zu schachteln, um optimale Ergebnisse zu erzielen.

<body> 
  <p>Dies ist ein calc-Text</p>
</body>

p{
  font-size: clamp(12px, calc(0.54vw + 14px), 20px); 
}

In dieser Demonstration wird calc() auf den bevorzugten Wert angewendet. Wir können calc() mit clamp() auf jede beliebige/n Einheit/Wert anwenden und die gleiche Rangfolge beibehalten: Minimalwert, bevorzugter Wert und Maximalwert.

Fazit

Die Funktion clamp() kann schnell zu einer effizienten Methode werden, um den ultimativen responsiven Code zu schreiben. Einer der größten Vorzüge von clamp() ist sein Einfluss auf verschiedene Elemente und Eigenschaften: Schriftarten, Breiten, Längen, Farben, Medienabfragen usw. Clamp() kann auch ein entscheidendes Element in praktischen Designlösungen für fließende Topografie sein.
Die Popularität und Benutzerfreundlichkeit von Clamp() führte natürlich zu einer umfangreichen Browserunterstützung. In kurzer Zeit wurde diese Funktion Teil aller wichtigen Browser (außer IE). Wir hoffen, dass unser praktischer Überblick über diese clevere Funktion bald auch Ihr digitales Toolset bereichert.

CSS Clamp() für responsive Webseiten