Comment identifier le navigateur Microsoft Edge via CSS?


90

Je développe une application Web et je dois identifier le navigateur de Microsoft Edge séparément des autres, pour appliquer un style unique. Existe-t-il un moyen d'identifier Edge en utilisant CSS? Juste comme,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

3
Pourquoi voulez-vous faire cela?

2
vous n'avez presque certainement pas besoin de faire cela. Pourquoi essayez-vous de le faire?
Patrick

37
C'est certainement quelque chose dont vous pourriez avoir besoin. Au moment de la rédaction de cet article, Edge est toujours plein de quircks qui gâcheront gravement les CSS valides qui fonctionnent dans tous les autres navigateurs, y compris IE.
Lawyerson

Remarque: Les commentaires conditionnels utilisés dans l'exemple ne fonctionnent que pour IE9 et les versions antérieures, donc [si IE 11] ne fonctionnera pas réellement.
Sean McMillan

Réponses:


191

/ * Navigateur Microsoft Edge 12-18 (toutes les versions avant Chromium) * /

Celui-ci devrait fonctionner:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Pour plus d'informations, voir: Strangeness du navigateur


8
Microsoft envisage de supprimer autant de propriétés préfixées -ms que possible dans MS Edge pour être interopérable avec d'autres navigateurs. En tant que tel, il est loin d'être garanti de fonctionner à l'avenir. Comme mentionné dans d'autres réponses, la détection des fonctionnalités est beaucoup plus préférable.
Charles Morris - MSFT

1
Je viens de le tester à nouveau et cela fonctionne vraiment. Démo: jsfiddle.net/pd142446
KittMedia

@ CharlesMorris-MSFT Je suis d'accord avec vous, mais il y a des cas où nous avons juste besoin de le faire. Par exemple, les événements de pointeur: aucun; fonctionne bien sur IE 11 et tous les autres navigateurs, mais cesse de fonctionner sur Edge. J'espère qu'au moment où ils élimineront le préfixe -ms, ils régleront également les problèmes qui nous ont obligés à utiliser des CSS différents en premier lieu. Dans ce cas, la détection des fonctionnalités n'aidera pas vraiment, car toutes les fonctionnalités sont là, mais Edge a cassé certaines choses que IE 11 a finalement corrigées. Bonne réponse KittMedia, merci.
Emil Borconi

8
Ce hack ne fonctionne plus, mais celui-ci fait @supports (-ms-ime-align: auto) {.selector {property: value; }}
Roffers

1
@KittMedia a été supprimé dans Edge 14
LJ Wadowski

20
/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Cela fonctionne très bien!

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/


1
@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- seul MS Edge "comprend" cette règle, les autres navigateurs l'ignorent. La règle est suivie d'un nom de classe ou d'identifiant d'un élément html et lui est donc appliquée. En d'autres termes, si un code css doit être appliqué à un élément html dans le navigateur Edge uniquement, placez cette règle spéciale juste avant la classe / l'ID de votre élément.
CodeGust

pour que le navigateur ne les ignore pas simplement et cible le sélecteur, car ils sont tous séparés par une virgule? généralement les ,sélecteurs séparés en css. c'est pourquoi c'est déroutant. Je ne comprends toujours pas pourquoi les autres navigateurs ignoreraient cela et que seul ms-edge appliquerait le css au sélecteur après la virgule
r3wt

1
@ r3wt si un sélecteur n'est pas valide, tout le groupe de règles est ignoré. Illustré ici css-tricks.com
CodeGust

@ r3wt merci! :) vous m'avez encouragé à écrire les détails qui auraient dû faire partie de la réponse au départ
CodeGust

@AlexandrKazakov peut-être, c'est parce que le dernier Edge est basé sur le moteur Chromium (?) Quelle version avez-vous?
CodeGust le

14

Plus précis pour Edge (ne pas inclure le dernier IE 15) est:

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } fonctionne pour toutes les versions Edge (actuellement jusqu'à IE15).


2
For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}

-2

Détection de fonctionnalités, détection de fonctionnalités, détection de fonctionnalités. Je n'ai pas encore trouvé de bon cas d'utilisation pour expliquer pourquoi quelqu'un aurait besoin de renifler ou de détecter UA avec CSS. Pourriez-vous s'il vous plaît expliquer un peu en détail, un cas d'utilisation?

CSS

J'ai trouvé ce post de Jeff Clayton , qui illustre comment trouver Edge via CSS, mais il détectera également Chrome et Safari.

/* Chrome, Safari, AND NOW ALSO the Windows 10 Edge Browser */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
}

Mais si vous DEVEZ sniffer UA:

Chaîne Microsoft Edge UA:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

Je détaille pourquoi dans ce billet de blog.

Neowin a récemment signalé que le nouveau navigateur de Microsoft pour Windows 10, Spartan, utilise la chaîne Chrome UA, «Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ″. Cela est fait exprès.

Vous remarquerez également que toute la chaîne se termine par "Edge / 12.0", ce que Chrome ne fait pas.

Je dois souligner que ce n'est pas un départ redical de ce que Microsoft a fait avec IE 11, qui sur Windows 8 se lit comme suit: Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) comme Gecko, comme expliqué dans ce Publier.

Qu'est-ce que le reniflement de l'agent utilisateur?

Souvent, les développeurs Web reniflent UA pour la détection du navigateur. Mozilla l'explique bien sur son blog:

Servir différentes pages Web ou services à différents navigateurs est généralement une mauvaise idée. Le Web est censé être accessible à tous, quel que soit le navigateur ou l'appareil utilisé. Il existe des moyens de développer votre site Web pour s'améliorer progressivement en fonction de la disponibilité des fonctionnalités plutôt qu'en ciblant des navigateurs spécifiques.

Voici un excellent article expliquant l'histoire de l'agent utilisateur.

Souvent, les développeurs paresseux reniflent simplement la chaîne UA et désactivent le contenu de leur site Web en fonction du navigateur qu'ils pensent que le spectateur utilise. Internet Explorer 8 est un point commun de frustration pour les développeurs, donc ils vérifieront fréquemment si un utilisateur utilise N'IMPORTE QUELLE version d'IE et désactiveront les fonctionnalités.

L'équipe Edge détaille cela encore plus profondément sur leur blog.

Toutes les chaînes des agents utilisateurs contiennent plus d'informations sur les autres navigateurs que le navigateur que vous utilisez, pas seulement des jetons, mais aussi des numéros de version «significatifs».

Chaîne UA d'Internet Explorer 11:

Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) comme Gecko

Chaîne Microsoft Edge UA:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

La propriété userAgent a été décrite avec justesse comme «un paquet toujours croissant de mensonges» par Patrick H. Lauke dans les discussions du W3C. ("Ou plutôt, un exercice d'équilibrage consistant à ajouter suffisamment de mots clés hérités qui ne feront pas immédiatement tomber l'ancien code de reniflage UA, tout en essayant de transmettre un peu d'informations réellement utiles et précises.")

Nous recommandons aux développeurs Web d'éviter autant que possible le reniflement UA; les fonctionnalités de la plate-forme Web moderne sont presque toutes détectables de manière simple. Au cours de l'année écoulée, nous avons vu des sites reniflant UA qui ont été mis à jour pour détecter Microsoft Edge… uniquement pour lui fournir un chemin de code IE11 hérité. Ce n'est pas la meilleure approche, car Microsoft Edge correspond aux comportements 'WebKit', pas aux comportements IE11 (toutes les différences Edge-WebKit sont des bogues que nous souhaitons corriger).

D'après notre expérience, Microsoft Edge fonctionne mieux sur les chemins de code «WebKit» de ces sites. De plus, étant donné qu'Internet devient disponible sur une plus grande variété d'appareils, veuillez supposer que les navigateurs inconnus sont bons - veuillez ne pas limiter votre site à fonctionner uniquement sur un petit ensemble de navigateurs connus actuels. Si vous faites cela, votre site se cassera presque certainement à l'avenir.

Conclusion

En présentant la chaîne Chrome UA, nous pouvons contourner les hacks que ces développeurs utilisent, pour présenter la meilleure expérience aux utilisateurs.


26
Votre réponse n'a-t-elle aucun rapport avec la question? Vous décrivez pourquoi un agent utilisateur ne doit pas être utilisé pour la détection, ce qui ne répond en aucun cas à la question - comment le faire via CSS.
KittMedia

J'ai également illustré POURQUOI faire autre chose que la détection de caractéristiques est souvent préjudiciable. J'espérais également que quelqu'un illustrerait enfin pourquoi il utiliserait le sniffing ou le css au lieu de la détection de fonctionnalités.
Dave Voyles

4
Alors cette réponse cible-t-elle tous les navigateurs? J'essaie de cibler uniquement un navigateur spécifique car le css doit être différent des autres navigateurs ... je ne sais pas à quelle question vous répondez ici
Crystal

2
"Pourriez-vous s'il vous plaît expliquer un peu en détail, un cas d'utilisation?" Edge a un bogue connu où l'utilisation d'une transformation 3D entraînera l'arrêt du rendu d'un élément lorsqu'il sort de la page. Essayer de l'utiliser pour créer un effet de parallaxe donne au site un aspect absolument cassé. La détection UA ​​est utile dans ce cas, car je peux aplatir la parallaxe sur Edge et mon site ne ressemblera pas à une poubelle.
Amoliski

1
Je veux détecter Edge parce que je vérifie son manque de support :focus-withinet à en juger par ce problème , la détection des fonctionnalités pour les sélecteurs nécessite JavaScript, et je préfère de loin utiliser une solution css pure.
Qwertie
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.