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 en utilisant CSS? Juste comme,

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

/ * 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

/* 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/

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).

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);
         }
}

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.