Fonction CSS clamp()

Exemple interactif

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">
    La taille de la police de ce texte varie en fonction de la taille de la
    police de base de la page, et de la taille de la fentre.
  </div>
</section>

Notez que l'utilisation de clamp() pour les tailles de police, comme dans ces exemples, permet de dfinir une taille de police qui augmente avec la taille de la fentre, mais qui ne descend pas en dessous d'une taille de police minimale ni ne dpasse une taille de police maximale. Cela a le mme effet que le code dans la typographie fluide (angl.) mais en une seule ligne, et sans utiliser de media queries.

Syntaxe

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

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

Paramtres

La fonction clamp(min, val, max) accepte trois expressions spares par des virgules comme paramtres.

min

La valeur minimale est la plus petite (la plus ngative) valeur. Il s'agit de la limite infrieure dans la plage des valeurs autorises. Si la valeur prfre est infrieure cette valeur, la valeur minimale est utilise.

val

La valeur prfre est l'expression dont la valeur est utilise tant que le rsultat se situe entre les valeurs minimale et maximale.

max

La valeur maximale est la plus grande (la plus positive) expression laquelle la valeur de la proprit est attribue si la valeur prfre est suprieure cette limite suprieure.

Les expressions peuvent tre des fonctions mathmatiques (voir calc() pour plus d'informations), des valeurs littrales, d'autres expressions qui valuent un type d'argument valide (comme <length>), ou des fonctions min() et max() imbriques. Pour les expressions mathmatiques, vous pouvez utiliser l'addition, la soustraction, la multiplication et la division sans utiliser la fonction calc() elle-mme. Vous pouvez galement utiliser des parenthses pour tablir l'ordre des calculs si ncessaire.

Vous pouvez utiliser diffrentes units pour chaque valeur dans vos expressions et diffrentes units dans toute fonction mathmatique composant l'un des arguments.

Gardez l'esprit les aspects suivants lors de l'utilisation de la fonction :

• Les expressions impliquant des pourcentages pour les largeurs et hauteurs des colonnes de tableau, des groupes de colonnes de tableau, des lignes de tableau, des groupes de lignes de tableau et des cellules de tableau dans des tableaux disposition automatique et fixe peuvent tre traites comme si auto avait t dfini.
• Il est permis d'imbriquer les fonctions max() et min() en tant que valeurs d'expression, auquel cas les fonctions internes sont traites comme des parenthses de base. Les expressions sont des expressions mathmatiques compltes, vous pouvez donc utiliser l'addition, la soustraction, la multiplication et la division directement sans utiliser la fonction calc() elle-mme.
• L'expression peut tre des valeurs combinant les oprateurs d'addition ( + ), de soustraction ( - ), de multiplication ( * ) et de division ( / ), en utilisant les rgles de priorit des oprateurs standard. Assurez-vous de mettre un espace de chaque ct des oprandes + et -. Vous pouvez utiliser diffrentes units pour chaque valeur dans votre expression. Vous pouvez galement utiliser des parenthses pour tablir l'ordre des calculs si ncessaire.
• Souvent, vous voulez utiliser min() et max() dans une fonction clamp().

Valeur de retour

clamp(MIN, VAL, MAX) est rsolu comme max(MIN, min(VAL, MAX)).

En fonction des paramtres fournis, la fonction retourne <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer>.

Syntaxe formelle

<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        

Accessibilit

Lorsque clamp() est utilis pour contrler la taille du texte, assurez-vous que la valeur maximale autorise est une unit de longueur relative qui n'est pas infrieure deux fois la valeur minimale autorise, par exemple 

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

Cela permet de s'assurer que la taille du texte peut augmenter d'au moins 200 % si la page est zoome.

• Comprendre le WCAG sur MDN, explications de la rgle 1.4
• Comprendre le critre de succs 1.4.4 : Redimensionner le texte | WAI | W3C (angl.)

Exemples

Comparer min(), max() et clamp()

Dans cet exemple, nous avons une page web qui utilise min(), max(), et clamp() pour dfinir des tailles de manire ractive.

L'exemple ajuste les tailles des lments de la page de trois manires :

• la longueur des lignes de texte
• la taille de la police des paragraphes
• la taille de la police des titres

Dans les trois cas, la page utilise une combinaison d'units relatives la fentre (vw et <percentage>), pour dfinir une taille qui varie en fonction de la largeur de la fentre, et d'une valeur qui n'est pas relative la fentre (rem et px) pour mettre en uvre des tailles minimales et/ou maximales.

L'exemple est disponible l'adresse https://mdn.github.io/css-examples/min-max-clamp/. Ouvrez-le dans une nouvelle fentre et essayez d'ajuster la largeur de la fentre.

La longueur des lignes (contrle par la width de l'lment HTML <body>) augmente mesure que la largeur de la fentre augmente, mais seulement jusqu' un certain point (1000px), et au-del de ce point, elle n'augmente plus. Nous utilisons min() pour dfinir une longueur de ligne maximale : elle peut tre infrieure 1000px, mais ne dpasse pas cette valeur. Cela est utile, car les lignes longues sont plus difficiles lire, donc nous voulons souvent limiter la longueur d'une ligne. Pour y parvenir, nous utilisons min(1000px, calc(70% + 100px)) : lorsque le rsultat du calcul bas sur le pourcentage dpasse 1000px, nous passons la valeur fixe de 1000px.

La taille de la police des paragraphes (contrle par la font-size de l'lment HTML <p>) diminue mesure que la fentre se rtrcit, mais seulement jusqu' un certain point, et au-del de ce point (le point o 1.2vw est infrieur 1.2rem), elle ne diminue plus : elle reste 1.2rem. Nous utilisons max() pour dfinir une taille de police minimale : la police peut dpasser 1.2rem mais ne descend jamais en dessous. Cela est utile, car un texte vraiment petit est difficile lire. Pour y parvenir, nous utilisons max(1.2rem, 1.2vw). Cela signifie que la font-size est dfinie 1.2rem, sauf si la valeur calcule de 1.2vw est suprieure celle de 1.2rem, auquel cas elle est dfinie 1.2vw.

La taille de la police des titres (contrle par la font-size de l'lment HTML <h1>) a une valeur relative la fentre avec la fois un seuil maximum et un seuil minimum. Pour y parvenir, nous utilisons clamp(1.8rem, 2.5vw, 2.8rem). La valeur relative la fentre est 2.5vw, mais elle est limite entre 1.8rem et 2.8rem, donc :

• si la valeur calcule de 2.5vw est infrieure 1.8rem, alors 1.8rem est utilise
• si la valeur calcule de 2.5vw est suprieure 2.8rem, alors 2.8rem est utilise

Cela empche le texte des titres de devenir trop petit dans une fentre trs troite, ou trop grand dans une fentre trs large.

HTML

<h1>Test basique ractif</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);
}

Spcifications

Compatibilit des navigateurs

Voir aussi

• La fonction calc()
• La fonction max()
• La fonction min()
• Apprendre : Valeurs et units CSS