Comment faire des conditionnels IE en CSS?

Question

Si je veux ajouter un rembourrage en fonction du navigateur que l'utilisateur consulte la page, est-il un moyen de CSS que je peux faire quelque chose comme:

si IE ne padding: 5px; sinon sinon IE faire rembourrage 10px;

Answer 1

Voici une excellente référence: Quirksmode.org Conditional Comments. Bien que la structure de contrôle se trouve dans le balisage et non dans le CSS, elle atteint votre objectif et est généralement considérée comme la meilleure pratique lors du traitement de feuilles de style spécifiques au navigateur.

Answer 2

La façon la plus pratique est d'avoir une seule feuille de style pour IE uniquement des corrections, comme ceci:

<link rel="stylesheet" href="styles.css" media="screen" type="text/css" /> 
<!--[if IE]> 
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" /> 
<![endif]--> 

Ensuite, il suffit de problème remplacent les styles causant spécifiques dans le fichier ie-styles.css.

Answer 3

Si vous ne vous dérange pas la laideur dans votre code, vous pouvez utiliser quelque chose comme le houx bidouille:

div { padding:5px; } 
* html div { padding:10px; } 

Il y a un bel exemple CSS Zen Garden qui le fait de présenter deux conceptions distinctes, mais je ne ne rappelle pas son nom.

Answer 4

Bien que le conditionnel IE puisse être utilisé uniquement en html et non en CSS, vous pouvez utiliser ce qui suit dans vos fichiers CSS pour vos tests/hacks rapides et courts.

p { 
    /* all browsers */ 
    background-color: red; 

    /* for IE7 and below - append a * before the property */ 
    *background-color: blue; 

    /* for IE6 and below - append a _ before the property */ 
    _background-color: green; 
    } 

Alors que vous pouvez utiliser pour vos besoins rapides et courts, je pense, vous devez suivre la suggestion faite par Mark Hurd donnée ci-dessus pour les codes lourds au niveau de la production.

Answer 5

cible toutes les versions de IE

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]--> 

tout SAUF cible IE

<!--[if !IE]><!--> 
<link rel="stylesheet" type="text/css" href="not-ie.css" /> 
<!--<![endif]--> 

cible IE 7 SEULEMENT

<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7.css"> 
<![endif]--> 

cible IE 6 SEULEMENT

<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]--> 

cible IE 5 SEULEMENT

<!--[if IE 5]> 
<link rel="stylesheet" type="text/css" href="ie5.css" /> 
<![endif]--> 

cible IE 5.5 SEULEMENT

<!--[if IE 5.5000]> 
<link rel="stylesheet" type="text/css" href="ie55.css" /> 
<![endif]--> 

cible IE 6 et LOWER

<!--[if lt IE 7]> 
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 6]> 
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

cible IE 7 et LOWER

<!--[if lt IE 8]> 
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

cible IE 8 et LOWER

<!--[if lt IE 9]> 
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 8]> 
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

cible IE 6 et supérieur

<!--[if gt IE 5.5]> 
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 6]> 
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 

cible IE 7 et supérieur

<!--[if gt IE 6]> 
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 

cible IE 8 et supérieur

<!--[if gt IE 7]> 
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 8]> 
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 

Pour référence complète sur le sujet, Chris Coyier: How To Create an IE-Only Stylesheet

Answer 6

est ici un moyen plus propre pour cibler IE 10+ en CSS ne

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 

    /* IE10+ CSS styles go here */ 

} 

(Source: Phil Newcomer)