Width: 100%, tu es le Mal !
La propriété CSS width est certainement celle qui porte le plus mal son nom.
En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame.
Il est dangereux de croire que width correspond à la largeur de l’élément puisque dès que des marges internes (paddings) ou bordures (border) y sont ajoutées, la taille totale de l’élément ne correspond plus du tout à width.
Et c’est d’autant plus problématique que l’on voit pulluler partout des width: 100%… ce qui crée potentiellement des éléments qui déborderont joyeusement de leur parent dès lors que le moindre padding ou la moindre bordure seront appliqués.
width: 100% c’est le mal !
C’est tout.
Dans la grande majorité des cas, on peut aisément se passer de width: 100%
- Vos éléments sont des blocks (div, p, h1, ul, etc.) ? Parfait, ils occupent déjà par défaut toute la largeur disponible, ne les ennuyez pas à préciser width,
- Vos éléments sont en position absolute ou fixed et doivent occuper toute la largeur ? Pas de souci, appliquez-leur plutôt un left et right à zéro,
- Vous avez un max-width: 100% sur vos images (et autres) pour les rendre “responsive” sur petits écrans ? Tout va bien, pensez à box-sizing: border-box,
- Pour les champs de formulaires ? Même solution : box-sizing: border-box
- Votre élément est un tableau HTML ? width 100% ne posera aucun problème car par défaut l’élément table est déjà en box-sizing: border-box donc les paddings et borders s’affichent à l’intérieur,
- Vous souhaitez “écraser” une valeur de width en redonnant à votre élément toute la largeur disponible ? Plutôt que la valeur 100%, pensez à la valeur par défaut de width, c’est à dire auto.
Voilà, ce n’est pas si dur de se passer de width: 100%, non ? ;)
