post 29 of 32 · 12 June 2008 · written in French
Emulating :first-child in IE6
Emuler l’attribut CSS :first-child sous IE6
Internet Explorer 6 ignored :first-child, so the post fakes it with a CSS expression(), which ran JavaScript inside a stylesheet: red if the element has no previous sibling, green otherwise. It doesn't validate, so it belongs in a separate IE stylesheet, and it fails without JavaScript, which the author accepts since sites only needed to work acceptably in IE6.
L’attribut CSS :first-child est bien utile dans de nombreux cas. Pour rappel, il permet de cibler le premier enfant d’un élément.
Par exemple, via le code suivant, vous aurez le premier div enfant du div “monDiv” qui sera rouge, et les deux autres verts :
HTML :
<div id="monDiv"> <div>Hello</div> <div>Crazy</div> <div>World</div> </div>
CSS :
div#monDiv div {
background-color:green;
}
div#monDiv div:first-child {
background-color:red;
}
Ca qui donnera :
Hello Crazy WorldIE6 ne gérant pas l’attribut first-child, nous allons l’émuler via du javascript directement dans le CSS via la propriété expression :
div#monDiv div {
background-color: expression(this.previousSibling==null?'red':'green');
}
Comme vous avez sans doute compris, la propriété expression permet de mettre du code JS dans la feuille de style CSS, en ayant le keyword this associé à l’élément. Cela ouvre pas mal de possibilités (welcome to the dark side).
Ce code ne valide pas, donc est a mettre dans une feuille de style à part via des conditional comments.
A noter que ce code ne fonctionnera pas si le javascript n’est pas activé. Néanmoins, à l’heure actuelle, AMHA on est est plus a faire des sites devant fonctionner parfaitement sur IE6, mais simplement des sites fonctionnant convenablement, donc cette solution est acceptable.