Problème
Définir ou créer une feuille de style uniquement pour Internet Explorer.
Définir ou créer une feuille de style uniquement pour Internet Explorer.
Si vous êtes un créateur de sites Web, vous avez peut-être fait l'expérience des bugs d'Internet Explorer. La plupart du temps, vous ne pouvez pas y échapper, peut-être à cause des exigences du projet ou parce que votre client utilise toujours une ancienne version d'Internet Explorer (IE). Alors, faisons face à ce problème.
Chaque version d'IE se comporte un peu différemment des autres. Nous définissons donc des feuilles de style distinctes pour les différentes versions des navigateurs IE afin de localiser le problème exact dans une version spécifique.
Disons que la propriété CSS que vous avez définie pour un élément ne fonctionne pas comme prévu dans IE, mais qu'elle fonctionne parfaitement dans d'autres navigateurs comme Firefox ou Chrome. Ce que nous faisons, c'est définir une feuille de style qui ne cible que le navigateur IE, puis ajuster la valeur de cette propriété ou en ajouter une nouvelle à cette feuille de style pour résoudre le problème. Voici un exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE Only Style Sheet</title>
<link rel="stylesheet" href="css/default.css">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body>
<h1>Define Style Sheet for IE</h1>
<p>If you open this page in IE the output will be different.</p>
</body>
</html>
Les balises d'ouverture et de fermeture des feuilles de style conditionnelles ne sont que des commentaires HTML ordinaires. Entre les crochets sont placées des déclarations conditionnelles qui ont la signification suivante.
Les instructions conditionnelles sont probablement le moyen le plus courant de créer des feuilles de style pour IE uniquement afin de corriger les bugs d'IE, notamment dans les anciennes versions. La section suivante résume la syntaxe permettant de cibler les différentes versions du navigateur Internet Explorer.
Cibler toutes les versions d'IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie-only.css">
<![endif]-->
Cibler tous les navigateurs sauf IE
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="css/all-except-ie.css">
<![endif]-->
Cibler uniquement la version IE9
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css">
<![endif]-->
Cibler IE9 et les versions supérieures
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/ie9-and-higher.css">
<![endif]-->
De même, vous pouvez définir une feuille de style pour d'autres versions d'Internet Explorer.