Choisir une feuille de style pour IE avec les commentaires conditionnels
Les commentaires conditionnels permettent de choirsir une feuille de style précise en fonction de la version d’Internet Explorer.
Le principe est simple. Il suffit de placer ce code entre les balises <head> et </head> de votre code html:
<!--[if IE]><link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" /><![endif]-->
Ce qui se traduit par: Si le navigateur est Internet Explorer, il faut utiliser cette feuille de style. On peut bien sûr utiliser une autre fonction entre les balises comme par exemple: indiquer au visiteur qu’on sait qu’il utilise Internet explorer !
Syntaxes et options possible pour les commentaires conditionnels:
- if IE 5 : Pour toutes les versions d’Internet Explorer 5 (5.0 – 5.5)
- if IE 6 : Pour la version 6 d’Internet Explorer
- if IE 7 : Pour la version 7 d’Internet Explorer
- lt : Pour toute les versions inférieurs à … (ex: if lt IE 6 –> Le code sera éxécuté par Internet Explorer 5 et 5.5)
- lte : Pour toute les versions inférieurs ou égales à … (ex: if lte IE 6 –> Le code sera éxécuté par Internet Explorer 5, 5.5 et 6)
- gt : Pour toute les versions supérieurs à … (ex: if gt IE 6 –> Le code sera éxécuté par Internet Explorer 7 et 8 )
- gte : Pour toute les versions supérieurs ou égales à … (ex: if gte IE 6 –> Le code sera éxécuté par Internet Explorer 6, 7 et 8 )
Voici un exemple de code que j’utilise régulierement:
<link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" /><!--[if lt IE6]><link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" /><![endif]--><!--[if lt IE7]><link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" /><![endif]--><!--[if gte IE7]><link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" /><![endif]-->
Dans cet exemple, la première ligne sera utilisé par firefox (Safari su mac). Il faut donc construire le CSS autour de ce navigateur.
Ensuite pour les feuilles de styles spécifiquent aux versions de IE, il suffira de modifier les lignes qui provoquent une mauvaise mise en page.
