如何通过CSS识别Microsoft Edge浏览器？

我正在开发Web应用程序，并且需要与其他浏览器分开标识Microsoft Edge的浏览器，以应用独特的样式。有没有一种使用CSS识别Edge的方法？就像，

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

/ * Microsoft Edge浏览器12-18（Chromium之前的所有版本）* /

这应该工作：

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

有关更多信息，请参见：浏览器的奇怪性

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

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

效果很好！

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

Edge（不包括最新的IE 15）更准确：

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

@supports (-ms-ime-align:auto) { ... } 适用于所有Edge版本（当前最高为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);
         }
}

特征检测，特征检测，特征检测。关于为什么有人需要UA嗅探或使用CSS进行检测的好用例尚未找到。您能详细解释一下用例吗？

的CSS

我从Jeff Clayton找到了这篇文章，该文章说明了如何通过CSS查找Edge，但是它也可以检测Chrome和Safari。

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

但是，如果您必须UA嗅探：

Microsoft Edge UA字符串：

Mozilla / 5.0（Windows NT 10.0）AppleWebKit / 537.36（KHTML，例如Gecko）Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

我在这篇博客文章中详细说明了原因。

Neowin最近报道说，微软针对Windows 10的新浏览器Spartan使用Chrome UA字符串“ Mozilla / 5.0（Windows NT 10.0； WOW64）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ”。 那是故意的。

您还会注意到，整个字符串都以“ Edge / 12.0”结尾，而Chrome则没有。

我应该指出，这与Microsoft在Windows 8上读取的IE 11并不完全相同，在Windows 8上为：Mozilla / 5.0（Windows NT 6.3; Trident / 7.0; rv：11.0），如Gecko所示，发布。

什么是用户代理嗅探？

通常，Web开发人员会UA嗅探浏览器检测。Mozilla在其博客中对此进行了很好的解释：

为不同的浏览器提供不同的网页或服务通常是一个坏主意。所有人都可以使用Web，无论他们使用哪种浏览器或设备。有一些方法可以开发您的网站，以基于功能的可用性而不是针对特定的浏览器来逐步增强自身。

这是一篇很棒的文章，解释了用户代理的历史。

通常，懒惰的开发人员只会嗅探UA字符串，并根据他们认为查看器正在使用的浏览器来禁用其网站上的内容。对于开发人员来说，Internet Explorer 8是一个令人沮丧的常见问题，因此他们将经常检查用户是否使用IE的任何版本，并禁用功能。

Edge团队在其博客中更详细地介绍了这一点。

所有用户代理字符串都包含比您正在使用的实际浏览器更多的其他浏览器信息–不仅是令牌，而且还有“有意义的”版本号。

Internet Explorer 11的UA字符串：

像Gecko一样的Mozilla / 5.0（Windows NT 6.3; Trident / 7.0; rv：11.0）

Microsoft Edge UA字符串：

Mozilla / 5.0（Windows NT 10.0）AppleWebKit / 537.36（KHTML，例如Gecko）Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

在H3C讨论中，Patrick H. Lauke恰当地将userAgent属性描述为“不断增长的谎言”。（“或者，一种平衡的操作，即添加足够的旧关键字，这些旧关键字不会立即使旧的UA嗅探代码掉落，同时仍然尝试传达一些实际有用和准确的信息。”）

我们建议Web开发人员尽可能避免UA嗅探。现代化的Web平台功能几乎可以通过简单的方式检测到。在过去的一年中，我们已经看到一些UA嗅探网站已经更新，可以检测Microsoft Edge……只是为其提供了旧版IE11代码路径。这不是最佳方法，因为Microsoft Edge匹配“ WebKit”行为，而不是IE11行为（任何Edge-WebKit差异都是我们有兴趣修复的错误）。

根据我们的经验，Microsoft Edge在这些站点中的“ WebKit”代码路径上运行最佳。另外，随着Internet在越来越多的设备上可用，请假定未知的浏览器是好的-请不要将您的网站限制为仅在少数当前已知的浏览器上工作。如果这样做，将来您的网站几乎肯定会中断。

结论

通过显示Chrome UA字符串，我们可以解决这些开发人员正在使用的hack，从而为用户提供最佳体验。