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

89

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

css browser microsoft-edge

— Sameera Liyanage
quelle

3

Warum willst du das machen?

2

Sie müssen das mit ziemlicher Sicherheit nicht tun. Warum versuchst du es zu tun?

— Patrick

37

Dies ist mit Sicherheit etwas, das Sie vielleicht brauchen. Zum Zeitpunkt des Schreibens ist Edge immer noch voll von Macken, die gültiges CSS, das in jedem anderen Browser, einschließlich IE, funktioniert, ernsthaft durcheinander bringen.

— Anwalt

190

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

— KittMedia
quelle

8

Microsoft versucht, so viele Eigenschaften mit dem Präfix -ms wie möglich in MS Edge zu entfernen, um mit anderen Browsern interoperabel zu sein. Insofern ist dies bei weitem nicht garantiert, dass es in Zukunft funktioniert. Wie in anderen Antworten erwähnt, ist die Merkmalserkennung viel vorzuziehen.

— Charles Morris - MSFT

1

Ich habe es gerade noch einmal getestet und es funktioniert definitiv. Demo: jsfiddle.net/pd142446

— KittMedia

@ CharlesMorris-MSFT Ich stimme Ihnen zu, aber es gibt Fälle, in denen wir das nur tun müssen. Zum Beispiel Zeigerereignisse: keine; funktioniert gut mit IE 11 und allen anderen Browsern, funktioniert aber nicht mehr mit Edge. Ich hoffe, bis sie das Präfix -ms entfernen, werden sie auch die Probleme beheben, die uns gezwungen haben, überhaupt anderes CSS zu verwenden. In diesen Fällen hilft die Feature-Erkennung nicht wirklich, da alle Features vorhanden sind. Edge hat jedoch einige Probleme behoben, die durch IE 11 endgültig behoben wurden. KittMedia nette Antwort, danke.

— Emil Borconi

8

Dieser Hack funktioniert nicht mehr, aber dieser führt @supports aus (-ms-ime-align: auto) {.selector {property: value; }}

— Roffers

1

@ KittMedia wurde in Edge 14

— LJ Wadowski

19

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

— CodeGust
quelle

1

@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- nur MS Edge "versteht" diese Regel, andere Browser ignorieren sie. Der Regel folgt ein Klassen- oder ID-Name eines HTML-Elements und wird daher auf dieses angewendet. Mit anderen Worten, wenn ein CSS-Code nur im Edge-Browser auf ein HTML-Element angewendet werden muss, legen Sie diese Sonderregel direkt vor der Klasse / ID Ihres Elements fest.

— CodeGust

Der Browser ignoriert diese also nicht einfach und zielt auf den Selektor ab, da sie alle durch ein Komma getrennt sind. In der Regel werden die ,Selektoren in CSS getrennt. Deshalb ist das verwirrend. Ich verstehe immer noch nicht, warum andere Browser dies ignorieren würden und nur ms-edge das

— CSS

1

@ r3wt Wenn ein Selektor ungültig ist, wird die gesamte Regelgruppe ignoriert. Illustriert hier css-tricks.com/…

— CodeGust

@ r3wt danke! :) Sie ermutigten mich, die Details zu schreiben, die ursprünglich Teil der Antwort gewesen sein sollten

— CodeGust

@AlexandrKazakov möglicherweise, weil der neueste Edge auf Chromium Engine basiert (?) Welche Version haben Sie?

— CodeGust

14

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

— reifen
quelle

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

— Priya Nayak
quelle

-2

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.

— Dave Voyles
quelle

25

Bezieht sich Ihre Antwort in keiner Weise auf die Frage? Sie beschreiben, warum ein Benutzeragent nicht zur Erkennung verwendet werden sollte, wodurch die Frage - wie dies über CSS erfolgt - in keiner Weise beantwortet wird.

— KittMedia

Ich habe auch gezeigt, warum es oft nachteilig ist, etwas anderes als die Erkennung von Merkmalen zu tun. Ich hatte auch gehofft, dass jemand endlich veranschaulichen würde, warum er Sniffing oder CSS anstelle der Feature-Erkennung verwenden würde.

— Dave Voyles

4

Ist diese Antwort dann auf alle Browser ausgerichtet? Ich versuche nur auf einen bestimmten Browser abzuzielen, da sich das CSS von anderen Browsern unterscheiden muss ... Ich bin mir nicht sicher, welche Frage Sie hier beantworten

— Crystal

2

"Könnten Sie bitte einen Anwendungsfall etwas näher erläutern?" Edge hat einen bekannten Fehler, bei dem die Verwendung einer 3D-Transformation dazu führt, dass ein Element nicht mehr gerendert wird, wenn es von der Seite entfernt wird. Der Versuch, damit einen Parallaxeeffekt zu erzielen, lässt die Site absolut kaputt aussehen. Die UA-Erkennung ist in diesem Fall nützlich, da ich die Parallaxe auf Edge reduzieren kann und meine Website nicht wie Papierkorb aussieht.

— Amoliski

1

Ich möchte Edge erkennen, da ich prüfe, ob dieses Problem nicht unterstützt wird, :focus-withinund nach diesem Problem zu urteilen . Für die Feature-Erkennung für Selektoren ist JavaScript erforderlich, und ich würde viel lieber eine reine CSS-Lösung verwenden.

— Qwertie