{"id":176,"date":"2007-04-09T17:42:12","date_gmt":"2007-04-09T15:42:12","guid":{"rendered":"http:\/\/www.gatellier.be\/blog\/?p=176"},"modified":"2007-04-09T17:42:12","modified_gmt":"2007-04-09T15:42:12","slug":"css-pseudo-classes-internet-explorer","status":"publish","type":"post","link":"https:\/\/gatellier.be\/blog\/css-pseudo-classes-internet-explorer\/","title":{"rendered":"CSS: Pseudo classes sur Internet Explorer"},"content":{"rendered":"

Gr\u00e2ce aux expressions CSS<\/acronym> d’Internet Explorer<\/a><\/strong>, il y a moyen de simuler les pseudo-classes<\/strong> qui ne sont pas support\u00e9es par IE6.<\/p>\n

Les expressions CSS d’Internet Explorer<\/h3>\n

En effet, les expressions CSS (apparues avec IE5) permettent de calculer dynamiquement<\/strong> (via JScript) les diff\u00e9rentes propri\u00e9t\u00e9s stylistiques.<\/p>\n

On attribue une valeur calcul\u00e9e par JScript \u00e0 une propri\u00e9t\u00e9 CSS d’un \u00e9l\u00e9ment html. Les diff\u00e9rents objets du DOM<\/acronym> sont support\u00e9s<\/p>\n

\r\n#centeredDiv {\r\n\tposition:absolute;\r\n\tleft:\r\n\t\texpression(\r\n\t\t\t(document.body.clientWidth\/2)-\r\n\t\t\t(this.offsetWidth\/2)\r\n\t\t);\r\n\ttop:\r\n\t\texpression(\r\n\t\t\t(document.body.clientHeight\/2)-\r\n\t\t\t(this.offsetWidth\/2)\r\n\t\t);\r\n}\r\n<\/pre>\n
Sur Internet Explorer, cet exemple positionnerait l’\u00e9l\u00e9ment ayant un id centeredDiv<\/code> au centre de la page en le positionnant \u00e0 la diff\u00e9rence de la moiti\u00e9 hauteur de la page (document.body.clientHeight\/2<\/code>) et de la moiti\u00e9 de sa hauteur (this.offsetWidth\/2<\/code>). Notez que this<\/strong><\/code> repr\u00e9sente l’objet en lui-m\u00eame.<\/p>\n
<\/p>\n
Les pseudo-classes :first-child<\/strong> et :last-child<\/strong> sur Internet Explorer<\/h4>\n
Avant Internet Explorer 7, ces pseudo-classes<\/strong> (propri\u00e9t\u00e9es qui ne sont pas issues d’\u00e9l\u00e9ments html en eux-m\u00eames) n’\u00e9taient pas support\u00e9es. Donc, gal\u00e8re pour les int\u00e9grateurs pour produire du code html compatible<\/strong> entre les diff\u00e9rents navigateurs.<\/p>\n
Gr\u00e2ce aux expressions CSS<\/strong>, ce manque de support des pseudo-classes peut \u00eatre corrig\u00e9.<\/p>\n
Pseudo-classe :first-child<\/code> sur IE<=6<\/h5>\n
\r\nli {\r\n\tbackground-image:\r\n\t\texpression(\r\n\t\t\t(this===this.parentNode.childNodes[0])\r\n\t\t\t?"none":"auto"\r\n\t\t);\r\n}\r\n<\/pre>\n
Explication du code:<\/h6>\n
L’\u00e9l\u00e9ment \u00e0 styler est les tags LI<\/code>. Je d\u00e9finis \u00e0 l’aide d’une expression CSS la valeur de la propri\u00e9t\u00e9 background-image<\/code>.<\/p>\n
Si l’\u00e9l\u00e9ment en question (le LI<\/code> repr\u00e9sent\u00e9 par this<\/code> est strictement \u00e9gal (===<\/code>: \u00e9galit\u00e9 de la valeur et de type d’\u00e9l\u00e9ment) au premier enfant (.childNode[0]<\/code>) de l’\u00e9l\u00e9ment parent de l’objet LI<\/code> en question (this.parentNode<\/code>), la valeur de l’image de fond sera none<\/code>.<\/p>\n
Dans le cas contraire, l’image de fond sera la valeur par d\u00e9faut (via h\u00e9ritance) d’un list-item.<\/p>\n
Pseudo-classe :last-child<\/code> sur IE<=6<\/h5>\n
\r\nli {\r\n\tbackground-image:\r\n\t\texpression(\r\n\t\t\t(this===this.parentNode.childNodes[this.parentNode.childNodes.length-1])\r\n\t\t\t?"none":"auto"\r\n\t\t);\r\n}\r\n<\/pre>\n
Explication du code:<\/h6>\n
Dans ce cas-ci, je ne vise pas le premier \u00e9l\u00e9ment de la liste d’enfants de l’\u00e9l\u00e9ment parent (this.parentNode.childNodes[0]<\/code>) mais bien le dernier (this.parentNode.childNodes[this.parentNode.childNodes.length-1]<\/code>, l’\u00e9l\u00e9ment \u00e0 la derni\u00e8re position de l’array childNodes<\/code> est l’\u00e9l\u00e9ment ayant la position \u00e9gale \u00e0 la longueur de l’array moins un).<\/p>\n
Si l’\u00e9l\u00e9ment en question (le LI<\/code> repr\u00e9sent\u00e9 par this<\/code> est strictement \u00e9gal (===<\/code>: \u00e9galit\u00e9 de la valeur et de type d’\u00e9l\u00e9ment) au premier enfant (.childNode[0]<\/code>) de l’\u00e9l\u00e9ment parent de l’objet LI<\/code> en question (this.parentNode<\/code>), la valeur de l’image de fond sera none<\/code>.<\/p>\n
Dans le cas contraire, l’image de fond sera la valeur par d\u00e9faut (via h\u00e9ritance) d’un list-item.<\/p>\n
Code html et programmation simplifi\u00e9e.<\/h3>\n
Maintenant que l’on peut simuler un \u00e9quivalent des pseudo-classes sur Internet Explorer, le code html (ou la programmation de celui-ci) pourra \u00eatre simplifi\u00e9.<\/p>\n
Prenons une liste de liens s\u00e9par\u00e9s par un \u00e9l\u00e9ment graphique (une petite barre verticale).<\/p>\n
\"Exemple<\/a><\/p>\n
Avant, si on mettait le s\u00e9parateur vertical en background-image<\/code> d’un \u00e9l\u00e9ment de liste, pour avoir du code html compatible avec autant IE6 et Firefox, il fallait sp\u00e9cifier une classe CSS au premier ou au dernier \u00e9l\u00e9ment de la liste pour ne pas mettre d’image de fond sur le premier ou dernier \u00e9l\u00e9ment.<\/p>\n
\r\n<ul class="fxNav">\r\n\t<li class="firstChild"><a href="\/solutions\/index.php">Solutions<\/a><\/li>\r\n\t<li><a href="\/products\/index.php">Produits<\/a><\/li>\r\n\t<li><a href="\/support\/index.php">Support<\/a><\/li>\r\n\t<li><a href="\/communities\/index.php">Communaut\u00e9s<\/a><\/li>\r\n\t<li><a href="\/company\/index.php">Soci\u00e9t\u00e9<\/a><\/li>\r\n\t<li><a href="\/download\/index.php">T\u00e9l\u00e9charger<\/a><\/li>\r\n\t<li><a href="\/store\/index.php">Store<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
Maintenant gr\u00e2ce \u00e0 l’\u00e9quivalent des pseudo-classes CSS sur Internet Explorer, les d\u00e9veloppeurs peuvent supprimer une condition dans leur code!<\/p>\n
\r\n<ul class="fxNav">\r\n\t<li><a href="\/solutions\/index.php">Solutions<\/a><\/li>\r\n\t<li><a href="\/products\/index.php">Produits<\/a><\/li>\r\n\t<li><a href="\/support\/index.php">Support<\/a><\/li>\r\n\t<li><a href="\/communities\/index.php">Communaut\u00e9s<\/a><\/li>\r\n\t<li><a href="\/company\/index.php">Soci\u00e9t\u00e9<\/a><\/li>\r\n\t<li><a href="\/download\/index.php">T\u00e9l\u00e9charger<\/a><\/li>\r\n\t<li><a href="\/store\/index.php">Store<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
Le code en pratique.<\/h3>\n
\r\nul.fxNav, ul.fxNav li {\r\n\tlist-style-type:none;\r\n\tmargin:0;padding:0;\r\n\tdisplay:inline;\r\n}\r\nul.fxNav li {\r\n\ttext-transform:uppercase;\r\n\tfont-size:1em;\r\n\tpadding:0 5px 0 7px;\r\n\tbackground:url(pipe.gif) no-repeat 0 50%;\r\n}\r\nul.fxNav li:first-child {\r\n\tbackground:none;\r\n}\r\n<\/pre>\n
Pour tous les navigateurs, je d\u00e9finis que les \u00e9l\u00e9ments LI<\/code> ont une image de fond (pipe.gif<\/code>). Apr\u00e8s cela, je r\u00e9\u00e9cris<\/strong> l’instruction pour le premier li<\/code> de la liste ayant une class fxNav<\/code>.<\/p>\n
Ceci marche sur Firefox, Opera, Safari et IE7.<\/p>\n
Pour rendre ceci compatible avec les versions pr\u00e9c\u00e9dentes d’Internet Explorer<\/strong>, je rajoute des instructions, propres aux versions concern\u00e9es d’IE et apr\u00e8s les instructions CSS communes, mises dans des commentaires conditionnels<\/strong> pour conserver du code valide<\/strong>.<\/p>\n
\r\n<!--&#91;if lte IE 6&#93;>\r\n<style type="text\/css">\r\nul.fxNav li {\r\n\tbackground-image:\r\n\t\texpression(\r\n\t\t\t(this===this.parentNode.childNodes&#91;0&#93;)?\r\n\t\t\t"none":"auto"\r\n\t\t);\r\n}\r\n<\/style>\r\n<!&#91;endif&#93;-->\r\n<\/pre>\n
Je mets \u00e0 votre disposition d’un exemple de pseudo-class :first-child qui fonctionne sur IE <=7<\/a>. En esp\u00e9rant que \u00e7a vous sera utile !<\/p>\n
Liens relatifs :<\/h4>\n