Wie identifiziere ich den Microsoft Edge-Browser über CSS?

Ich entwickle eine Webanwendung und muss den Browser von Microsoft Edge getrennt von anderen identifizieren, um ein einzigartiges Design anzuwenden. Gibt es eine Möglichkeit, Edge mithilfe von CSS zu identifizieren? So wie,

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

/ * Microsoft Edge Browser 12-18 (Alle Versionen vor Chromium) * /

Dieser sollte funktionieren:

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

Weitere Informationen finden Sie unter: Browser-Fremdheit

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

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

Das funktioniert super!

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

Genauer für Edge (ohne den neuesten IE 15) ist:

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

@supports (-ms-ime-align:auto) { ... } funktioniert für alle Edge-Versionen (derzeit bis 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);
         }
}

Merkmalserkennung, Merkmalserkennung, Merkmalserkennung. Ich habe noch keinen guten Anwendungsfall gefunden, warum jemand mit CSS schnüffeln oder erkennen müsste. Könnten Sie bitte einen Anwendungsfall etwas näher erläutern?

CSS

Ich habe diesen Beitrag von Jeff Clayton gefunden , der zeigt, wie man Edge über CSS findet, aber auch Chrome und Safari erkennt.

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

Aber wenn Sie UA schnüffeln müssen:

Microsoft Edge UA-Zeichenfolge:

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

Ich erläutere in diesem Blogbeitrag, warum.

Neowin berichtete kürzlich, dass der neue Browser von Microsoft für Windows 10, Spartan, die Chrome UA-Zeichenfolge „Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0“ verwendet ″. Das wird absichtlich gemacht.

Sie werden auch feststellen, dass die gesamte Zeichenfolge mit "Edge / 12.0" endet, was Chrome nicht tut.

Ich möchte darauf hinweisen, dass dies keine rote Abweichung von dem ist, was Microsoft mit IE 11 gemacht hat, das unter Windows 8 lautet: Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) wie Gecko, wie hier erläutert Post.

Was schnüffelt User Agent?

Oft schnüffeln Webentwickler UA zur Browsererkennung. Mozilla erklärt es gut in ihrem Blog:

Es ist normalerweise eine schlechte Idee, verschiedene Webseiten oder Dienste für verschiedene Browser bereitzustellen. Das Web soll für alle zugänglich sein, unabhängig davon, welchen Browser oder welches Gerät sie verwenden. Es gibt Möglichkeiten, Ihre Website so zu entwickeln, dass sie sich basierend auf der Verfügbarkeit von Funktionen schrittweise verbessert, anstatt auf bestimmte Browser abzuzielen.

Hier ist ein großartiger Artikel, der die Geschichte des User Agent erklärt.

Faule Entwickler schnüffeln häufig nur nach der UA-Zeichenfolge und deaktivieren den Inhalt ihrer Website basierend auf dem Browser, von dem sie glauben, dass er vom Betrachter verwendet wird. Internet Explorer 8 ist ein häufiger Frustpunkt für Entwickler. Daher prüfen sie häufig, ob ein Benutzer eine beliebige Version des IE verwendet, und deaktivieren Funktionen.

Das Edge-Team beschreibt dies noch ausführlicher in seinem Blog.

Alle Zeichenfolgen für Benutzeragenten enthalten mehr Informationen zu anderen Browsern als der tatsächlich verwendete Browser - nicht nur Token, sondern auch "aussagekräftige" Versionsnummern.

UA-Zeichenfolge von Internet Explorer 11:

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

Microsoft Edge UA-Zeichenfolge:

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

Die userAgent-Eigenschaft wurde von Patrick H. Lauke in W3C-Diskussionen treffend als „eine ständig wachsende Menge von Lügen“ beschrieben. ("Oder besser gesagt, ein Balanceakt, bei dem genügend Legacy-Keywords hinzugefügt werden, bei denen nicht sofort alter UA-Sniffing-Code umkippt, während dennoch versucht wird, ein wenig tatsächlich nützliche und genaue Informationen zu vermitteln.")

Wir empfehlen Webentwicklern, UA-Schnüffeln so weit wie möglich zu vermeiden. Moderne Webplattformfunktionen sind fast alle auf einfache Weise erkennbar. Im letzten Jahr haben wir einige UA-Sniffing-Sites gesehen, die aktualisiert wurden, um Microsoft Edge zu erkennen… nur um einen alten IE11-Codepfad bereitzustellen. Dies ist nicht der beste Ansatz, da Microsoft Edge dem Verhalten von 'WebKit' und nicht dem Verhalten von IE11 entspricht (alle Unterschiede zwischen Edge und WebKit sind Fehler, die wir beheben möchten).

Nach unserer Erfahrung läuft Microsoft Edge am besten auf den 'WebKit'-Codepfaden auf diesen Websites. Da das Internet auf einer größeren Anzahl von Geräten verfügbar wird, gehen Sie bitte davon aus, dass unbekannte Browser gut sind. Beschränken Sie Ihre Website nicht darauf, nur mit einer kleinen Anzahl derzeit bekannter Browser zu arbeiten. Wenn Sie dies tun, wird Ihre Site mit ziemlicher Sicherheit in Zukunft kaputt gehen.

Fazit

Durch die Präsentation der Chrome UA-Zeichenfolge können wir die von diesen Entwicklern verwendeten Hacks umgehen, um den Benutzern die beste Erfahrung zu bieten.