it-swarm.dev

Come identificare il browser Microsoft Edge tramite CSS?

Sto sviluppando un'applicazione Web e devo identificare il browser Microsoft Edge separatamente dagli altri, per applicare uno stile unico. C'è un modo per identificare Edge usando i CSS? Proprio come,

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

Questo dovrebbe funzionare:

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

Per ulteriori informazioni: Browser Strangeness

148
KittMedia
/* Microsoft Edge Browser 12+ (All) - one-liner method */

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

Funziona benissimo!

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

12
CodeGust

Più preciso per Edge (non includere l'ultimo IE 15) è:

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

@supports (-ms-ime-align:auto) { ... } funziona per tutte le versioni di Edge (attualmente fino a IE15).

6
mature

Rilevamento funzionalità, rilevamento funzionalità, rilevamento funzionalità. Devo ancora trovare un buon caso d'uso sul motivo per cui qualcuno dovrebbe annusare o rilevare UA con CSS. Potresti spiegare un po 'di dettagli, un caso d'uso?

CSS

Ho trovato questo post di Jeff Clayton , che illustra come trovare Edge tramite CSS, ma rileverà anche Chrome e Safari.

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

Ma se DEVI UA annusare:

Stringa Microsoft Edge UA:

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

I dettagli perché in questo post del blog.

Neowin ha recentemente riferito che il nuovo browser Microsoft per Windows 10, Spartan, utilizza la stringa Chrome UA, “Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, come Geco) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 ″. Fatto apposta.

Noterai anche che l'intera stringa termina con "Edge/12.0", che Chrome non ha.

Vorrei sottolineare che questa non è una deviazione da ciò che Microsoft ha fatto con IE 11, che su Windows 8 recita: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv: 11.0) come Geco, come spiegato in questo post.

Che cosa sta annusando User Agent?

Spesso, gli sviluppatori web emetteranno UA per il rilevamento del browser. Mozilla lo spiega bene sul loro blog:

Servire pagine Web o servizi diversi su browser diversi è generalmente una cattiva idea. Il Web è pensato per essere accessibile a tutti, indipendentemente dal browser o dispositivo che stanno utilizzando. Esistono modi per sviluppare il tuo sito Web per migliorare progressivamente se stesso in base alla disponibilità di funzionalità anziché al targeting di browser specifici.

Ecco un ottimo articolo che spiega la storia di User Agent.

Spesso, gli sviluppatori pigri annusano semplicemente la stringa UA e disabilitano i contenuti sul loro sito Web in base al browser che credono stia utilizzando lo spettatore. Internet Explorer 8 è un punto di frustrazione comune per gli sviluppatori, quindi controlleranno frequentemente se un utente utilizza QUALSIASI versione di IE e disabiliteranno le funzionalità.

Il team Edge spiega in modo ancora più approfondito sul proprio blog.

Tutte le stringhe dei programmi utente contengono più informazioni su altri browser rispetto al browser che stai utilizzando, non solo token, ma anche numeri di versione "significativi".

Stringa UA di Internet Explorer 11:

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

Stringa Microsoft Edge UA:

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

La proprietà userAgent è stata giustamente descritta come "un pacchetto di bugie in continua crescita" da Patrick H. Lauke nelle discussioni del W3C. ("O meglio, un atto di bilanciamento per l'aggiunta di abbastanza parole chiave legacy che non avranno immediatamente il vecchio codice di sniffing UA che cade, cercando ancora di trasmettere un po 'di informazioni effettivamente utili e accurate.")

Raccomandiamo agli sviluppatori Web di evitare il più possibile lo sniffing di UA; le moderne funzionalità della piattaforma web sono quasi tutte rilevabili in modo semplice. Nell'ultimo anno, abbiamo visto alcuni siti di sniffing UA che sono stati aggiornati per rilevare Microsoft Edge ... solo per fornire un percorso di codice IE11 legacy. Questo non è l'approccio migliore, poiché Microsoft Edge corrisponde a comportamenti "WebKit", non a comportamenti IE11 (eventuali differenze di Edge-WebKit sono bug che ci interessa correggere).

Nella nostra esperienza Microsoft Edge funziona meglio sui percorsi del codice "WebKit" in questi siti. Inoltre, con Internet che diventa disponibile su una più ampia varietà di dispositivi, supponiamo che i browser sconosciuti siano buoni, per favore non limitare il tuo sito a funzionare solo su un piccolo set di browser conosciuti attuali. Se lo fai, il tuo sito si romperà quasi sicuramente in futuro.

Conclusione

Presentando la stringa Chrome UA, possiamo aggirare gli hack che questi sviluppatori stanno utilizzando, per offrire agli utenti la migliore esperienza.

3