Qu'est-ce que CLAMP () dans CSS (et comment l'utiliser)

Si vous avez déjà essayé de faire en sorte que votre site soit beau sur les téléphones et les moniteurs géants, vous avez vu comment l'espacement se casse, les polices se rétrécissent considérablement ou évoluent excessivement, et que les éléments submergent ou disparaissent. Pour réparer tout cela, vous finissez par écrire une longue liste de requêtes multimédias pour une mise en page. C'est là que Clamp () peut aider.

Il s'agit d'une fonction CSS qui simplifie les tailles de réglage. Au lieu de définir plusieurs valeurs à des points d'arrêt fixes, il vous permet de définir un minimum, un maximum de préférence et un maximum afin que vos éléments évoluent de manière fluide à mesure que l'écran change. La meilleure partie est qu'ils restent dans vos limites définies, il n'y a donc pas d'incohérences de mise en page.

Dans cet article, nous expliquerons comment Clamp () fonctionne, pourquoi il peut souvent être plus efficace que les requêtes multimédias, et comment Divi 5 vous permet de l'utiliser sans écrire une seule ligne de code!

Qu'est-ce que CLAMP ()

Clamp () est une fonction native dans CSS, utilisée pour définir des valeurs réactives qui ajustent en fonction de la taille de l'écran. Au lieu de coder en dur un seul nombre, vous donnez au navigateur une plage avec laquelle travailler - vous définissez une valeur minimale, une valeur préférée évolutive et une valeur maximale. Ceux-ci rendent votre mise en page plus flexible, et vous n'avez pas à écrire plusieurs requêtes multimédias pour chaque taille d'écran.

Comprenons cela avec un exemple de taille de police fluide qui augmente / diminue en fonction de la taille de l'écran.

font-size: clamp(40px, 7vw, 100px);

Ici, la taille de la police ne sera jamais inférieure à 40px, à l'échelle basée sur 7% de la largeur de la fenêtre et à cesser de croître une fois qu'elle atteint 100px.

Un autre grand avantage de l'utilisation de CLAMP () est que, contrairement aux requêtes multimédias, il évite les sauts rigides et maintient vos styles plus prévisibles et lisibles.

Qu'entendons-nous par là? Comprenons cela en comparant CLAMP () avec les requêtes multimédias.

Comparaison des requêtes Clamp () et Media

Les requêtes multimédias sont un autre moyen courant de régler les tailles de police pour différentes largeurs d'écran. Ici, vous définissez des points d'arrêt à des largeurs d'écran spécifiques où vos styles changent. Par exemple, vous pouvez attribuer une taille de police pour le bureau, une autre pour la tablette et un troisième pour le mobile de telle sorte que la taille de la police ne change que lorsque la largeur de l'écran atteint chaque point d'arrêt.

Cette méthode fonctionne, mais elle n'est pas fluide. Entre 1000px et 501px, la taille de la police reste verrouillée à 100px. Au moment où l'écran atteint 500px, la police tombe brusquement à 30px. Cela ne signifie pas de transition en douceur, seulement un changement net.

Donc, si vous voulez rendre la mise à l'échelle plus naturelle, vous devez ajouter plusieurs points d'arrêt et ajuster manuellement la taille de la police à chacun. Cela rendrait votre code long et gonflé.

En revanche, CLAMP () vous sauve des transitions brusques et du code long. En fait, il peut être écrit en une seule ligne: taille de police: clamp (30px, 7vw, 100px).

Cela indique au navigateur de mettre à l'échelle la police entre 30px et 100px sur la base de 7% de la largeur de la fenêtre. La taille de la police s'ajuste de manière fluide sur toutes les tailles d'écran sans sauts brusques ou la nécessité de plusieurs points d'arrêt. Vous définissez toujours les limites, mais la mise à l'échelle entre les deux est automatique et plus cohérente.

Dans l'action en direct, voici comment une comparaison entre le redimensionnement des polices de points d'arrêt des requêtes médiatiques et la clamp () ressemble:

Pour le redimensionnement réactif, CLAMP () fait une différence notable. Plutôt que d'attendre que les largeurs d'écran fixes déclenchent des changements de style, il répond à chaque pixel entre les deux. Cela maintient votre code plus propre et votre conception plus cohérente sur tous les appareils. En plus de cela, il est largement pris en charge par la plupart des navigateurs modernes, ce qui signifie qu'il rendra bien sur ces navigateurs , ce qui en fait un remplacement fiable et pratique.

Comment Clamp () fonctionne dans les coulisses

Clamp () prend trois valeurs qui fonctionnent ensemble pour mettre à l'échelle toute propriété CSS:

 clamp(minimum, preferred, maximum) 

Chaque partie de la fonction a un rôle spécifique:

• Valeur minimale: la valeur la plus basse possible. L'élément ne s'étendra pas en dessous de ce point, quelle que soit la taille de l'écran.
• Valeur préférée: cette valeur évolue en fonction de la taille de l'écran. Il est généralement défini en utilisant des unités relatives comme VW ou une expression calc () pour permettre la fluidité libre.
• Valeur maximale: la taille la plus autorisée. Même sur les très grands écrans, l'élément ne dépassera pas cette valeur.

Lorsque le navigateur calcule la taille finale, il évalue d'abord la valeur préférée. Le navigateur utilise le minimum si la taille de l'écran est suffisamment petite pour que la valeur préférée tombe en dessous du minimum. De même, si l'écran est suffisamment large pour que la valeur préférée dépasse le maximum, il s'en tient à cela.

Cela rend le comportement prévisible. Vous savez toujours que votre conception restera dans votre gamme définie, mais vous obtenez une mise à l'échelle flexible entre ces limites. En fixant des limites minimales et maximales, CLAMP () garantit que vos éléments sont à l'échelle de manière fluide mais jamais trop. Juste assez.

Choisir la bonne valeur préférée

Vous avez peut-être remarqué que la valeur préférée (celle du milieu) joue un rôle plus important dans tout cela. Il décide de l'échelle des éléments.

Tout d'abord, il ne devrait pas être une valeur fixe comme la pince (40px, 80px , 120px) car dans ce cas, la valeur préférée ne s'évolue pas du tout. Étant donné que 80px se situe déjà entre la limite, le navigateur le verrouille et ignore les modifications de la taille de l'écran. Il en résulte une valeur statique, qui bat le but d'utiliser CLAMP () en premier lieu.

Au lieu de cela, la valeur préférée doit toujours être relative , comme dans la pince (40px, 7vw , 120px). Ici, 7VW répond à la largeur de la fenêtre, ce qui permet à l'élément de s'étendre en douceur sur les tailles d'écran. La fonction de serrage garantit alors qu'elle ne dépasse jamais 40px ou supérieur à 120px, en maintenant la taille sensible à 7% de la largeur de l'écran.

Vous devez également considérer la taille de la valeur relative. Par exemple, une valeur plus petite comme 2VW éclate l'élément plus progressivement à travers les tailles d'écran, tandis qu'une valeur plus grande comme 6VW provoque une mise à l'échelle plus rapide et atteint la taille maximale plus tôt. Pour identifier la mise à l'échelle qui fonctionne pour vous, essayez la calculatrice d'échelle de type de fluide. Il vous permet de prévisualiser différentes valeurs et d'exporter des CSS prêts à l'emploi.

Remarque: La calculatrice de l'échelle de type fluide produit des valeurs VI. Si vous utilisez la sortie générée dans Divi, assurez-vous de modifier les unités VI en VW.

Différents types d'unités dans la pince ()

Les unités à l'intérieur de la pince () affectent la façon dont elle se comporte entre les appareils. Voici tout ce que vous pouvez utiliser:

Dans la plupart des cas, les développeurs utilisent PX pour les valeurs minimales et maximales et une unité fluide comme VW pour la valeur préférée. Cela donne le meilleur équilibre entre le contrôle et la réactivité.

Cependant, vous pouvez également utiliser des unités relatives pour les valeurs min et max, telles que la clamp (2rem, 4rem, 8rem). Cela rend votre conception plus accessible et plus facile à échelle si la taille de la police racine change. Il est particulièrement utile pour les utilisateurs qui ajustent les paramètres du navigateur pour la lisibilité.

clamp () dans divi 5

La fonction CLAMP () dans CSS est incroyablement utile, mais seulement si vous êtes à l'aise d'écrire du code. Qu'en est-il de ceux qui préfèrent construire leurs sites Web visuellement sans toucher une feuille de style? Souhaitez-vous construire des dispositions de liquide à l'aide de clamp () mais sans écrire de code?

Si c'est le cas, les unités avancées de Divi 5 peuvent aider.

Abonnez-vous à notre chaîne YouTube

Pour faire court, Divi 5 prend en charge CLAMP () en tant qu'unité avancée à travers le constructeur, et il est super facile d'y accéder. Partout où vous pouvez saisir une valeur numérique, telle que la taille de la police, l'espacement ou la largeur de la section, vous trouverez l'option d'utiliser directement CLAMP ().

Cliquez simplement sur le champ de saisie pour sélectionner dans les différentes unités avancées disponibles dans Divi 5 (voir la liste de couleur sombre à côté de la taille du texte de titre) , modifiez le type d'unité et définissez vos valeurs minimales, préférées et maximales.

Et c'est tout! Aucun codage ou CSS du tout - tout ce que vous avez fait était de saisir une valeur de pince (), et votre cap est devenue fluide comme ça.

Divi 5 facilite la création de conceptions liquides et réactives sans écrire CSS personnalisé. Vous obtenez toute la flexibilité d'un pince () avec la simplicité d'un éditeur visuel. (Divi 5 prend en charge de nombreuses autres unités avancées, y compris CLAMP ()).

Apprenez tout sur les unités avancées de Divi 5

Comment utiliser CLAMP () dans Divi 5?

À ce jour, vous avez vu à quel point il est facile d'utiliser CLAMP () dans Divi 5. Vous sélectionnez simplement l'unité CLAMP () et ajoutez vos valeurs préférées. Pas de code personnalisé, pas de fichiers CSS, juste une interface visuelle propre.

Mais ce qui rend CLAMP () vraiment puissant à l'intérieur Divi n'est pas seulement la fonction elle-même. C'est avec quoi il fonctionne.

Divi 5 est construit autour d'un système de conception modulaire. Cela signifie que vous pouvez combiner CLAMP () avec d'autres fonctionnalités avancées telles que les variables de conception et les fonctions CSS comme CALC () pour rendre votre disposition non seulement réactive mais également cohérente et facile à évoluer. Et c'est là que cela devient intéressant - Divi 5 facilite l'intégration de CLAMP () dans votre flux de travail.

Clamp () fonctionne avec des variables de conception

La meilleure façon la plus efficace d'utiliser la clamp () efficacement dans Divi 5 est de la combiner avec des variables de conception.

Les variables de conception vous permettent de définir des valeurs globales (telles que la typographie, les couleurs et même les tailles de police) afin que vous puissiez les utiliser sur tout votre site pour le garder cohérent. Vous pouvez également enregistrer les valeurs CLAMP () en tant que variables de nombre. Cela vous permet d'enregistrer des valeurs globales réactives de telle sorte que lorsque vous les modifiez, toutes les instances sont mises à jour en même temps.

Par exemple, vous définissez des tailles CLAMP () pour les titres H1-H6 comme ceci:

Et les enregistrer à l'intérieur du gestionnaire de variables dans Divi Builder:

Ensuite, tous vos titres sur le site Web s'adapteront en fonction de vos valeurs de clamp () définies.

Maintenant, si vous souhaitez mettre à jour la taille H3, modifiez simplement sa variable de numéro, et elle sera mise à jour partout où vous l'avez utilisée. ( Vous voulez créer votre propre système de typographie dans Divi 5? Voici un guide complet sur la gestion des polices et des tailles de police à l'aide de clamp () et de variables de conception.)

Cette approche permet un contrôle centralisé, ce qui facilite la mise à jour des paramètres de typographie à l'échelle mondiale sans ajuster manuellement chaque instance. En appliquant ces variables CLAMP () via des préréglages de groupe d'options, vous rationalisez votre processus de conception.

clamp () se combine avec calc ()

Vous pouvez également utiliser la fonction calc () à l'intérieur de clamp () pour affiner la façon dont vos valeurs évoluent. Ceci est particulièrement utile lorsque vous souhaitez ajouter une taille de base, puis à l'échelle plus précisément avec une unité relative comme VW.

Par exemple, la taille de la police: la pince (1REM, calc (0,75REM + 2VW), 2.5REM) utilise CALC () pour ajouter une base stable (0,75REM), puis la mettre à l'échelle avec 2VW.

Cela permet à la police d'échelle en fonction de la largeur de la fenêtre, mais lui donne également une longueur d'avance avec une taille de police de base. Ceci est utile pour maintenir la lisibilité sur des écrans plus petits sans avoir besoin de variations de pince multiples. L'astuce calc () à l'intérieur de CLAMP () est parfaite pour partout où vous voulez ce contrôle supplémentaire sur la façon dont les choses évoluent.

Cas d'utilisation pratiques de clamp ()

Regardons maintenant certains cas d'utilisation courants de clamp () et à quel point cela devient facile lorsque vous l'appliquez avec Divi 5:

1. Tailles de cap cohérentes sur tous les appareils

La typographie réactive est le meilleur cas d'utilisation de clamp (). Étant donné que nous avions déjà défini nos tailles de cap (H1-H6) à l'aide de clamp () dans des variables de conception, il est temps de les voir en action.

Nous avons créé cette page en utilisant H5S pour les éléments de menu. Ensuite, nous avons appliqué la variable de nombre H5 à chacune des tailles de texte de cap du H5. Et comme vous pouvez le voir, chaque tête évolue fluide sur les points d'arrêt.

Le texte reste clair, équilibré et visuellement cohérent sur tous nos points d'arrêt réactifs définis.

Vous pouvez également utiliser CLAMP () pour la hauteur de ligne et l'espacement des lettres. Il aide à maintenir la lisibilité optimale en augmentant légèrement les lacunes de ligne ou l'espacement à mesure que l'écran s'élargit. Un petit changement, mais cela rendrait le contenu long plus respirant.

2. Set Clamp () Largeur pour les sections de paragraphe sur les grands écrans

Les paragraphes sont naturellement faciles à lire sur mobile, car les lignes courtes dans les écrans compacts rendent le contenu digestible. Cependant, sur des moniteurs ultra-larges, les lecteurs seront obligés de scanner des lignes horizontales entières si une section pleine largeur étend le texte trop loin. C'est comme lire un panneau d'affichage. La longueur de ligne idéale d'une phrase est d'environ 50 à 75 caractères, donc si votre site Web affiche une phrase sans fin sur un écran large, vous pourriez perdre l'intérêt du lecteur.

Pour résoudre ce problème, définissez une largeur réactive telle que CLAMP (300px, 65vw, 800px) pour faire évoluer votre paragraphe à une largeur fixe (800px) afin que les paragraphes apparaissent lisibles même sur des écrans plus larges.

C'est un moyen idéal pour rendre vos articles de blog lisibles sur des écrans plus larges.

3. Set clamp () largeur pour les images simples ou en vedette

De même, les images uniques (comme les images en vedette) peuvent sembler trop grandes sur les écrans ultra-larges. Il a l'air parfait sur une tablette, mais peut s'étirer maladroitement sur un moniteur 4K, ce qui peut sembler accablant par rapport au reste du contenu.

Pour résoudre ce problème, utilisez une largeur d'image basée sur une pince comme le serrage (300px, 60vw, 1000px). Il garantit que l'image se développe avec fluidité avec la taille de l'écran mais s'arrête avant qu'elle ne domine la disposition.

Ou bien, vous pouvez simplement définir une largeur de pince () pour toute la ligne du conteneur pour garantir uniformément tous les éléments (image, titre et texte).

4. Ajouter un rembourrage et une marge de liquide avec clamp ()

Les concepteurs obtiennent souvent l'espacement pour le bureau, mais cela ne fonctionne pas toujours bien sur les écrans plus petits ou très grands. Le rembourrage et les marges fixes ne s'ajustent pas toujours avec la taille de l'écran. C'est là que clamp () devient utile.

Par exemple, une marge de pince (0,5rem, 2vw, 2rem) et une pince (1Rem, 3VW, 4rem) padding dans une galerie d'images créent des espaces qui commencent petit et à l'échelle avec l'écran.

Il donne votre place à la mise en page pour respirer sur de grands écrans et maintient les choses serrées sur le mobile:

CLAMP () aide également à évoluer en douceur autour des dispositions de cartes, des galeries d'images, des conteneurs de section et des blocs de texte, surtout lorsque vous voulez un espacement intentionnel sans ajustement constant de points de rupture.

5. Créez des sections de héros réactives qui évoluent de manière transparente

En utilisant CLAMP (), vous pouvez rendre les sections de héros parfaites sur chaque écran en définissant la capture de héros, le rembourrage de bouton et l'espacement des sous-titres. Nous avons enregistré ces valeurs CLAMP () en tant que variables de conception pour simplifier leur application. (Mais vous ne voudriez pas remplir votre gestionnaire variable en économisant chaque détail minute.)

Appliquer ces valeurs est désormais facile.

Une fois enregistré, chacun s'adaptera automatiquement à la taille de l'écran pour donner à votre section héros la première impression parfaite sur chaque appareil.

Concevoir des dispositions parfaites pixels à l'aide de clamp (), sans écrire une seule ligne de code

Clamp () vous aide à concevoir des dispositions fluides et réactives sans compter sur des requêtes multimédias sans fin. Et avec Divi 5, vous n'avez pas besoin d'écrire une seule ligne de code pour l'utiliser. Que vous préfériez le codage ou que vous profitiez de la conception visuelle, les unités avancées de Divi facilitent l'application de clamp () aux polices et à l'espacement.

Avec des fonctionnalités puissantes comme CLAMP () si facilement accessible, ne voudriez-vous pas essayer Divi 5 par vous-même? Testez différentes valeurs, créez votre propre système réactif et voyez à quel point vos dispositions peuvent devenir flexibles. Et lorsque vous avez une astuce préférée (), partagez-la dans les commentaires ci-dessous! Nous aimerions voir ce que vous créez.