Comment cibler efficacement Internet Explorer 10 avec des techniques CSS modernes ?

Ciblage d'Internet Explorer 10 : un guide complet

De nombreux développeurs Web sont confrontés au défi de cibler des versions de navigateur spécifiques, telles qu'Internet Explorer 10. Bien que les commentaires conditionnels traditionnels se soient révélés peu fiables avec IE10, il existe des approches alternatives qui répondent efficacement à ce problème. besoin.

Les commentaires conditionnels échouent avec IE10

L'extrait de code que vous avez fourni tente de cibler IE10 à l'aide de commentaires conditionnels. Cependant, IE10 ignore ces commentaires et opte plutôt pour le code HTML imbriqué. Cela rend cette approche inefficace pour cibler spécifiquement IE10.

Techniques modernes de ciblage des navigateurs

Au lieu de s'appuyer sur des commentaires conditionnels ou des méthodes de détection du navigateur (telles que navigator.userAgent), utiliser des techniques CSS modernes qui fournissent un ciblage précis.

Ciblage d'IE9, 10, et 11

Pour cibler les versions IE9 à IE11, utilisez la requête multimédia CSS suivante :

@media screen and (min-width:0<pre class="brush:php;toolbar:false">@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

) { /* Enter CSS here */ }

Cibler IE10 uniquement

Exclusivement ciblez IE10 avec les médias CSS suivants requête :

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Ciblage du navigateur Edge

Si vous devez cibler le navigateur Edge de Microsoft, utilisez la requête de fonctionnalité CSS suivante :

Références

• [Déplacement du CSS spécifique à Internet Explorer dans @media block](https://nicolasgallagher.com/about-html-conditional-comments-and-css-media-queries/)
• [Comment cibler Internet Explorer 10 et 11 en CSS](https ://css-tricks.com/how-to-target-ie10-11-using-css/)
• [Hacks CSS pour Windows 10 et le navigateur Web Edge de Microsoft](https://css-tricks.com/css-hacks-for-windows-10-and-microsofts-edge-web-browser/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!