webentwicklung-frage-antwort-db.com.de

Identifizieren des Microsoft Edge-Browsers über CSS

Ich entwickle eine Webanwendung und muss den Browser von Microsoft Edge separat von anderen identifizieren, um ein einzigartiges Styling anwenden zu können. Gibt es eine Möglichkeit, Edge mithilfe von CSS zu identifizieren? So wie,

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

Dieser sollte funktionieren:

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

Mehr dazu unter: Browser Strangeness

155
KittMedia
/* Microsoft Edge Browser 12+ (All) - 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/

14
CodeGust

Genauere Angaben für Edge (neueste IE 15 nicht einschließen) sind:

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

@supports (-ms-ime-align:auto) { ... } funktioniert für alle Edge-Versionen (derzeit bis IE15).

6
mature

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

[~ # ~] CSS [~ # ~]

Ich habe diesen Beitrag von Jeff Clayton gefunden, der veranschaulicht, wie Edge über CSS gefunden wird, 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

Warum?

Neowin berichtete kürzlich, dass Microsofts neuer Browser für Windows 10, Spartan, den UA-String Chrome “Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/39.0 verwendet .2171.71 Safari/537.36 Edge/12.0 ″. Dies geschieht absichtlich.

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 erneute Abweichung von dem ist, was Microsoft mit IE 11 getan hat, das unter Windows 8 lautet: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv: 11.0) wie Gecko, wie in diesem Beitrag erklärt.

Was schnüffelt User Agent?

Häufig schnüffeln Webentwickler UA nach Browsern. Mozilla erklärt es gut auf ihrem Blog:

Das Bereitstellen verschiedener Webseiten oder Dienste für verschiedene Browser ist normalerweise eine schlechte Idee. 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 Agents erklärt.

Oft schnüffeln faule Entwickler einfach an der UA-Zeichenfolge und deaktivieren den Inhalt ihrer Website basierend auf dem Browser, den der Betrachter ihrer Meinung nach verwendet. Internet Explorer 8 ist ein häufiger Frustfaktor für Entwickler. Sie überprüfen daher häufig, ob ein Benutzer eine beliebige IE-Version verwendet, und deaktivieren Funktionen.

Das Edge-Team führt dies in seinem Blog noch ausführlicher aus.

Alle Benutzeragenten-Zeichenfolgen enthalten mehr Informationen zu anderen Browsern als dem von Ihnen verwendeten Browser - nicht nur zu Tokens, sondern auch zu "aussagekräftigen" Versionsnummern.

Internet Explorer 11-UA-Zeichenfolge:

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 vielmehr ein Balanceakt, bei dem genügend Legacy-Keywords hinzugefügt werden, bei denen der alte UA-Sniffing-Code nicht sofort umfällt, während dennoch versucht wird, ein wenig wirklich nützliche und genaue Informationen zu vermitteln.")

Wir empfehlen Webentwicklern, UA-Sniffing so weit wie möglich zu vermeiden. Die Funktionen moderner Webplattformen 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 älteren IE11-Codepfad bereitzustellen. Dies ist nicht der beste Ansatz, da Microsoft Edge dem Verhalten von "WebKit" und nicht dem Verhalten von IE11 entspricht (alle Edge-WebKit-Unterschiede sind Fehler, die wir beheben möchten).

Nach unserer Erfahrung läuft Microsoft Edge am besten auf den "WebKit" -Codepfaden dieser Websites. Da das Internet auf einer größeren Anzahl von Geräten verfügbar wird, gehen Sie bitte davon aus, dass unbekannte Browser in Ordnung sind. Bitte beschränken Sie sich nicht darauf, dass Ihre Website nur mit wenigen derzeit bekannten Browsern funktioniert. Wenn Sie dies tun, wird Ihre Site mit ziemlicher Sicherheit in Zukunft nicht mehr funktionieren.

Fazit

Indem wir den UA-String Chrome präsentieren, können wir die Hacks umgehen, die diese Entwickler verwenden, um den Benutzern die bestmögliche Erfahrung zu bieten.

3