Tutoriel : Les hacks CSS pour Internet Explorer

Bonjour à tous !
Ce que la plupart des webmasters désirent, c'est un affichage identique sur un maximum de navigateurs. Et très souvent, ça pose des difficultés avec Internet Explorer.
Heureusement, il existe les hacks CSS pour contourner pas mal de difficultés. Ne vous inquiétez pas, ce n'est pas du piratage. :p

Visitez aussi ce big-tuto écrit par un autre Zér0 : Faire un site compatible IE et FF. En effet, il n'y a pas que les hacks CSS pour résoudre les problèmes d'incompatibilité entre navigateurs.

Mais pourquoi avons-nous des difficultés avec Internet Explorer ?

Internet Explorer est le navigateur de Microsoft. La version 6 est sortie en 2001, et ne supporte pas la plupart des propriétés du CSS 2, ni le CSS 3. Pire, IE interprète différemment certaines propriétés (notamment les dimensions des boites CSS). Bref, c'est un vrai casse-tête de faire un design 100 % compatible IE.

Et la version 7, alors ?

Oui, la version 7 d'Internet Explorer va, je l'espère, résoudre un grand nombre de problèmes de CSS que nous rencontrons avec la version 6. Mais de toute façon, IE 6 est (et le sera encore pour un bon bout de temps) trop majoritairement utilisé, et nous webmasters, nous devons faire avec. :(

!important

!important est une règle CSS qui peut s'appliquer à toutes les propriétés. On l'utilise comme ceci :

balises {
  propriété : valeur !important;
}
/* Par exemple : */
body {
  background-color : green !important;
  background-color : red;
}

Pour expliquer son rôle, je vais vous expliquer l'exemple :
on a défini deux fois 'background-color'. Si on n'avait pas mis '!important', la valeur serait donc 'red', qui écrase la valeur 'green'.
Mais le fait d'avoir écrit '!important' après 'green', fait que c'est cette valeur qui est retenue. Donc théoriquement, le fond de la page sera en vert, et non en rouge.

IE ne comprend pas cette règle. Il l'ignore tout simplement. Tous les autres navigateurs modernes comprennent cette règle.
Faites le test avec l'exemple : Firefox affichera un fond vert, et IE affichera un fond rouge. :magicien:

Cas particulier

Voici une portion de code que j'ai dû écrire lors de la conception d'un design :

#header h1 {
  float: none !important;
  float: left;
}

C'est un cas particulier, car si je ne m'étais pas préoccupé d'IE, je n'aurais pas écris cette portion de code !
Parce que 'float: none' ne servirait à rien, puisque none est la valeur par défaut dans ce cas-ci.
Il est donc !important ( :lol: ) de connaître les valeurs par défaut pour utiliser pleinement le hack CSS !important.

* html

Voici comment utiliser ce hack :

* html balises {
/* Que pour IE */
}
 
/* Par exemple : */
* html body {
background-color: red;
}

Le signe * signifie : n'importe quelle balise.
Donc, "* html" signifie : n'importe quelle balise avant la balise html. Bien sûr, il n'en existe pas. C'est pour ça que les navigateurs modernes n'exécutent pas le code à l'intérieur.
De nouveau, Internet Explorer ne comprend pas cette règle, et exécute tout ce qu'il y a à l'intérieur.
Dans l'exemple ci-dessus, seul IE affichera un fond rouge.

Petit exercice

Au lieu d'utiliser le hack !important dans l'exemple qui suit, appliquez ce que nous venons de voir.

h1 {
  float: none !important;
  float: left;
}

La solution :

* html h1 {
  float: left;
}

C'est plus court comme ça :)

Commentaires <!--[if IE]>

Cette fois-ci, ce n'est pas vraiment un hack CSS, et ce n'est pas forcément pour le CSS.
C'est un commentaire spécial qu'Internet Explorer interprète volontairement (ce n'est pas un bug, comme le sont les autres hacks CSS qu'on a vu précédemment !).

<!--[if IE]>
Rien que pour IE ! Parce que les autres navigateurs interprètent ceci comme un commentaire.
<![endif]-->

Vous pouvez donc placer entre "" du code (X)HTML que seul IE va lire.

Une feuille de style en plus rien que pour IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
      <title>Bienvenue sur mon site !</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" href="style.css" />
      <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie.css" />
      <![endif]-->
   </head>
   <body>
   </body>
</html>

Dans cet exemple, seul Internet Explorer lit le fichier ie.css.
Remarquez qu'on appelle d'abord style.css (la feuille de style standard, pour tous les navigateurs), et ensuite ie.css. C'est le principe des feuilles de styles en cascade.

Spécifier les versions d'IE pour le commentaire conditionnel

En effet, nous pouvons spécifier pour quelle(s) version(s) d'IE le commentaire conditionnel doit s'appliquer.
Il est donc possible d'avoir une feuille de style pour la version 6 d'IE, et une autre pour la version 7, par exemple.
Je vous renvoie pour ça à ce tutoriel écrit par un autre Zér0 (à la partie concernant les commentaires conditionnels) : Faire un site compatible IE et FF.

Quel(s) hack(s) choisir ?

Vous choisissez ce que vous préférez ou ce que vous avez le mieux compris. ;)
Essayez en tout cas que votre code soit le plus compréhensible possible, donc pensez aux commentaires. ;)

Quoiqu'il en soit, si vous choisissez de faire une feuille de style rien que pour IE, n'utilisez pas les autres techniques (!important et * html), ça risque de vous embrouiller fortement. :euh:

Voilà : avec ces techniques, vous saurez plus facilement avoir un design identique sur un maximum de navigateurs, dont Internet Explorer !
Vous savez aussi faire un design complètement différent sur IE, par rapport aux autres navigateurs. Mais je n'en vois pas trop l'intérêt.

Dans ce cours, j'ai seulement présenté les hacks pour le navigateur de Microsoft.
Voici un tableau contenant beaucoup de hacks : il n'en existe donc pas seulement pour IE.

Et pour conclure, sachez qu'utiliser des hacks CSS rend le code moins lisible : donc, n'en abusez pas. Souvent, il y a moyen de s'en sortir sans !