📋 🐯 🧘 Fonctions CSS min (), max () et clamp () 🚼 🦉 🥘

Prise en charge des fonctions de comparaison CSS min(), max()et clamp()apparu dans Firefox le 8 avril 2020. Cela signifie que ces fonctionnalités sont désormais prises en charge dans tous les principaux navigateurs. Ces fonctionnalités CSS étendent notre capacité à créer des mises en page dynamiques et à concevoir des composants plus flexibles qu'auparavant. Ils peuvent être utilisés pour ajuster la taille des éléments de conteneur, des polices, des retraits, etc. Certes, un concepteur de sites Web qui crée des mises en page en tenant compte de la possibilité d'utiliser ces fonctions étonnantes peut avoir besoin d'apprendre à penser différemment. Aujourd'hui, je veux parler des caractéristiques de ces fonctions, expliquer tout ce qui peut leur être incompréhensible et donner des exemples pratiques de leur utilisation.

Prise en charge du navigateur

Tout d'abord, je voudrais aborder la prise en charge du navigateur pour les fonctions min(), max()et clamp(). Néanmoins, ils sont apparus relativement récemment. Il convient de noter que les fonctions min()et max()utilisent le même niveau de prise en charge du navigateur.

Prise en charge de la fonction min () (les informations de prise en charge max () ressemblent également à ceci)

Voici des informations sur la prise en charge de la fonctionclamp().

Prise en charge de la fonction Clamp ()

Fonctions de comparaison CSS

La spécification CSS nous dit qu'il ya comparaison des fonctions min(), max()et clamp()nous permettent de comparer les valeurs des expressions et représentent l' un d'eux. La valeur renvoyée par une fonction dépend de ses fonctionnalités. Explorez ces fonctionnalités.

Fonction Min ()

Une fonction min()prend une ou plusieurs valeurs, séparées par une virgule, et renvoie la plus petite d'entre elles. Cette fonction est utilisée pour limiter les valeurs des propriétés CSS à un niveau maximum strictement spécifié.

Prenons l'exemple suivant. Nous avons besoin que la largeur maximale de l'élément ne dépasse pas 500px.

.element {
    width: min(50%, 500px);
}

Avec une largeur de fenêtre d'affichage de 1150 pixels, supérieure à 1000 pixels, l'élément aura une largeur de 500 pixels. Le

navigateur devra sélectionner la plus petite valeur parmi50%et500px. La largeur de la fenêtre affecte le résultat de la sélection. Si 50% de la largeur de la fenêtre est supérieure à500px, cette valeur sera ignorée et la fonction reviendra500px.

Sinon, si 50% de la largeur de la fenêtre est inférieure500px, la valeur résultante sera utilisée pour ajuster la largeur de l'élément. Que pensez-vous, à quelle largeur de la zone de visualisation 50% de sa largeur ne dépassera pas500px? C'est évidemment1000px. Avec cette largeur, les deux valeurs passées à la fonction seront les mêmes. Si la largeur de la fenêtre est inférieure1000px, il sera ensuite utilisé pour ajuster la largeur de l'élément.

Si la largeur de la fenêtre d'affichage est inférieure à 1000 pixels, alors 50% de cette largeur sera utilisée pour ajuster la largeur de l'élément.

J'espère que j'ai réussi à expliquer clairement tout cela. J'ai longtemps réfléchi à la fonctionmin(), essayant de pénétrer dans son essence. Par conséquent, j'aimerais beaucoup en parler clairement. Voici une vidéo montrant les résultats de l'utilisation de cette fonctionnalité.

La largeur de l'élément est limitée à 500 pixels.

Voici un exemple interactif utilisé pour enregistrer la vidéo ci-dessus. Pour voir la fonctionmin()en action, essayez de redimensionner la fenêtre du navigateur.

Fonction max ()

La fonction max()prend une ou plusieurs valeurs, séparées par des virgules, et renvoie la plus grande d'entre elles. Cette fonction est utilisée pour fixer la valeur minimale qu'une propriété CSS peut prendre.

Dans l'exemple suivant, nous avons besoin que la largeur de l'élément soit au moins 500px.

.element {
    width: max(50%, 500px);
}

Si 50% de la largeur de la fenêtre est supérieure à 500 pixels - cette valeur sera utilisée pour ajuster la largeur de l'élément. Le

navigateur doit sélectionner la valeur maximale à partir de50%et500px. Le choix dépend de la largeur de la fenêtre. Si 50% de la largeur de la fenêtre est inférieure à500px, le navigateur ignorera cette valeur et utilisera la valeur500px.

Si 50% de la largeur de la fenêtre est supérieure500px, la largeur de l'élément sera définie égale à cette valeur. Comme vous pouvez le voir, une fonctionmax()est l'opposé d'une fonctionmin().

Pour mieux comprendre cela, jetez un œil à cette démo interactive.

Fonction Clamp ()

La fonction clamp()vous permet de limiter la plage de variation d'une certaine valeur en définissant ses limites inférieure et supérieure. Il prend trois paramètres: la valeur minimale, la valeur calculée (recommandée) et la valeur maximale. Si la valeur calculée ne dépasse pas les limites limitées par les valeurs minimale et maximale transmises à la fonction, elle renverra cette valeur.

Voici un exemple.

.element {
    width: clamp(200px, 50%, 1000px);
}

Ici, nous ajustons la largeur de l'élément, qui ne devrait pas être de moins en 200pxplus 1000px. Si la valeur dans 50%ne dépasse pas ces limites, cette valeur est utilisée. Voici à quoi ça ressemble.

Si 50% de la largeur de la fenêtre tombe dans la plage de 200px-1000px - cette valeur sera utilisée pour définir la largeur de l'élément. Dans ce cas, c'est 575px.

Examinons cet exemple:

La largeur d'un élément ne sera jamais plus petite 200px.
Le deuxième paramètre de la fonction, défini sur 50%, ne sera utilisé que si la largeur de la fenêtre est de plus en plus 400pxpetite 2000px.
La largeur de l'article ne dépassera pas 1000px.

Par conséquent, nous pouvons dire que la fonction clamp()vous permet de spécifier la plage dans laquelle la valeur calculée qui lui est transmise peut changer.

Ici, vous pouvez tester la page stylisée à l'aide de cette fonction.

OwComment les résultats de la fonction clamp () sont-ils calculés?

Vous pouvez trouver des informations sur MDN selon lesquelles lorsqu'une fonction est utilisée comme valeur d'une propriété CSS clamp(), elle est équivalente à la construction dans laquelle les fonctions max()et sont appliquées min(). Jetez un œil à l'exemple suivant:

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

La valeur 50%dépend de la largeur de la zone d'affichage du navigateur. Imaginez que la largeur de la fenêtre soit 1150px.

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

▍Le contexte compte

La valeur calculée dépend du contexte. Si vous spécifiez une valeur calculée, vous pouvez utiliser différentes unités de mesure: %, em, rem, vw/vh. Même si la valeur est exprimée en pourcentage, lors du calcul, soit la largeur de la zone d'affichage peut être utilisée - si l'élément est dans la balise <body>, soit la largeur d'un autre élément qui est le conteneur de l'élément.

▍Math expressions

Il vaut la peine de dire que lorsque vous utilisez une fonction, clamp()vous pouvez lui passer des expressions mathématiques, ce qui nous évite d'avoir à utiliser une fonction calc(). La spécification nous dit que clamp()des expressions mathématiques complètes peuvent être utilisées dans chacun des arguments . Par conséquent, il n'y a pas besoin de fonctions imbriquées calc(). En outre, si vous devez appliquer plusieurs restrictions à la valeur finale, vous pouvez passer plus de deux arguments à la fonction.

Jetez un œil à l'exemple suivant:

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

Qu'est-ce que les fonctions de comparaison CSS changeront dans la façon dont nous concevons les mises en page?

Il arrive souvent qu'un concepteur, en concevant une page, se concentre sur les appareils mobiles et de bureau, en comptant sur deux scénarios pour son utilisation. Et lorsque vous travaillez sur certains projets, d'autres scénarios doivent être pris en compte.

Je vois cette situation comme indiqué ci-dessous.

À l'étage, c'est la façon dont les pages sont conçues aujourd'hui. Vous trouverez ci-dessous ce à quoi vous pouvez vous attendre à l'avenir: le

haut de l'illustration est la conception des pages de nos jours. Ici, vous pouvez voir plusieurs étapes représentant différentes zones d'affichage sur lesquelles la page doit être conçue. Ces étapes peuvent, par exemple, représenter la valeur d'une propriété. La partie inférieure de l'illustration montre une plage continue de valeurs qui peut être obtenue en limitant cette valeur à un certain minimum et un maximum. Je pense qu'à l'avenir, par exemple, lors de la définition de la taille de la police, les concepteurs feront quelque chose de similaire à celui illustré ci-dessous.

Les valeurs minimales, recommandées et maximales de la propriété.

Pour moi, c'est tout simplement merveilleux. J'admire l'idée de travailler sur des projets dont les composants nécessitent une certaine flexibilité. Bien sûr, tous les composants n'ont pas besoin d'être dynamiques, mais certains peuvent très bien l'être.

Cas d'utilisation

▍ Barre latérale et zone de page principale

À gauche, le panneau latéral. Sur la droite se trouve la zone principale de la page.

Habituellement, les panneaux latéraux des pages ont une largeur fixe, et la largeur des zones principales s'adapte de manière flexible à la zone de visualisation. Nous pouvons étendre les capacités de la barre latérale et la rendre plus dynamique, la rendre, avec une zone de visualisation suffisamment grande, prendre plus de place. Pour ce faire, vous devez limiter la taille de la largeur minimale de la barre latérale à l'aide de la fonctionmax().

Prenons l'exemple suivant.

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

La largeur minimale de l'élément asidesera 150px. Il prendra de la taille 30vwsi la largeur de la fenêtre est plus grande 500px(500 * 30% = 150).

→ Voici un exemple

▍ Taille de police d'en-tête

Ajustement flexible de la taille de la police d'en-tête

Un excellent script pour utiliser la fonctionclamp()est l'ajustement flexible de la taille de la police d'en-tête. Imaginez que nous ayons besoin de la taille de police minimale de l'en-tête16pxet du maximum -50px. Grâce à l'utilisation de la fonction,clamp()nous pouvons faire en sorte que la taille de la police soit dans ces valeurs sans aller plus bas ou plus haut.

.title {
    font-size: clamp(16px, 5vw, 50px);
}

La fonction clamp()est la solution parfaite au problème ci-dessus. Il vous permet de définir la taille de la police afin que le texte reste accessible et facile à lire à différentes tailles de la zone d'affichage. Si ici, par exemple, vous utilisez la fonction min(), nous perdrons le contrôle de la taille de la police sur la page affichée dans les petites zones de visualisation.

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

Ce qui suit est une illustration de cette idée.

L'utilisation de la fonction min () fait apparaître le texte trop petit sur le petit écran.

Sur l'écran de l'appareil mobile, la taille de la police est trop petite. Par conséquent, il n'est pas recommandé d'utiliser uniquement une fonction pour définir les tailles de policemin(). Bien sûr, la taille de la police peut être reconfigurée à l'aide d'une requête multimédia, mais le sens de l'utilisation des fonctions de comparaison CSS est complètement perdu.

Comme déjà mentionné, une fonctionmin()peut être utilisée à l'intérieur d'une fonctionmax(). Cela vous permet de reproduire les caractéristiques de la fonctionclamp().

.title {
    font-size: max(16px, min(10vw, 50px));
}

Ici, vous pouvez expérimenter avec un exemple.

Je tiens à noter qu'après la discussion sur Twitter, il s'est avéré qu'il n'est pas tout à fait correct d'utiliser 10vwla taille de police comme valeur calculée. À savoir, nous parlons du fait que cela causera des problèmes d'accessibilité si l'utilisateur fait un zoom avant sur le navigateur.

Par conséquent, il vaut mieux le faire:

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

Ici, l'expression est spécifiée comme la taille de police calculée (1rem + 5vw). Cela résout le problème.

▍ En-têtes décoratifs

Titre translucide décoratif affiché avec une très grande police.

Voyez-vous un gros texte translucide situé sous le titre? Il s'agit d'un titre décoratif dont les dimensions doivent correspondre à la taille de la fenêtre. Pour former un tel en-tête, vous pouvez utiliser la fonctionmax()avec une valeur exprimée en unités de mesure qui lui est transmisevw. Cela permettra de garantir que la taille de la police n'est pas inférieure à la valeur spécifiée.

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

→ Voici un exemple de travail

▍ Produisez des dégradés lisses dans différentes zones de visualisation

Lors du réglage des dégradés à l'aide de CSS, vous devrez peut-être les ajuster dynamiquement pour rendre les dégradés affichés sur les écrans mobiles plus fluides. Jetez un œil à l'exemple suivant. Il y a un tel gradient:

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

Le dégradé sur l'écran mobile est caractérisé par une transition trop nette entre les couleurs.Veuillez

noter que sur l'écran mobile, la bordure de la séparation des couleurs est clairement visible. C'est mauvais. Vous pouvez corriger la situation à l'aide d'une bonne vieille enquête médiatique. (Oups, il semble que je considère déjà les requêtes des médias comme une «bonne vieille technologie».)

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

Bien que ce soit un moyen normal de résoudre le problème, dans une situation similaire, nous pouvons utiliser la fonction CSS min().

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

Le résultat est ce qui est montré ci-dessous.

Le dégradé semble lisse lorsqu'il est affiché sur n'importe quel écran

→ Voici une démonstration de cette idée

▍ Dégradé translucide

Lorsque vous devez placer du texte au-dessus d'une photographie, vous devez alors "mettre" un dégradé en dessous. Cela facilitera la lecture du texte. Comme dans l'exemple précédent, les paramètres de dégradé doivent dépendre de la taille de la fenêtre. Jetez un œil à la figure suivante.

Paramètres de dégradé flexibles sur des écrans de différentes tailles

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

Grâce à cette petite amélioration, le gradient sur les appareils mobiles sera bien meilleur qu'auparavant. Si la taille du dégradé est égale, sur l'écran du bureau, à 50% de l'élément parent, alors sur l'appareil mobile, il devrait déjà être quelque chose dans la région de 30%. Vous pouvez définir la valeur minimale de la taille du dégradé à l'aide de la fonction max().

→ Voici un exemple

▍ Marges extérieures dynamiques

Personnalisation de l'indentation

Vous pouvez utiliser des unités associées aux caractéristiques de la fenêtre pour ajuster l'indentation dynamique des éléments. Cependant, cette approche ne se montre pas toujours bien. Le fait est que l'utilisateur peut visualiser la page sur l'écran pivoté d'un appareil mobile avec une très grande hauteur verticale. Voici comment résoudre ce problème à l'aide de requêtes multimédias:

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

Bien que ce code fonctionne correctement, le même effet peut être obtenu avec une seule ligne de code:

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

En utilisant la fonction, min()nous définissons la valeur de retrait maximale sur 2.75rem. Comme vous pouvez le voir, c'est très simple et pratique.

→ Voici un exemple de travail

▍ Largeur du conteneur

Ajustement dynamique de la largeur d'un conteneur

Supposons que nous ayons besoin d'un élément de conteneur dont la largeur doit être de 80% de la largeur de son élément parent. La largeur du conteneur ne doit pas dépasser780px. Comment créer un conteneur similaire? Habituellement, dans cette situation, ils font quelque chose comme ceci:

.container {
    max-width: 780px;
    width: 80%;
}

Mais l'utilisation de la fonction min()vous permet de limiter la largeur maximale du conteneur comme ceci:

.container {
    max-width: min(80%, 780px);
}

→ Voici un exemple de travail

▍ Retrait vertical

clamp()J'aime la fonction en ce qu'elle est idéale pour limiter la taille de l'indentation des sections de page. Jetez un œil à l'exemple suivant, qui montre la configuration du haut de la page (section héros).

Définition de l'indentation de la section située en haut de la page Vous pouvez

ajuster de manière flexible l'indentation d'une telle section en utilisant une seule ligne de code CSS.

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

→ Voici un exemple

▍ Limites et ombres

Voici une vidéo qui montre un élément qui a une large bordure.

Élément à bordure large

Dans certains cas, la conception de pages utilise des éléments à bordure large et à rayon de rayon important. Lors de l'affichage de tels éléments sur des écrans mobiles, leurs limites doivent être réduites. Il en va de même pour les rayons de coin. L'utilisation de la fonctionclamp()vous permet d'ajuster dynamiquement les paramètres de bordure, en les liant à la largeur de la zone de visualisation.

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

Ici, vous pouvez expérimenter avec un exemple de travail.

▍Distance entre les cellules de la disposition de la grille

Disposition de la grille

Une façon intéressante d'utiliser la fonctionclamp()consiste à définir la propriétégrid-gapdans les dispositions de la grille. En particulier, nous parlons du fait que sur les écrans mobiles, la distance entre les cellules de la grille serait inférieure à celle des ordinateurs de bureau.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

Si vous êtes intéressé à utiliser les fonctions de comparaison CSS lors de la conception des dispositions de grille, jetez un œil à ce bon article.

→ Voici un exemple pour cette section

▍Utilisation dans les fonctions CSS pour comparer des valeurs sans unités

Au cours de l'expérimentation des fonctions CSS, j'ai décidé de savoir ce qui se passe si vous passez des fonctions clamp()comme valeur minimale 0. Voici à quoi cela ressemble dans le code:

.element {
    width: clamp(0, 10vmax, 10rem);
}

C'est du mauvais CSS. Je crois que le fait est que les nombres sans unités de mesure ne devraient pas être utilisés ici.

▍ Mécanismes redondants pour les navigateurs qui ne prennent pas en charge min (), max () et clamp ()

Comme cela est le cas avec d'autres nouvelles fonctionnalités CSS, l' application de fonctions min(), max()et clamp(), vous devez prendre soin des mécanismes de sauvegarde. Pour créer ces mécanismes, vous pouvez utiliser l'une des approches suivantes.

1. Configuration manuelle du mécanisme de sauvegarde

Ici, la configuration manuelle est comprise comme l'ajout au code d'une propriété qui bénéficie d'une large prise en charge du navigateur. Cette propriété doit être placée devant la propriété qui utilise les fonctions de comparaison CSS. Voici à quoi cela pourrait ressembler:

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Ici, les navigateurs prenant en charge ignoreront clamp()la première expression. Et ceux qui ne prennent pas en charge cette fonction utiliseront la première façon d'ajuster l'indentation.

2. Utilisation de la directive CSS les soutiens

La directive @supports, conçue pour tester la prise en charge du navigateur pour diverses technologies, peut être utilisée pour déterminer si le navigateur peut fonctionner avec les fonctions de comparaison CSS. Je préfère utiliser cette solution plutôt que la solution manuelle décrite dans le premier paragraphe. Le fait est que tout navigateur prenant en charge les fonctions de comparaison doit également prendre en charge la directive @supports.

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

▍À propos de la disponibilité du contenu

Bien que les fonctionnalités de comparaison CSS nous offrent une nouvelle façon de créer des pages Web plus flexibles en les utilisant, des précautions doivent être prises. Par exemple, utiliser une fonction seule min()pour définir une propriété font-sizene suffit pas. Le fait est que sur les appareils mobiles, une police dont la taille est définie en utilisant uniquement cette fonction peut être trop petite. Lors de la configuration d'un contenu de page particulièrement important, n'oubliez pas de limiter les paramètres minimum et maximum. Sinon, cela peut aggraver l'expérience utilisateur de travailler avec le projet.

Utilisez-vous des fonctions CSS min(), max()et clamp()?

Fonctions CSS min (), max () et clamp ()