Come identificare il browser Microsoft Edge tramite CSS?

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

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

/ * Microsoft Edge Browser 12-18 (tutte le versioni precedenti a Chromium) * /

Questo dovrebbe funzionare:

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

Per ulteriori informazioni, vedere: Browser Strangeness

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - 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/

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

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

@supports (-ms-ime-align:auto) { ... } funziona per tutte le versioni Edge (attualmente fino a 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);
         }
}

Rilevamento delle funzionalità, rilevamento delle funzionalità, rilevamento delle funzionalità. Devo ancora trovare un buon caso d'uso sul motivo per cui qualcuno avrebbe bisogno di annusare o rilevare UA con CSS. Potresti spiegare in dettaglio 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

Spiego in dettaglio perché in questo post del blog.

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

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

Tengo a precisare 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 Gecko, come spiegato in questo inviare.

Che cos'è lo sniffing dell'agente utente?

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

Fornire diverse pagine Web o servizi a diversi browser di solito è una cattiva idea. Il Web è pensato per essere accessibile a tutti, indipendentemente dal browser o dispositivo che stanno utilizzando. Ci sono modi per sviluppare il tuo sito web per migliorarlo progressivamente in base alla disponibilità di funzionalità piuttosto che mirando a browser specifici.

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

Spesso, gli sviluppatori pigri si limitano a fiutare la stringa UA e disabilitano i contenuti sul proprio sito Web in base al browser che ritengono stia utilizzando il visualizzatore. Internet Explorer 8 è un punto comune di frustrazione per gli sviluppatori, quindi controlleranno frequentemente se un utente sta utilizzando QUALSIASI versione di IE e disabiliteranno le funzionalità.

Il team di Edge lo descrive ancora più in dettaglio sul loro blog.

Tutte le stringhe dei programmi utente contengono più informazioni su altri browser rispetto al browser effettivo 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 mucchio di bugie in continua crescita" da Patrick H. Lauke nelle discussioni del W3C. ("O meglio, un atto equilibrante di aggiungere un numero sufficiente di parole chiave legacy che non faranno immediatamente cadere il vecchio codice UA-sniffing, pur cercando di trasmettere un po 'di informazioni effettivamente utili e accurate.")

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

In base alla nostra esperienza, Microsoft Edge funziona meglio sui percorsi di codice "WebKit" in questi siti. Inoltre, con Internet che diventa disponibile su una più ampia varietà di dispositivi, presumi che i browser sconosciuti siano buoni - per favore non limitare il tuo sito a funzionare solo su un piccolo insieme di browser conosciuti. Se lo fai, il tuo sito quasi sicuramente non funzionerà in futuro.

Conclusione

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