CSS: Pseudo classes sur Internet Explorer

Grâce aux expressions CSS d'Internet Explorer, il y a moyen de simuler les pseudo-classes qui ne sont pas supportées par IE6.

Les expressions CSS d'Internet Explorer

En effet, les expressions CSS (apparues avec IE5) permettent de calculer dynamiquement (via JScript) les différentes propriétés stylistiques.

On attribue une valeur calculée par JScript à une propriété CSS d'un élément html. Les différents objets du DOM sont supportés

#centeredDiv {
	position:absolute;
	left:
		expression(
			(document.body.clientWidth/2)-
			(this.offsetWidth/2)
		);
	top:
		expression(
			(document.body.clientHeight/2)-
			(this.offsetWidth/2)
		);
}

Sur Internet Explorer, cet exemple positionnerait l'élément ayant un id centeredDiv au centre de la page en le positionnant à la différence de la moitié hauteur de la page (document.body.clientHeight/2) et de la moitié de sa hauteur (this.offsetWidth/2). Notez que this représente l'objet en lui-même.

Les pseudo-classes :first-child et :last-child sur Internet Explorer

Avant Internet Explorer 7, ces pseudo-classes (propriétées qui ne sont pas issues d'éléments html en eux-mêmes) n'étaient pas supportées. Donc, galère pour les intégrateurs pour produire du code html compatible entre les différents navigateurs.

Grâce aux expressions CSS, ce manque de support des pseudo-classes peut être corrigé.

Pseudo-classe :first-child sur IE<=6
li {
	background-image:
		expression(
			(this===this.parentNode.childNodes[0])
			?"none":"auto"
		);
}
Explication du code:

L'élément à styler est les tags LI. Je définis à l'aide d'une expression CSS la valeur de la propriété background-image.

Si l'élément en question (le LI représenté par this est strictement égal (===: égalité de la valeur et de type d'élément) au premier enfant (.childNode[0]) de l'élément parent de l'objet LI en question (this.parentNode), la valeur de l'image de fond sera none.

Dans le cas contraire, l'image de fond sera la valeur par défaut (via héritance) d'un list-item.

Pseudo-classe :last-child sur IE<=6
li {
	background-image:
		expression(
			(this===this.parentNode.childNodes[this.parentNode.childNodes.length-1])
			?"none":"auto"
		);
}
Explication du code:

Dans ce cas-ci, je ne vise pas le premier élément de la liste d'enfants de l'élément parent (this.parentNode.childNodes[0]) mais bien le dernier (this.parentNode.childNodes[this.parentNode.childNodes.length-1], l'élément à la dernière position de l'array childNodes est l'élément ayant la position égale à la longueur de l'array moins un).

Si l'élément en question (le LI représenté par this est strictement égal (===: égalité de la valeur et de type d'élément) au premier enfant (.childNode[0]) de l'élément parent de l'objet LI en question (this.parentNode), la valeur de l'image de fond sera none.

Dans le cas contraire, l'image de fond sera la valeur par défaut (via héritance) d'un list-item.

Code html et programmation simplifiée.

Maintenant que l'on peut simuler un équivalent des pseudo-classes sur Internet Explorer, le code html (ou la programmation de celui-ci) pourra être simplifié.

Prenons une liste de liens séparés par un élément graphique (une petite barre verticale).

Exemple de navigation horizontale séparée par des éléments graphiques

Avant, si on mettait le séparateur vertical en background-image d'un élément de liste, pour avoir du code html compatible avec autant IE6 et Firefox, il fallait spécifier une classe CSS au premier ou au dernier élément de la liste pour ne pas mettre d'image de fond sur le premier ou dernier élément.

<ul class="fxNav">
	<li class="firstChild"><a href="/solutions/index.php">Solutions</a></li>
	<li><a href="/products/index.php">Produits</a></li>
	<li><a href="/support/index.php">Support</a></li>
	<li><a href="/communities/index.php">Communautés</a></li>
	<li><a href="/company/index.php">Société</a></li>
	<li><a href="/download/index.php">Télécharger</a></li>
	<li><a href="/store/index.php">Store</a></li>
</ul>

Maintenant grâce à l'équivalent des pseudo-classes CSS sur Internet Explorer, les développeurs peuvent supprimer une condition dans leur code!

<ul class="fxNav">
	<li><a href="/solutions/index.php">Solutions</a></li>
	<li><a href="/products/index.php">Produits</a></li>
	<li><a href="/support/index.php">Support</a></li>
	<li><a href="/communities/index.php">Communautés</a></li>
	<li><a href="/company/index.php">Société</a></li>
	<li><a href="/download/index.php">Télécharger</a></li>
	<li><a href="/store/index.php">Store</a></li>
</ul>

Le code en pratique.

ul.fxNav, ul.fxNav li {
	list-style-type:none;
	margin:0;padding:0;
	display:inline;
}
ul.fxNav li {
	text-transform:uppercase;
	font-size:1em;
	padding:0 5px 0 7px;
	background:url(pipe.gif) no-repeat 0 50%;
}
ul.fxNav li:first-child {
	background:none;
}

Pour tous les navigateurs, je définis que les éléments LI ont une image de fond (pipe.gif). Après cela, je réécris l'instruction pour le premier li de la liste ayant une class fxNav.

Ceci marche sur Firefox, Opera, Safari et IE7.

Pour rendre ceci compatible avec les versions précédentes d'Internet Explorer, je rajoute des instructions, propres aux versions concernées d'IE et après les instructions CSS communes, mises dans des commentaires conditionnels pour conserver du code valide.

<!--[if lte IE 6]>
<style type="text/css">
ul.fxNav li {
	background-image:
		expression(
			(this===this.parentNode.childNodes[0])?
			"none":"auto"
		);
}
</style>
<![endif]-->

Je mets à votre disposition d'un exemple de pseudo-class :first-child qui fonctionne sur IE <=7. En espérant que ça vous sera utile !

Liens relatifs :

Comments

14 commentaires à “CSS: Pseudo classes sur Internet Explorer”

  1. Vinch le 09/04/2007 à 17h52.

    Super pratique tout ça !
    J'y avais jeté un oeil aussi et j'ai trouvé une bonne façon de simuler max-width sur IE : http://developpeur.journaldunet.com/tutoriel/dht/050427-css-ie-max-width.shtml

  2. Marin le 09/04/2007 à 18h00.

    Vraiment super pratique les expressions d'Internet Explorer. J'espère qu'une mise à jour ne viendra pas les désactiver :)

  3. Country le 10/04/2007 à 12h20.

    Enfin, ça reste du javascript, donc dès qu'un visiteur (sous IE) a le malheur d'avoir javascript désactivé il risque d'avoir le design totalement détruit.

    Donc à utiliser avec prudence.

  4. Marin le 10/04/2007 à 12h21.

    Un autre sélecteur qui n'existe pas sur IE: le "adjacent selector"

    Les vrais navigateurs comprennent:

    h3+h4 {
    background-color:#FC0
    }

    qui veut dire qu'un H4 précédé d'un H3 aura une couleur jaune. Evidemment ça ne marche pas sous IE6.

    Pour corriger ceci: voici le code:

    <!--[if lte IE 6]>
    <style type="text/css">
    h4 {
    background-color:expression((this.previousSibling.tagName=="H3")?"#FC0":"auto");
    }
    </style>
    <![endif]-->

  5. Marin le 10/04/2007 à 12h30.

    @Country: en effet, les expressions ne passent pas avec javascript désactivé. Il faut effectivement utiliser avec modération. Ou alors migrer vers un navigateur qui supporte mieux les standards css que les anciennes versions de IE.

  6. Barney le 10/04/2007 à 15h40.

    Genial, genial! Je n'entends sur ces 'behaviours' IE que rarement, qui fait que je n'en avais pas grande confiance... Mais quand on me presente une technique complete comme celle-si, et de plus que ca soit bien explique, ca fait toute la difference.

    Merci bien.

    Marin:
    Mise a jour?! Produit Microsoft?!? T'inquiete, ca viendra pas ce siecle!

  7. Adri le 10/04/2007 à 16h40.

    Kéé GEEEEEEEEEEEK quoi!

  8. Ced le 02/08/2007 à 09h23.

    Je viens de tomber là-dessus : Avoid CSS Expressions
    http://developer.yahoo.com/performance/rules.html#css_expressions

  9. Marin le 02/08/2007 à 10h14.

    Yep Ced, j'ai vu que les expressions étaient interprétées plus qu'une seule fois au chargement de la page. Je vais investiguer sur "the first time the expression is evaluated it sets the style property to an explicit value".

  10. Article presentant divers hack CSS le 05/12/2007 à 13h52.

    [...] si vous préférez cette dernière méthode vous pouvez voir de quoi il retourner sur le JDN ou sur Gatellier.be (perso je préfère faire le max en CSS sir c’est [...]

  11. css selector pour s le 22/01/2009 à 16h26.

    [...] avec IE <=6 > Mais si, il suffit de terminer le d

  12. Romain le 12/02/2009 à 08h50.

    Je trouve que ces expressions css tuent la vache.
    Radicalement.

  13. Hiswe le 17/03/2009 à 17h39.

    C'est étrange je n'ai réussit à le faire fonctionner qu'en mettant :
    expression((this === this.parentNode.childNodes[1])?

    pourtant je n'ai qu'une qui englobe des ...

  14. Hiswe le 14/05/2009 à 11h34.

    En fait c'était du au fait qu'ie6 interprète aussi les commentaires comme une vraie balise.

Laissez un commentaire