CSS défensif

Collection de snippets pour éviter certains problèmes CSS

• Retour à la ligne en Flexbox → flex-wrap: wrap;

• Ajouter de l’espace → margin-right: 1rem;

• Contenu long qui ne doit pas passer à la ligne → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Empêcher les images de s’étirer / se déformer → object-fit: cover;

• Verrouiller le chaînage du scroll → overscroll-behavior-y: contain;

• Fournir une valeur de repli pour une variable CSS → max-width: calc(100% - var(--actions-width, 70px));

• Hauteur fixe → utiliser min-height plutôt que height

• Largeur fixe → utiliser min-width plutôt que width

• Supprimer la répétition de l’arrière-plan → background-repeat: no-repeat;

• 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) {}

• Lors de l’agencement d’éléments Flexbox, utiliser gap: 1rem; au lieu de justify-content: space-between;

• Quand on place du texte blanc sur une image, prévoir l’échec du chargement de l’image → utiliser background-color: grey;

• Faire attention à l’utilisation de valeurs fixes dans CSS Grid → toujours utiliser des media queries

• Afficher la barre de défilement seulement quand nécessaire → overflow-y: auto;

• Éviter les changements de mise en page quand la barre de défilement apparaît → scrollbar-gutter: stable;

• Définir la taille minimale du contenu en Flexbox → min-width: 0; (la valeur par défaut est auto, ce qui provoque un overflow)

• Définir la taille minimale du contenu en CSS Grid → utiliser minmax()

• En CSS Grid, Auto Fit vs. Auto Fill → dans la plupart des cas, auto-fill est préférable

• Définir la largeur maximale des images → max-width: 100%

• Lors de l’utilisation de position: sticky sur un enfant d’un conteneur grid, appliquer align-self: start

• Les sélecteurs de groupe peuvent ne pas fonctionner dans certains navigateurs, donc les séparer individuellement