Manuel Matuzovic : max() Tromperie

En guise de message de Manuel Matuzović qui est au moyen d'une démo par Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Vous vous rendriez service en lisant la ventilation de Manuel de tout ce qui se passe ici, mais cela revient essentiellement à l'équivalent de cette syntaxe plus longue :

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…où:

• max () accepte une liste de valeurs numériques CSS séparées par des virgules, où la valeur appliquée est la plus grande (ou comme MDN le met, le "plus positif") de l'ensemble.
• 0px est la première valeur de l'ensemble, garantissant que la plus petite valeur sera toujours supérieure à zéro pixel.
• (100% - 64rem) est la deuxième "valeur" de l'ensemble, mais est exprimée sous forme de calcul (notez que calc() n'est pas nécessaire) qui soustrait le max-width de l'élément (64rem) de son plein disponible width (100%). Ce qui reste est l'espace non occupé par l'élément.
• ((100% - 64rem) / 2)) divise cet espace restant de manière égale puisque nous le divisons entre les limites en ligne de l'élément.
• max(0px, ((100% - 64rem) / 2)) compare 0px ainsi que (100% - 64rem) / 2). La plus grande valeur est utilisée. Ce sera le résultat de l'équation dans la plupart des cas, mais si 64rem est toujours supérieur à la valeur calculée du plein de l'élément 100% largeur, il verrouille cette valeur à zéro pour s'assurer qu'elle ne donne jamais une valeur négative.
• margin-inline est la propriété définie par la valeur gagnante, qui applique la marge aux côtés en ligne de l'élément - c'est le raccourci logique équivalent à la définition de la même valeur pour le margin-left ainsi que margin-right propriétés physiques.

C'est le même genre d'idée Chris a partagé il y a quelque temps qui utilise le CSS max()fonction pour résoudre le "Problème intérieur" - un conteneur qui prend en charge une couleur d'arrière-plan à fond perdu tout en contraignant le contenu à l'intérieur avec padding.

max(), calc(), margin-inline… c'est beaucoup de CSS dernier cri ! Et Manuel est en plein milieu de écrire sur ces fonctionnalités et d'autres fonctionnalités CSS modernes sur 100 jours.

Lien direct →