Qui n’a jamais rêvé de pouvoir utiliser les pseudo-classes CSS :first-child et :last-child sur le navigateur moribond Internet Explorer 6 ( B*rdel d’IE6 à la c*n pour les intimes ) ?

Voici une petite fonction javascript pour corriger le comportement d’IE6. Elle ne s’executera pas si l’utilisateur n’a pas de Javascript, mais rentrera parfaitement dans un processus de graceful degradation. Ses performances seront bien plus intéressantes qu’un IE7 JS uniquement pour cette propriété.

Tout d’abord, glissez cette fonction javascript dans un fichier externe, type messcripts.js :

function fix_firstlastchild(){
// Detection d'IE6, inutile si commentaires conditionnels
    if(navigator.userAgent.toLowerCase().indexOf('msie 6') != -1){
        var tags = document.getElementsByTagName("*");
        var nTags = tags.length;
        for (var i=0;i<nTags;i++) {
            if (tags[i].firstChild) {
                var el=tags[i].firstChild;
                while ((el.nodeType!=1) && (el.nextSibling))
                    el=el.nextSibling;
                if (el.nodeType==1) el.className += " firstChild";
            }
            if (tags[i].lastChild) {
                var el=tags[i].lastChild;
                while ((el.nodeType!=1) && (el.previousSibling))
                    el=el.previousSibling;
                if (el.nodeType==1) el.className += " lastChild";
            }
        }
    }
}

Ensuite, assurez vous d’executer cette fonction après le chargement des éléments de la page.
Donc juste avant la fermeture du </body>, ou dans un éventuel appel domready :

<!--[if IE 6]>
<script type="text/javascript">fix_firstlastchild();</script>
<![endif]-->

Dans votre CSS, un petit aménagement s’imposera également, le script créant des classes CSS lastChild et firstChild :

ul li:last-child, ul li.lastChild {}
ul li:first-child, ul li.firstChild {}

D’après un script trouvé sur The Bright Lines, légèrement modifié par mes soins.
Donc sous licence WTFPL, mais un backlink est toujours le bienvenu : )

Tags : , ,