CSS / 3 colonnes / en-tête / pied de page
pas de javascript, pas de tableau, pas d'image
Remplacer les hacks par des commentaires conditionnels pour MSIE.
La compatibilité avec plusieurs navigateurs est parfois difficile à réaliser.
Une fois le DOCTYPE choisi, les margins et paddings fixés, Mozilla et Opera donnent sensiblement le même résultat à l'écran.
Il faut donc cacher des règles ou des valeurs à IE grâce à des filtres ou "hacks" ou bien utiliser des commentaires conditionnels (syntaxe).
Seul MSIE interprète ces commentaires.
De plus, comme ce qui est entre ces commentaires n'est pas examiné par le validateur W3C, la syntaxe sera validée.
Placer les instructions
Les règles destinées aux navigateurs respectant les spécifications W3C vont donc être placées en premier et seront suivies de celles destinées aux différentes versions de MSIE.
<style type="text/css">
<!--
/*<![CDATA[*/
@import "css/hacks.css";
#menu li a{
width:135px;
}
/*]]>*/
-->
</style>
<!--[if lt IE 6]>
<style type="text/css">
@import "css/hacks_ie5.x.css";
#menu li a{
width:155px;
}
</style>
<![endif]-->
<!--[if lt IE 5.5]>
<style type="text/css">
#menu li{
border-bottom:0;
}
</style>
<![endif]-->
Cacher une règle
Toute règle placée entre des commentaires conditionnels ne sera lue que par MSIE.
On peut redéfinir une règle, mais il est impossible de le faire avec div:first-letter par exemple.
Ici, des commentaires conditionnels permettent de dire que vous n'utilisez pas MSIE.
Si vous voulez cacher une règle comme :first-letter à MSIE, vous pouvez utiliser :
<!--[if !IE]>-->
<style type="text/css">
p:first-letter,div:first-letter{
font-weight:bold;
}
</style>
<!--<![endif]-->
au lieu d'avoir dans la feuille de style
html>body p:first-letter,html>body div:first-letter{
font-weight:bold;
}
Si vous voulez cacher une règle comme height:1%; à Mozilla et Opera, vous pouvez utiliser :
<!--[if IE]>
<style type="text/css">
#menubas{
height:1%;
}
</style>
<![endif]-->
au lieu d'avoir dans la feuille de style
* html #menubas{
height:1%; /*ne sera pas appliqué par MSIE 7*/
}
Si vous voulez cacher une règle destinée à MSIE comme display:inline-block; ou top:expression(body.scrollTop + 0 + "px"); et passer la validation W3C :
<!--[if IE]>
<style type="text/css">
.box{
display:inline-block;
}
#menu_fixe ul{
top:expression(body.scrollTop + 0 + "px");
}
</style>
<![endif]-->
Fixer une valeur
Si vous voulez fixer des valeurs différentes à margin à IE/Win 5, 5.5 et 6 (en Mode "Standard Compliant" grâce au DOCTYPE), vous pouvez utiliser :
<!--[if lt IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.5em 0 -.4em 0;/*valeur pour MSIE 5*/
}
</style>
<![endif]-->
<!--[if IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.4em 0 0;/*valeur pour MSIE 5.5*/
}
</style>
<![endif]-->
<!--[if gt IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.2em 0 0; /*valeur pour MSIE 6 et au dessus*/
}
</style>
<![endif]-->
au lieu de
#zone_haut dl{
margin:-.1em 0 0; /*tous sauf MSIE/Win*/
}
/* caché pour IE_Mac début\*/
* html #zone_haut dl{
margin:-.5em 0 -.4em 0;/*valeur pour MSIE 5*/
}
* html #zone_haut dl/**/{
margin/**/:-.4em 0 0; /*valeur pour MSIE 5.5*/
margin:/**/-.2em 0 0; /*valeur pour MSIE 6*/
}
/* fin - IE_Mac reprend sa lecture*/
Ces commentaires permettent de régler la plupart des problèmes d'affichage si vous utilisez le Mode "Standard Compliant".
Valeurs possibles avec
- ! = non (par exemple <!--[if !IE 5.0]>)
- lte = inférieur ou égal à
- lt = inférieur à
- IE = version concernée
- gte = supérieur ou égal à
- gt = supérieur à
- IE (toutes les versions)
- lte IE 5 IE 5 gte IE 5 gt IE 5
- lte IE 5.0 IE 5.0 gte IE 5.0 gt IE 5.0
- lt IE 5.5000 lte IE 5.5000 IE 5.5000 gte IE 5.5000 gt IE 5.5000
- lt IE 6 lte IE 6 IE 6 gte IE 6 gt IE 6
- lt IE 7.0 lte IE 7.0 IE 7.0 gte IE 7.0
- lt IE 7 lte IE 7 IE 7 gte IE 7