L’autre jour je mettais en ligne un site qui fut mon premier à avoir nécessité des ajustements pour Internet Explorer 8. En effet Microsoft a mis le paquet sur le respect des standards, mais peut-être un peu trop. Je m’explique : la pseudo-classe « :last-child » (dernier enfant d’un élément parent) n’est pas reconnue par IE8, et bien qu’extrèmement pratique, elle n’est pas valide d’après les spécifications CSS 2.0 du W3C. Je l’utilisais souvent et peut-être à tort, vu que la plupart des navigateurs la supportent.
Mon objectif : insérer le caractère » | » (pipe) entre chaque item d’une liste, sauf le dernier. Tout cela en CSS.
Avant
li { list-style-type: none; display: inline; float: left; } li:after { content: ' | '; } li:last-child:after { content: ''; }
Sous IE8, donne :
item | item | item |
Nous avons un » | » de trop à la fin, il faut trouver une autre manière d’écrire notre déclaration CSS :
Après
En utilisant le sélecteur d’enfant adjacent « li + li ».
li { list-style-type: none; display: inline; float: left; } li + li:before { content: ' | '; }
Qui sous Internet Explorer 8, donne :
item | item | item
› Notre liste est désormais correctement stylée sous tous les navigateurs modernes. Merci IE8 de m’avoir remis sur le droit chemin du codage CSS, je n’utiliserai plus :last-child.