CSS min() Toutes les choses —

Avez-vous vu ce message que Chris Coyier a publié en août ? Il a expérimenté les unités de requête de conteneur CSS, en les utilisant à fond et en les utilisant pour chaque valeur numérique dans une démo qu’il a créée. Et le résultat c’était… pas trop mal, en fait.

Ce que j’ai trouvé intéressant, c’est la façon dont cela démontre la complexité du dimensionnement des choses. Nous sommes limités aux unités absolues et relatives en CSS, nous sommes donc soit bloqués à une taille spécifique (par exemple, px) ou calculer la taille en fonction de la taille déclarée sur un autre élément (par exemple, %, em, rem, vw, vhet ainsi de suite). Les deux s’accompagnent de compromis, ce n’est donc pas comme s’il existait une façon « correcte » de procéder – cela dépend du contexte de l’élément – ​​et pencher fortement dans une direction quelconque ne résout pas ce problème.

Je pensais tenter ma propre expérience mais avec le CSS min() fonction au lieu des unités de requête de conteneur. Pourquoi? Eh bien, tout d’abord, nous pouvons fournir à la fonction n’importe quel type d’unité de longueur que nous voulonsce qui rend l’approche un peu plus flexible que de travailler avec un seul type d’unité. Mais la vraie raison pour laquelle je voulais faire ça, c’est l’intérêt personnel plus que toute autre chose.

La démo

Je ne te ferai pas attendre la fin pour voir comment mon min() l’expérience s’est déroulée :

Amener la réactivité du site Web à un tout autre niveau 🌐 pic.twitter.com/pKmHl5d0Dy

– Vayo (@vayospot) 1er mars 2023

Nous en reparlerons davantage après avoir parcouru les détails.

Un peu à propos min()

Le min() La fonction prend deux valeurs et applique la plus petite, selon celle qui se trouve dans le contexte de l’élément. Par exemple, nous pouvons dire que nous voulons qu’un élément soit aussi large que 50% du contenant dans lequel il se trouve. Et si 50% est plus grand que, disons 200pxlimitez plutôt la largeur à cet endroit.

Donc, min() est un peu comme les unités de requête de conteneur dans le sens où il est conscient de la quantité d’espace disponible dont il dispose dans son conteneur. Mais c’est différent en cela min() n’interroge pas les dimensions de son conteneur pour calculer la valeur finale. Nous lui fournissons deux longueurs acceptables, et il détermine laquelle est la mieux adaptée au contexte. Cela fait min() (et max() d’ailleurs) un outil utile pour des mises en page réactives qui s’adaptent à la taille de la fenêtre. Il utilise une logique conditionnelle pour déterminer la « meilleure » correspondance, ce qui signifie qu’il peut aider à adapter les mises en page sans avoir besoin de recourir aux requêtes multimédias CSS.

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

/* Close to this: */
.element {
  width: 200px;

  @media (min-width: 600px) {
    width: 50%;
  }
}

La différence entre min() et @media dans cet exemple, nous disons au navigateur de définir la largeur de l’élément sur 50% à un moment précis point d’arrêt de 600px. Avec min()il change automatiquement les choses à mesure que la quantité d’espace disponible change, quelle que soit la taille de la fenêtre d’affichage.

Quand j’utilise le min()je le considère comme ayant la capacité de prendre des décisions intelligentes en fonction du contexte. Nous n’avons pas besoin de réfléchir ou de calculer pour déterminer quelle valeur est utilisée. Cependant, en utilisant min() couplé à n’importe quelle unité CSS ne suffit pas. Par exemple, les unités relatives fonctionnent mieux en termes de réactivité que les unités absolues. Vous pourriez même penser à min() comme définir un maximum valeur en ce sens qu’il ne descend jamais en dessous de la première valeur mais se limite également à la deuxième valeur.

J’ai mentionné plus tôt que nous pourrions utiliser n’importe quel type d’unité dans min(). Adoptons la même approche que Chris et penchons-nous fortement sur un type d’unité pour voir comment min() se comporte lorsqu’il est utilisé exclusivement pour une mise en page réactive. Plus précisément, nous utiliserons unités de fenêtre car ils sont directement relatifs à la taille de la fenêtre.

Il existe désormais différentes versions d’unités de fenêtre. Nous pouvons utiliser la largeur de la fenêtre (vw) et la hauteur (vh). Nous avons également le vmin et vmax unités légèrement plus intelligentes dans la mesure où elles évaluent la largeur et la hauteur d’un élément et appliquent soit la plus petite (vmin) ou plus grand (vmax) des deux. Donc, si l’on déclare 100vmax sur un élément, et cet élément est 500px large par 250px grand, l’unité calcule à 500px.

C’est ainsi que j’aborde cette expérience. Que se passe-t-il si nous évitons les requêtes média et utilisons uniquement min() établir une mise en page réactive et s’appuyer sur des unités de fenêtre pour y parvenir ? Nous allons le prendre un morceau à la fois.

Dimensionnement de la police

Il existe différentes approches pour le type réactif. Les requêtes des médias deviennent rapidement la méthode « à l’ancienne » :

p { font-size: 1.1rem; }

@media (min-width: 1200px) {
  p { font-size: 1.2rem; }
}

@media (max-width: 350px) {
  p { font-size: 0.9rem; }
}

Bien sûr, cela fonctionne, mais que se passe-t-il lorsque l’utilisateur utilise un moniteur 4K ? Ou un téléphone pliable ? Il existe d’autres approches éprouvées ; En fait, clamp() est la référence dominante. Mais nous nous appuyons à fond sur min(). En fait, une seule ligne de code suffit pour effacer toutes ces requêtes multimédias, réduisant ainsi considérablement notre code :

p { font-size: min(6vmin, calc(1rem + 0.23vmax)); }

Je vais vous expliquer ces valeurs…

1. 6vmin représente essentiellement 6 % de la largeur ou de la hauteur du navigateur, selon la valeur la plus petite. Cela permet de réduire la taille de la police autant que nécessaire pour des contextes plus petits.
2. Pour calc(1rem + 0.23vmax), 1rem est la taille de police de base, et 0.23vmax est une infime fraction de la largeur ou de la hauteur de la fenêtre, selon la valeur la plus grande.
3. Le calc() La fonction additionne ces deux valeurs ensemble. Depuis 0.23vmax est évalué différemment selon le bord de la fenêtre d’affichage qui est le plus grand, c’est crucial lorsqu’il s’agit de mettre à l’échelle la taille de la police entre les deux arguments. Je l’ai modifié en quelque chose qui évolue progressivement dans un sens ou dans l’autre plutôt que de faire exploser les choses à mesure que la taille de la fenêtre augmente.
4. Enfin, le min() renvoie la plus petite valeur adaptée à la taille de police de la taille d’écran actuelle.

Et en parlant de la flexibilité du min() L’approche est qu’elle peut limiter la croissance du texte. Par exemple, nous pouvons plafonner ce montant à un maximum font-size égal à 2rem comme troisième paramètre de fonction :

p { font-size: min(6vmin, calc(1rem + 0.23vmax), 2rem); }

Ce n’est pas une tactique miracle. Je dirais qu’il est probablement préférable de l’utiliser pour le corps du texte, comme les paragraphes. Nous pourrions vouloir ajuster légèrement les choses pour les titres, par exemple : <h1>:

h1 { font-size: min(7.5vmin, calc(2rem + 1.2vmax)); }

Nous avons augmenté la taille minimale de 6vmin à 7.5vmin afin qu’il reste plus grand que le corps du texte, quelle que soit la taille de la fenêtre. Aussi, dans le calc()la taille de base est maintenant 2remqui est plus petit que les styles UA par défaut pour <h1>. Nous utilisons 1.2vmax comme multiplicateur cette fois, ce qui signifie qu’il augmente plus que le corps du texte, qui est multiplié par une valeur plus petite, .023vmax.

Cela fonctionne pour moi. Vous pouvez toujours modifier ces valeurs et voir celle qui convient le mieux à votre utilisation. Quoi qu’il en soit, le font-size car cette expérience est complètement fluide et entièrement basée sur le min() fonction, en adhérant à la contrainte que je m’impose.

Marge et remplissage

L’espacement est une partie importante de la mise en page, réactive ou non. Nous avons besoin margin et padding pour bien situer les éléments aux côtés d’autres éléments et leur donner une marge de manœuvre, tant à l’intérieur qu’à l’extérieur de leur boîte.

Nous faisons tapis avec min() pour cela aussi. Nous pourrions utiliser des unités absolues, comme les pixels, mais celles-ci ne sont pas exactement réactives.

min() peut combiner des unités relatives et absolues pour qu’elles soient plus efficaces. Jumelons-nous vmin avec px cette fois:

div { margin: min(10vmin, 30px); }

10vmin est probablement plus petit que 30px lorsqu’il est visualisé sur une petite fenêtre. C’est pourquoi je permets à la marge de diminuer dynamiquement cette fois-ci. À mesure que la taille de la fenêtre augmente, 10vmin dépasse 30px, min() plafonne la valeur à 30pxne allant pas plus haut que ça.

Remarquez aussi que je n’ai pas atteint calc() cette fois. Les marges n’ont pas vraiment besoin d’augmenter indéfiniment avec la taille de l’écran, car un espacement trop important entre les conteneurs ou les éléments semble généralement gênant sur des écrans plus grands. Ce concept fonctionne également extrêmement bien pour le rembourrage, mais nous n’avons pas besoin d’y aller. Au lieu de cela, il serait peut-être préférable de s’en tenir à une seule unité, de préférence empuisqu’il est relatif à l’élément font-size. Nous pouvons essentiellement « transmettre » le travail qui min() fait sur le font-size au margin et padding propriétés à cause de cela.

.card-info {
  font-size: min(6vmin, calc(1rem + 0.12vmax));
  padding: 1.2em;
}

Désormais, le remplissage évolue avec le font-sizequi est alimenté par min().

Largeurs

Paramètre width car un design réactif ne doit pas être compliqué, n’est-ce pas ? Nous pourrions simplement utiliser un seul pourcentage ou une valeur d’unité de fenêtre pour spécifier la quantité d’espace horizontal disponible que nous souhaitons occuper, et l’élément s’ajustera en conséquence. Cependant, les unités de requête de conteneur pourraient constituer une solution heureuse en dehors de cette expérience.

Mais nous sommes min() jusqu’au bout !

min() est utile lors de la définition de contraintes sur la manière dont un élément répond aux changements. Nous pouvons fixer une limite supérieure à 650px et, si la largeur calculée tente d’augmenter, faites en sorte que l’élément se stabilise à une largeur totale de 100%:

.container { width: min(100%, 650px); }

Les choses deviennent intéressantes avec la largeur du texte. Lorsque la largeur d’une zone de texte est trop longue, il devient inconfortable de lire les textes. Il existe des théories concurrentes sur le nombre de caractères par ligne de texte idéal pour une expérience de lecture optimale. Par souci d’argumentation, disons que ce nombre doit comprendre entre 50 et 75 caractères. En d’autres termes, nous ne devrions pas contenir plus de 75 caractères sur une ligne, et nous pouvons le faire avec le ch unité, qui est basée sur le 0 la taille du caractère quelle que soit la police utilisée.

p {
  width: min(100%, 75ch);
}

Ce code dit en gros : soyez aussi large que nécessaire, mais jamais plus large que 75 caractères.

Recettes de dimensionnement basées sur min()

Au fil du temps, avec de nombreux ajustements et modifications des valeurs, j’ai dressé une liste de valeurs prédéfinies qui, à mon avis, fonctionnent bien pour styliser de manière réactive différentes propriétés :

:root {
  --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax));
  --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax));
  --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax));
  --font-size-3x: min(6vmin, calc(1rem + 0.12vmax));
  --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax));
  --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax));
  --width-2x: min(100vw, 1300px);
  --width-1x: min(100%, 1200px);
  --gap-3x: min(5vmin, 1.5rem);
  --gap-2x: min(4.5vmin, 1rem);
  --size-10x: min(15vmin, 5.5rem);
  --size-9x: min(10vmin, 5rem);
  --size-8x: min(10vmin, 4rem);
  --size-7x: min(10vmin, 3rem);
  --size-6x: min(8.5vmin, 2.5rem);
  --size-5x: min(8vmin, 2rem);
  --size-4x: min(8vmin, 1.5rem);
  --size-3x: min(7vmin, 1rem);
  --size-2x: min(5vmin, 1rem);
  --size-1x: min(2.5vmin, 0.5rem);
}

C’est ainsi que j’ai abordé mon expérience car cela m’aide à savoir vers quoi tendre dans une situation donnée :

h1 { font-size: var(--font-size-6x); }

.container {
  width: var(--width-2x);
  margin: var(--size-2x);
}

.card-grid { gap: var(--gap-3x); }

Et voilà ! Nous avons un titre qui évolue parfaitement, un conteneur réactif et jamais trop large, et une grille avec un espacement dynamique, le tout sans une seule requête multimédia. Le --size- les propriétés déclarées dans la liste des variables sont les plus polyvalentes, car elles peuvent être utilisées pour des propriétés qui nécessitent une mise à l’échelle, par exemple les marges, les remplissages, etc.

Le résultat final, encore une fois

J’ai partagé une vidéo du résultat, mais voici un lien vers la démo.

Alors, est-ce min() la solution ultime en matière de réactivité ? Absolument pas. Un régime entièrement composé d’unités de requête de conteneurs n’est pas non plus le cas. Je veux dire, c’est cool que nous puissions faire évoluer une page Web entière comme celle-ci, mais le Web n’est jamais un bonnet unique.

En fait, je pense que ceci et ce que Chris a présenté sont mises en garde contre les approches dogmatiques de la conception Web dans son ensemble, et pas seulement uniquement au design réactif. Les fonctionnalités CSS, y compris les unités de longueur et les fonctions, sont des outils dans un ensemble d’outils virtuels plus vaste. Plutôt que de vous sentir trop à l’aise avec une fonctionnalité ou une technique, explorez le hangar car vous trouverez peut-être un meilleur outil pour le travail.

(gg, ouais)