sept 16

Cibler et feinter Internet Explorer 6 dans son CSS

CSS Add comments



Dans la série IE6 voici 3 différentes manières de cibler IE6 dans votre code CSS:

  1. Avec le !important :
    La clause !important est comprise par tous les navigateurs sauf IE6 et elle permet de donner la priorité à une instruction même si elle est redéfinie par la suite. Dans l’exemple ci-dessous l’ objet d’identifiant « test » sera vert dans tous les navigateur et rouge sous IE6.

    1
2
3
4

     #test{
     background-color:green !important;
     background-color:red;
 }
  2. En semant IE6 avec des sélecteurs trop compliqués pour lui:
    IE6 ne lira pas les sélecteurs trop compliqués comme « #test[id]« . Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6

     #test{
     background-color:green;
 }
 #test[id]{
     background-color:red;
 }
  3. Avec les commentaires conditionnels :
    Les commentaires conditionnels doivent être insérés dans votre code HTML et permettent ici de restreindre certaines instructions CSS à IE6.Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6
7
8
9
10
11
12

     <style>
     #test{
         background-color:red;
     }
</style>
<!--[if IE 6]>
 <style>
     #test{
         background-color:green;
     }
</style>
<![endif]-->

A vous maintenant d’ appliquer ces exemples à vos problèmes.

N’ oubliez pas que l’ordre des instructions CSS est bien sûr important et que le doctype l’est aussi, comme celui-ci par exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Et n’oubliez pas non plus..la lutte continue ;-)

campagne-stop-ie6

Post to Twitter Twitter ce post

Mots-clefs :, , , ,

Leave a Reply