Comment identifier le navigateur Microsoft Edge via CSS?
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 à l'aide de CSS? Juste comme,
<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
Celui-ci devrait fonctionner:
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
Pour plus, voir: étrangeté du navigateur
/* Microsoft Edge Browser 12+ (All) - 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/
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).
Détection de fonctionnalité, détection de fonctionnalité, détection de fonctionnalité. Nous n'avons pas encore trouvé de cas d'utilisation permettant de comprendre pourquoi une personne aurait besoin de détecter ou de détecter un agent UA avec CSS. Pourriez-vous expliquer un peu plus en détail un cas d'utilisation?
CSS
J'ai trouvé ce message 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 UA sniff:
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 cet article de blog.
Neowin a récemment annoncé 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 " C’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 tiens à souligner que ce n’est pas un changement radical par rapport à ce que Microsoft avait fait avec IE 11, qui sous Windows 8 se lit comme suit: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; vv: 11.0), comme Gecko, comme expliqué dans ce post.
Qu'est-ce que le reniflement d'agent d'utilisateur?
Souvent, les développeurs Web recherchent un 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 doit être accessible à tous, quel que soit le navigateur ou le périphérique 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 que de cibler des navigateurs spécifiques.
Voici un excellent article expliquant l’histoire de l’agent d’utilisateur.
Souvent, les développeurs paresseux détectent simplement la chaîne d'agent utilisateur et désactivent le contenu de leur site Web en fonction du navigateur qu'ils pensent que le spectateur utilise. Internet Explorer 8 étant un point commun de frustration pour les développeurs, ceux-ci vérifient fréquemment si un utilisateur utilise N'IMPORTE QUELLE version d'IE, et désactivent des fonctionnalités.
L’équipe Edge détaille cela encore plus sur son blog.
Toutes les chaînes d’agent utilisateur contiennent plus d’informations sur les autres navigateurs que le navigateur que vous utilisez actuellement - pas seulement des jetons, mais également des numéros de version "significatifs".
Chaîne d'UA d'Internet Explorer 11:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; vr: 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 de mensonges toujours croissant" par Patrick H. Lauke dans les discussions sur le W3C. ("Ou plutôt, un problème d'équilibre consistant à ajouter suffisamment de mots clés classiques qui ne laisseront pas immédiatement tomber l'ancien code de détection d'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 de renoncer à l’UA; les fonctionnalités modernes de la plate-forme Web sont presque toutes détectables facilement. Au cours de l’année écoulée, nous avons vu certains sites de détection d’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’, et non aux comportements IE11 (toute différence entre Edge et WebKit est un bogue que nous souhaitons corriger).
Selon notre expérience, Microsoft Edge fonctionne mieux sur les chemins de code "WebKit" de ces sites. En outre, Internet devenant disponible sur une plus grande variété de périphériques, supposez que les navigateurs inconnus sont bons. Ne limitez pas votre site à un fonctionnement limité sur un petit nombre de navigateurs connus. Si vous faites cela, votre site va probablement casser à l'avenir.
Conclusion
En présentant la chaîne Chrome UA, nous pouvons contourner les hacks utilisés par les développeurs pour présenter aux utilisateurs la meilleure expérience possible.