Como identificar o navegador Microsoft Edge via CSS?

Estou desenvolvendo um aplicativo da web e preciso identificar o navegador do Microsoft Edge separadamente dos outros, para aplicar um estilo exclusivo. Existe uma maneira de identificar o Edge usando CSS? Assim como,

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

/ * Microsoft Edge Browser 12-18 (todas as versões anteriores ao Chromium) * /

Este deve funcionar:

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

Para mais informações, consulte: Estranheza do navegador

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

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

Isso funciona muito bem!

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

Mais preciso para o Edge (não inclua o IE 15 mais recente) é:

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

@supports (-ms-ime-align:auto) { ... } funciona para todas as versões do Edge (atualmente até o 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);
         }
}

Detecção de recursos, detecção de recursos, detecção de recursos. Ainda estou para encontrar um bom caso de uso para explicar por que alguém precisaria farejar ou detectar com CSS. Você poderia explicar em detalhes um caso de uso?

CSS

Eu encontrei este post de Jeff Clayton , que ilustra como encontrar o Edge via CSS, mas também detecta o Chrome e o Safari.

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

Mas se você PRECISA cheirar:

String UA do Microsoft Edge:

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

Eu detalho o porquê nesta postagem do blog.

Neowin relatou recentemente que o novo navegador da Microsoft para Windows 10, Spartan, usa a string Chrome UA, “Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ″. Isso é feito de propósito.

Você também notará que toda a string termina com “Edge / 12.0 ″, o que o Chrome não faz.

Devo ressaltar que este não é um desvio do que a Microsoft fez com o IE 11, que no Windows 8 lê: Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) como Gecko, conforme explicado neste postar.

O que o User Agent está farejando?

Freqüentemente, os desenvolvedores da web farão o UA farejando a detecção do navegador. Mozilla explica isso bem em seu blog:

Servir diferentes páginas da Web ou serviços para navegadores diferentes geralmente é uma má ideia. A Web deve ser acessível a todos, independentemente do navegador ou dispositivo que estejam usando. Existem maneiras de desenvolver seu site para se aprimorar progressivamente com base na disponibilidade de recursos, em vez de almejar navegadores específicos.

Aqui está um ótimo artigo que explica a história do Agente do Usuário.

Freqüentemente, os desenvolvedores preguiçosos apenas farejam a string UA e desabilitam o conteúdo em seu site com base no navegador que acreditam que o visualizador está usando. O Internet Explorer 8 é um ponto comum de frustração para os desenvolvedores, portanto, eles verificarão freqüentemente se um usuário está usando ALGUMA versão do IE e desabilitarão recursos.

A equipe do Edge detalha isso ainda mais detalhadamente em seu blog.

Todas as strings de agentes de usuário contêm mais informações sobre outros navegadores do que o navegador real que você está usando - não apenas tokens, mas também números de versão 'significativos'.

String UA do Internet Explorer 11:

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

String UA do Microsoft Edge:

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

A propriedade userAgent foi apropriadamente descrita como “um crescente pacote de mentiras” por Patrick H. Lauke nas discussões do W3C. (“Ou melhor, um ato de equilíbrio de adicionar palavras-chave legadas suficientes que não terão imediatamente o código antigo de detecção de UA caindo, enquanto ainda tenta transmitir um pouco de informações realmente úteis e precisas.”)

Recomendamos que os desenvolvedores da web evitem o sniffing de UA tanto quanto possível; os recursos da plataforma web moderna são quase todos detectáveis ​​de maneiras fáceis. No ano passado, vimos alguns sites de detecção de UA que foram atualizados para detectar o Microsoft Edge ... apenas para fornecer um caminho de código IE11 legado. Essa não é a melhor abordagem, pois o Microsoft Edge corresponde aos comportamentos do 'WebKit', não aos do IE11 (quaisquer diferenças entre o Edge e o WebKit são bugs que estamos interessados ​​em corrigir).

Em nossa experiência, o Microsoft Edge funciona melhor nos caminhos de código 'WebKit' nesses sites. Além disso, com a Internet se tornando disponível em uma variedade maior de dispositivos, assuma que navegadores desconhecidos são bons - por favor, não limite seu site a funcionar apenas em um pequeno conjunto de navegadores conhecidos. Se você fizer isso, seu site quase certamente quebrará no futuro.

Conclusão

Ao apresentar a string Chrome UA, podemos contornar os hacks que esses desenvolvedores estão usando para apresentar a melhor experiência aos usuários.