Comment cibler Internet Explorer et les navigateurs Microsoft récent via des requêtes média ?

25 novembre 2015 Écrit par  Informaticien51
Dans Divers
Cacher / Afficher l'index
Évaluer cet élément
(0 Votes)

Le but de ce document est de lister les requêtes media permettant de cibler le navigateur Internet Explorer, et sa nouvelle version nommée Spartan.

Certaines de ces requêtes peuvent être écrites à l'interieur d'autres requêtes media.

Comment cibler Internet Explorer et les navigateurs Microsoft récent ?

Ci dessous, la liste des requêtes média permettant de cibler spécifiquement ou non les differents navigateurs microsft.

Pour certaines version de ceux ci, il existe plusieurs requêtes permettant de les cibler directement.

Les requêtes média peuvent être imbriquées les une dans les autres. Il faut aussi faire attention aux caractères \ suivi d'un chiffre.

Cibler Microsoft Edge

Les deux requêtes média ci dessous permettent cela :

Requête média navigateur
@supports (-ms-accelerator:true) { .selecteur ou classe { propriété:valeur; } }
Microsoft Edge
_:-ms-lang(x), _:-webkit-full-screen, .selector { propriété:valeur; }
Microsoft Edge

Cibler Internet Explorer

Les requêtes ci dessous permettent de cibler une version du navigateur Internet Explorer unique.

Requête média navigateur
_:-ms-fullscreen, :root .selector { propriété:valeur; }
Internet Explorer 11
_:-ms-lang(x), .selector { propriété:valeur\9; }
Internet Explorer 10
@media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .selector { propriété:valeur; } }
Internet Explorer 9
.selector { propriété:valeur\0/; }
Internet Explorer 8
*+html .selector { propriété:valeur; }
Internet Explorer 7
_:first, .selector { propriété:valeur; }
Internet Explorer 7

Cibler plusieurs versions d'Internet Explorer

Les requêtes ci dessous permettent de cibler plusieurs versions d'Internet Explorer.

Requête média navigateur
:-ms-lang(x), .selector { propriété:valeur; }
Internet Explorer 10 et 11 + Microsoft Edge
_:-ms-input-placeholder, :root .selector { propriété:valeur; }
Internet Explorer 10 et 11
_::selection, .selector { propriété:valeur\0; }
Internet Explorer 9 10 et 11
@media screen and (min-width:0\0) and (min-resolution:+72dpi) { .selector { propriété:valeur; } }
Internet Explorer 9 10 et 11
.selector { propriété:valeur\0; }
Internet Explorer 10 et 11
_::selection, .selector { propriété:valeur\0; }
Internet Explorer8 9 10 et 11

Cibler touts les navigateurs autres que Microsoft Edge

La requête ci dessous permet cela. Elle peut être intégrée dans une autre requête plus générale.

 

@supports (not (-ms-accelerator:true)) { .selector { propriété:valeur; } }

Imbriquer des requêtes média

Avec les règles CSS 3, il est possible d'imbriquer les requêtes média les une dans les autres comme ci dessous :

On cibles les periphériques ayant une taille comprise entre 400px et 600px

 @media screen and (min-width:400px) and (max-width:600px) {

/* et ensuite on cible internet explorer 8 */
.selector { propriété:valeur\0/; /*Les propriétés entre ces accollades ne s'appliquent que si la premiere requête est satisfaite}
/
* Les règles CSS en dessous ou au dessus de la requete ci dessus s'applique pour touts les peripheriques ayant rempli la condition, 
y compris Internet Explorer 8 */
}
1418 Dernière modification le jeudi, 26 novembre 2015 10:01
Plus dans cette catégorie :

Si vous avez des questions, des suggestions quand à l'amélioration du contenu, telles que des liens pertinents et utile, n'hesitez pas à enrichir ce document, vos retours peuvent aussi être très utiles :