Le CSS est un langage cruel, d’apparence simple, dès la mise en œuvre, ça coince, ça « bug ». Pourtant, il n’y a pas de vrai bug. Pourquoi ? Il est fort possible que votre code soit bon, mais que votre demande soit mal formulée. Au final, le résultat n’est pas celui espéré. Pour comprendre ce problème, il faut savoir que certaines propriétés se combinent entre elles.
Je vous propose une petite liste des erreurs fréquentes de mauvaises formulations et combinaisons douteuses.
Cas facile : le doublon
Votre code semble bon, mais vous avez écrit deux fois la même propriété, elle se retrouve écrasée par la dernière instruction.
On écrase beaucoup de propriétés même en codant proprement, car c’est le principe même du CSS, néanmoins on peut se contredire dans les instructions et créer un résultat contraire.
Si vous ouvrez l’inspecteur de Chrome ou Firefox, la valeur est barrée.
Cas complexes
Plus difficile à comprendre, voir même stupide, certaines choses ne marchent pas comme prévu.
display:inline;widtht:
Il est fréquent de vouloir des liens <a href="">…</a> d’une certaine largeur (pour un menu). Or, les liens sont des éléments avec un display:inline, impossible de leur affecter une taille sans leur ajouter un autre display, le plus simple étant display:block ou display:inline-block.
margin:auto;
Sauf si le conteneur est en display:flex, margin:auto; centrera horizontalement votre élément seulement si celui-ci a une largeur définit avec width.
height:100%;
Par défaut le html et body s’adaptent à la hauteur de leur contenu mais le background remplit la hauteur du navigateur. Le height 100%, veut dire 100% de son ancêtre, mais avec un html et un body à la hauteur « ajustée » les problèmes sont assez fréquents. L’astuce est de passer par des unités viewport units basées sur la hauteur (vh) ou la largeur (vw) du viewport (l’écran ou l’intérieur du navigateur).
z-index:
La propriété z-index permet de jouer avec l’ordre des « calques », elle ne marche que si vous avez une position:absolute;, position:relative; ou position:fixed;
position:
La position absolute se rattache à l’ancêtre le plus proche en non static pour fonctionner avec top, left, bottom et right ou au body si aucun ancêtre n’est plus en static.
De plus, en sortant du flux, votre élément n’hérite plus de la largueur de son conteneur, il est parfois nécéssaire de remettre un width.