CSS-Funktion clamp()

Probieren Sie es aus

font-size: clamp(1rem, 2.5vw, 2rem);

font-size: clamp(1.5rem, 2.5vw, 4rem);

font-size: clamp(1rem, 10vw, 2rem);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    The font-size of this text varies depending on the base font of the page,
    and the size of the viewport.
  </div>
</section>

Wenn Sie clamp() wie in diesen Beispielen für Schriftgrößen verwenden, können Sie eine Schriftgröße festlegen, die mit der Größe des Viewports wächst, aber weder unter eine Mindestschriftgröße fällt noch eine maximale Schriftgröße überschreitet. Das hat denselben Effekt wie der Code in Fluid Typography, benötigt aber nur eine Zeile und keine Media Queries.

Syntax

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Parameter

Die Funktion clamp(min, val, max) akzeptiert drei durch Kommas getrennte Ausdrücke als Parameter.

min

Der Mindestwert ist der kleinste (am stärksten negative) Wert. Er bildet die Untergrenze des zulässigen Wertebereichs. Ist der bevorzugte Wert kleiner, wird der Mindestwert verwendet.

val

Der bevorzugte Wert ist der Ausdruck, dessen Wert verwendet wird, solange das Ergebnis zwischen dem Mindest- und dem Höchstwert liegt.

max

Der Höchstwert ist der größte (am stärksten positive) Ausdruckswert. Er wird der Eigenschaft zugewiesen, wenn der bevorzugte Wert diese Obergrenze überschreitet.

Die Ausdrücke können mathematische Funktionen (weitere Informationen finden Sie unter calc()), Literalwerte, andere Ausdrücke, die einen gültigen Argumenttyp ergeben (etwa <length>), oder verschachtelte Funktionen wie min() und max() sein. In mathematischen Ausdrücken können Sie Addition, Subtraktion, Multiplikation und Division verwenden, ohne die Funktion calc() selbst zu verwenden. Bei Bedarf können Sie mit Klammern die Reihenfolge der Berechnung festlegen.

Sie können für jeden Wert in Ihren Ausdrücken unterschiedliche Einheiten verwenden, auch innerhalb mathematischer Funktionen, aus denen sich die Argumente zusammensetzen.

Beachten Sie bei der Verwendung der Funktion Folgendes:

• Mathematische Ausdrücke mit Prozentwerten für Breiten und Höhen von Tabellenspalten, Tabellenspaltengruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen können sowohl bei Tabellen mit automatischem als auch mit festem Layout so behandelt werden, als wäre auto angegeben.
• Funktionen wie max() und min() dürfen als Ausdruckswerte verschachtelt werden. Die inneren Funktionen werden dabei wie einfache Klammern behandelt. Da es sich um vollständige mathematische Ausdrücke handelt, können Sie Addition, Subtraktion, Multiplikation und Division direkt verwenden, ohne die Funktion calc() selbst zu verwenden.
• Der Ausdruck kann Werte enthalten, die mit den Operatoren für Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) verknüpft sind. Dabei gelten die üblichen Regeln für die Vorrangfolge der Operatoren. Achten Sie darauf, vor und nach den Operatoren + und - jeweils ein Leerzeichen einzufügen. Sie können für die einzelnen Werte unterschiedliche Einheiten verwenden und bei Bedarf mit Klammern die Reihenfolge der Berechnung festlegen.
• Häufig ist es sinnvoll, min() und max() innerhalb einer clamp()-Funktion zu verwenden.

Rückgabewert

clamp(MIN, VAL, MAX) wird als max(MIN, min(VAL, MAX)) ausgewertet.

Abhängig von den übergebenen Parametern gibt die Funktion einen Wert vom Typ <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> zurück.

Formale Syntax

<clamp()> = 
  clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Barrierefreiheit

Wenn Sie clamp() zur Steuerung der Textgröße verwenden, achten Sie darauf, dass der maximal zulässige Wert eine relative Längeneinheit verwendet und mindestens doppelt so groß wie der minimal zulässige Wert ist, zum Beispiel:

font-size: clamp(1rem, 2.5vw, 2rem);

So lässt sich sicherstellen, dass der Text beim Zoomen der Seite auf mindestens 200 % vergrößert werden kann.

• MDN: WCAG verstehen – Erläuterungen zu Richtlinie 1.4
• Erfolgskriterium 1.4.4 verstehen: Textgröße ändern | WAI | W3C

Beispiele

Vergleich von min(), max() und clamp()

In diesem Beispiel verwendet eine Webseite min(), max() und clamp(), um Größen responsiv festzulegen.

Das Beispiel passt die Größen von Seitenelementen auf drei Arten an:

• die Länge der Textzeilen
• die Schriftgröße des Absatztexts
• die Schriftgröße des Überschriftentexts

In allen drei Fällen kombiniert die Seite Viewport-relative Einheiten (vw und <percentage>), um eine von der Viewport-Breite abhängige Größe festzulegen, mit einem nicht Viewport-relativen Wert (rem und px), um Mindest- und/oder Höchstgrößen festzulegen.

Das Beispiel finden Sie unter https://mdn.github.io/css-examples/min-max-clamp/. Öffnen Sie es in einem neuen Fenster und ändern Sie die Fensterbreite.

Die Zeilenlänge (gesteuert durch die Eigenschaft width des Elements <body>) nimmt mit der Fensterbreite zu, jedoch nur bis zu einem bestimmten Wert (1000px). Darüber hinaus wächst sie nicht weiter. Mit min() legen wir eine maximale Zeilenlänge fest: Sie kann unter 1000px liegen, überschreitet diesen Wert aber nicht. Das ist hilfreich, weil lange Zeilen schwerer zu lesen sind und wir ihre Länge daher oft begrenzen möchten. Dafür verwenden wir min(1000px, calc(70% + 100px)): Sobald das Ergebnis der prozentbasierten Berechnung 1000px überschreitet, wird stattdessen der feste Wert 1000px verwendet.

Die Schriftgröße des Absatztexts, gesteuert durch die Eigenschaft font-size des Elements <p>, nimmt ab, wenn das Fenster schmaler wird. Ab einem bestimmten Punkt – wenn 1.2vw kleiner als 1.2rem ist – wird sie jedoch nicht weiter verkleinert, sondern bleibt bei 1.2rem. Mit max() legen wir eine Mindestschriftgröße fest: Die Schrift kann größer als 1.2rem werden, aber nie kleiner. Das ist hilfreich, weil sehr kleiner Text schwer zu lesen ist. Dafür verwenden wir max(1.2rem, 1.2vw). Das bedeutet, dass font-size auf 1.2rem gesetzt wird, sofern der berechnete Wert von 1.2vw nicht größer als 1.2rem ist. In diesem Fall wird stattdessen 1.2vw verwendet.

Die Schriftgröße des Überschriftentexts, gesteuert durch die Eigenschaft font-size des Elements <h1>, hat einen Viewport-relativen Wert mit einer Unter- und einer Obergrenze. Dafür verwenden wir clamp(1.8rem, 2.5vw, 2.8rem). Der Viewport-relative Wert ist 2.5vw, wird aber auf den Bereich zwischen 1.8rem und 2.8rem begrenzt:

• Ist der berechnete Wert von 2.5vw kleiner als 1.8rem, wird 1.8rem verwendet.
• Ist der berechnete Wert von 2.5vw größer als 2.8rem, wird 2.8rem verwendet.

So wird verhindert, dass der Überschriftentext in einem sehr schmalen Fenster zu klein oder in einem sehr breiten Fenster zu groß wird.

HTML

<h1>Basic responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

CSS

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• calc()
• max()
• min()
• Lernen: CSS-Werte und -Einheiten