Cuisine et Web

Chaque régles CSS applique une valeur.

Selon les regles, ces valeurs sont des listes definies en textes ou des valeurs numeriques exprimées avec une unité de mesure (px,em, cm, etc.)

Pour les régles recevant des valeurs numériques, certaines n'acceptent pas de valeur négatives et sont tout bonnement ignorées par le navigateur.

Peut-on en tirer profit?

Oui

Un exemple?

Un long texte peut devenir difficile à lire si il s'etale sur une trop longue largeur, particulierement au saut de ligne et si l'interligne est faible.
Dans ce cas, il est facile d'appliquer un max-width et d'augmenter l'interligne : line-height pour en faciliter la lecture.

Exemple avec une larguer maximale de 400px pour un paragaraphe:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

On est tenté d'ajouter une marge intérieur pour ameliorer l'aspect visuel:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Où est l'exemple ?

On y est presque, si la largeur du texte convient, maintenant on aimerait bien voir ce fond jaune sur toute la largeur totale sans que le texte occupe plus que ces 400px.

Theorie de l'exemple.

pour occuper toute la largeur, il n'est plus possible de de donner une largeur au paragraphe, on doit le laisser occuper toutes la largeur disponibles pour que son fond soit visible sur toute la largeur. Exit donc width et max-width.

Il nous reste l'option d'une marge interne via un padding.

Cette valeur de padding, si elle est fixe, ne correspondra au 400px de largeur pour le texte que seulement quand la fenetre, ou son parent, auront une valeur elle aussi fixe.

Quelles options avons nous ?

1. Les medias queries @media screen{}? - non, ça ne marche que par palier.
2. calc()? - à condition de connaitre la largeur initial de l'espace disponible
3. j'insiste, les media queries ? @container? - C'est déjà mieux
4. Les medias queries @container et calc() et padding- Oui, il y a un truc à faire,
   justement, comme le sujet est à propos des valeurs négatives et que padding les ignores. il y a une solution!

Notre exemple

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Comment est ce fait?

Les container queries viennent avec de nouvelles unités de mesures, ce sont elles que nous allons utiliser pour calculer notre padding. Quelles sont-elles?

1. cqw: 1% de largeur du conteneur declaré
2. cqh: 1% de hauteur du conteneur declaré
3. cqi: 1% de la taille en ligne du conteneur declaré
4. cqb: 1% de la taille en hauteur du conteneur declaré
5. cqmin: La plus petite valeur entre cqi et cqb
6. cqmax: La plus grande valeur entre cqi et cqb

Comment se sert on de ses valeurs dans l'exemple?

Pour que ces valeurs soient disponibles et calculées par le navigateur, il faut, via CSS, indiqué au parent choisi qu'il est un conteneur servant de reference au requetes de medias et que celles qui nous interessent sont ses dimensions de largeurs. Dans cette page, nous prenons la balise en indiquant le type de valeur à retourner, ce qui donne: article.article {container-type: inline-size;} et la largeur totale de ce conteneur sera disponible via :100cqw.

Maintenant que nous avons nos deux valeurs :

1. largeur du conteneur100cqw
2. largeur maximale du texte400px

Il suffit de retrancher 400px a 100cqw pour avoir le padding à appliqué via calc()., pour centré notre texte , il nous faut partagé se padding de chaque cotés

Le padding a appliqué au paragraphe dans <article class="article"> est : padding: 1em calc(50cqw - 200px ).

Et cette valeur négative?

Lorsque calc(50cqw - 200px ) retourne une valeur négative, les valeurs de padding deviennent invalides et sont ignorées par le navigateur.

Pour conservé ce padding latéral d'un em , il suffit de doublé notre déclaration de padding , les navigateurs appliqueront la derniere valide.

padding:1em;
padding: 1em calc(50cqw - 200px );

Conclusion

Une valeur négative calculée sur padding nous donne un max-padding qui aura pour le texte le même effet que nous voulions avec max-width.

Un minmax() pour le padding?

À l'aide de clamp() etcalc() , nous pouvons aussi simuler un minmax(padding).

ex:padding: 1em clamp(1em,calc(50cqw - 200px ),calc(50vw - 200px )).

Demo : Codepen minmax(padding).

Ressources

1. Container Querie
2. définition calc()