> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Les hacks CSS pour Internet Explorer

> Lecture du tutoriel

Les hacks CSS pour Internet Explorer

Par

swilmet

Mise à jour : 22/08/2008

770 visites depuis 7 jours, classé 159/786

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.

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.

Retour en haut

Sommaire du tutoriel :

Mais pourquoi avons-nous des difficultés avec Internet Explorer ?
!important
* html
Commentaires <!--[if IE]>
Quel(s) hack(s) choisir ?

Retour en haut

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.

Retour en haut

!important

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

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 :
Code : CSS

#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.

Retour en haut

* html

Voici comment utiliser ce hack :
Code : CSS

* 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.
Code : CSS

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

"float: none" ne fait aucun changement pour un titre (ici h1).

La solution :
Secret (cliquez pour afficher)

Code : CSS

1
2
3

* html h1 {
  float: left;
}

C'est plus court comme ça

Retour en haut

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 !).

Code : Autre

1
2
3

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

C'est du (X)HTML ! N'essayez pas d'insérer ce code dans votre fichier CSS.

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

Une feuille de style en plus rien que pour IE

Code : Autre

<!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.

Vous appelez vos feuilles de style comme vous voulez : dans cet exemple, c'est "style.css" et "ie.css".

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.

Retour en haut

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:

Retour en haut

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 !

Retour en haut

Retour en haut

48 commentaires pour "Les hacks CSS pour Internet Explorer"

Note moyenne : 2.95 / 4 (19 votes)

Pseudo	Commentaire
mathrules4	# Posté le 11/08/2009 à 21:40:42
Québec power ! Ville : Victoriaville Pays : Canada	laisser vos commentaire sur le site 90% of teens today would die if Facebook was completely destroyed. If you are one of the 10% that would be laughing, copy and paste this to your signature.
Swink	# Posté le 04/09/2009 à 02:43:41
Blog Twitter close Études : AFPA Champs sur Marne	Merci pour ce tutoriel mais mathrules4 évite de mettre un lien de site de cul derrière une autre adresse. Les mots qu'on n'a pas prononcés sont les fleurs du silence “ Iwanu ga hana ” Mon site : http://www.snowleoo.com
MisterFr3sh	# Posté le 12/02/2010 à 20:16:04
	Mettez un asterisque devant une classe et elle ne sera lue que par IE6, 7, 8. Exemple: padding-left: 310px; (lu par tous) *padding-left: 0px; (lu par ie en priorité)
-lolo666-	# Posté le 05/01/2012 à 23:12:42
Prog, Hardware	Mais pourquoi doit-on TOUJOURS adapter notre code pour Internet Explorer ? è_é Le Site du Zér0, le paradis du geek, du programmeur, et du débutant !
mlo	# Posté le 18/04/2012 à 12:54:53
	Bonjour, Ce tuto est très intéressant mais personnellement, j'ai un autre problème. Pour un site web j'ai une barre de menu avec menu déroulant en javascript. Au niveau de ma barre de menu principale, horizontale, il y a un problème d'affichage car sous ff, mac et windows, mes boutons s'affichent correctement mais sou ff linux, le dernier bouton passe à la ligne d'en dessous. Existe-t-il un hack pour déjouer ça ? Merci de votre aide !