CSS défensif

<p>Collection de snippets pour éviter certains problèmes CSS<br /> - Retour à la ligne en Flexbox → `flex-wrap: wrap;`<br /> - Ajouter de l’espace → `margin-right: 1rem;`<br /> - Contenu long qui ne doit pas passer à la ligne → `text-overflow: ellipsis; white-space:nowrap; overflow: hidden;`<br /> - Empêcher les images de s’étirer / se déformer → `object-fit: cover;`<br /> - Verrouiller le chaînage du scroll → `overscroll-behavior-y: contain;` <br /> - Fournir une valeur de repli pour une variable CSS → `max-width: calc(100% - var(--actions-width, 70px));`<br /> - Hauteur fixe → utiliser `min-height` plutôt que `height` <br /> - Largeur fixe → utiliser `min-width` plutôt que `width` <br /> - Supprimer la répétition de l’arrière-plan → `background-repeat: no-repeat;`<br /> - Utiliser des media queries verticales → pour des choses comme `position:sticky`, ne l’appliquer qu’au-delà d’une certaine hauteur verticale `@media (min-height:600px) {}`<br /> - Lors de l’agencement d’éléments Flexbox, utiliser `gap: 1rem;` au lieu de `justify-content: space-between;`<br /> - Quand on place du texte blanc sur une image, prévoir l’échec du chargement de l’image → utiliser `background-color: grey;` <br /> - Faire attention à l’utilisation de valeurs fixes dans CSS Grid → toujours utiliser des media queries <br /> - Afficher la barre de défilement seulement quand nécessaire → `overflow-y: auto;` <br /> - Éviter les changements de mise en page quand la barre de défilement apparaît → `scrollbar-gutter: stable;` <br /> - Définir la taille minimale du contenu en Flexbox → `min-width: 0;` (la valeur par défaut est `auto`, ce qui provoque un overflow)<br /> - Définir la taille minimale du contenu en CSS Grid → utiliser `minmax()` <br /> - En CSS Grid, Auto Fit vs. Auto Fill → dans la plupart des cas, `auto-fill` est préférable <br /> - Définir la largeur maximale des images → `max-width: 100%` <br /> - Lors de l’utilisation de `position: sticky` sur un enfant d’un conteneur grid, appliquer `align-self: start` <br /> - Les sélecteurs de groupe peuvent ne pas fonctionner dans certains navigateurs, donc les séparer individuellement</p>