Comment utiliser les sélecteurs CSS3 pour ignorer IE8?

Question

Dans l'exemple ci-dessous, je veux que IE8 affiche le texte en red, mais green pour tous les navigateurs modernes.

Je sais que IE8 ne comprend pas les sélecteurs comme :nth-child(), donc je viens avec p:nth-child(odd), p:nth-child(even) {...} pour remplacer le style précédent.

Y a-t-il une façon plus élégante de le faire? Je suis au courant du commentaire conditionnel ...[if lte IE 8]... existe, mais ce n'est pas ce que je demande dans cette question.

p { 
 
    color: red; 
 
} 
 

 
p:nth-child(odd), 
 
p:nth-child(even) { 
 
    color: green; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

Answer 1

hacks CSS est peut-être pas élégante, mais ils encore faire le travail.

Il y a quelques hacks CSS pour IE8, en savoir plus: http://browserhacks.com/

Voici un, en utilisant @media \0screen { ... }

p { 
 
    color: green; 
 
} 
 

 
@media \0screen { 
 
    p { 
 
    color: red; 
 
    } 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

Une autre utilisant selector { property: value\9; }

p { 
 
    color: green; 
 
    color: red\9; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

---

Un petit hack JS est un autre, si vous aimez le script mieux
var isIE8 = document.all && !document.addEventListener;

/*Set html class if IE8*/ 
 
(function(d) { 
 
    if (document.all && !document.addEventListener) { 
 
    d.className += ' isIE8'; 
 
    } 
 
})(document.documentElement);

p { 
 
    color: green; 
 
} 
 

 
.isIE8 p { 
 
    color: red; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

Answer 2

Vous pouvez utiliser cette bibliothèque comme http://selectivizr.com/ pour donner IE nouveaux sélecteurs.

Answer 3

L'utilisation de :nth-child pour cibler les navigateurs est une mauvaise idée.

Surtout si ce sélecteur est appliqué à la collecte dynamique, lorsque vous faites container.removeNode(child) navigateur sera obligé de scanner tous les frères et sœurs et recalculer leurs styles utilisés. Tout simplement parce que vous devez cibler IE8 votre document sera plus lourd dans tous les autres navigateurs.

Je vous suggère d'ajouter la classe à l'élément de corps (soit sur le serveur, soit par JS), par exemple .ie8, et l'utiliser dans les sélecteurs:

p { 
    color: green; 
} 

.ie8 p { 
    color: red; 
} 

Answer 4

Vous pouvez condenser :nth-child(odd), :nth-child(even) juste :nth-child(n), qui est correspondance garantie sur tous les éléments sauf :root:

p { 
 
    color: red; 
 
} 
 

 
p:nth-child(n) { 
 
    color: green; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

Cependant, piratages de sélection IE8 consistent généralement en ajoutant :root au début de chaque sélecteur complexe à la place, qui a le même effet, même en ajoutant la même quantité de spécificité.