如何通过 CSS 识别 Microsoft Edge 浏览器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32201586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Identify Microsoft Edge browser via CSS?
提问by Sameera Liyanage
I'm developing web application and I need to identify Microsoft Edge's browser separately from others, to apply unique styling. Is there a way to identify Edge by using CSS? Just like,
我正在开发 Web 应用程序，我需要将 Microsoft Edge 的浏览器与其他浏览器区分开来，以应用独特的样式。有没有办法通过使用 CSS 来识别 Edge？就像，
<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
回答by KittMedia
/* Microsoft Edge Browser 12-18 (All versions before Chromium) */
/* Microsoft Edge 浏览器 12-18（Chromium 之前的所有版本）*/
This one should work:
这个应该有效：
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
For more see: Browser Strangeness
有关更多信息，请参阅：浏览器奇怪
回答by CodeGust
/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */
_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
That works great!
效果很好！
// 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/
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
回答by mature
More accurate for Edge(do not include latest IE 15) is:
Edge更准确（不包括最新的 IE 15）是：
@supports (display:-ms-grid) { ... }
@supports (-ms-ime-align:auto) { ... }works for all Edge versions (currently up to IE15).
@supports (-ms-ime-align:auto) { ... }适用于所有 Edge 版本（目前最高为 IE15）。
回答by Priya Nayak
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);
}
}
回答by Dave Voyles
Feature detection,feature detection, feature detection. Have yet to find a good use case as to why someone would need to UA sniff or detect with CSS. Could you please explain in a bit of detail, a use case?
特征检测，特征检测，特征检测。还没有找到一个很好的用例来说明为什么有人需要 UA 嗅探或使用 CSS 进行检测。你能详细解释一下，一个用例吗？
CSS
CSS
I found this post from Jeff Clayton, which illustrates how to find Edge via CSS, but it will also detect Chrome and Safari.
我找到了 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; }
}
But if you MUST UA sniff:
但如果你必须 UA 嗅探：
Microsoft Edge UA string:
Microsoft Edge UA 字符串：
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136
I detail why in this blog post.
Neowin recently reported that Microsoft's new browser for Windows 10, Spartan, uses the Chrome UA string, “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″.That is done on purpose.
Neowin 最近报道称，微软的 Windows 10 新浏览器 Spartan 使用 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.0 ”。这是故意的。
You'll also notice that the entire string ends with “Edge/12.0″, which Chrome does not.
您还会注意到整个字符串以“Edge/12.0”结尾，而 Chrome 没有。
I should point out, that this isn't a redical departure from what Microsoft did with IE 11, which on Windows 8 reads: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko, as explained in this post.
我应该指出，这与微软对 IE 11 所做的并没有什么不同，它在 Windows 8 上读取：Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko，如此解释邮政。
What is User Agent sniffing?
什么是用户代理嗅探？
Often, web developers will UA sniffing for browser detection. Mozilla explains it well on their blog:
通常，Web 开发人员会通过 UA 嗅探来检测浏览器。Mozilla 在他们的博客上很好地解释了这一点：
Serving different Web pages or services to different browsers is usually a bad idea. The Web is meant to be accessible to everyone, regardless of which browser or device they're using. There are ways to develop your web site to progressively enhance itself based on the availability of features rather than by targeting specific browsers.
为不同的浏览器提供不同的网页或服务通常是一个坏主意。所有人都可以访问网络，无论他们使用哪种浏览器或设备。有多种方法可以开发您的网站，以根据功能的可用性而不是针对特定浏览器来逐步增强自身。
Here's a great article explaining the history of the User Agent.
Often, lazy developers will just sniff for the UA string and disable content on their website based on which browser they believe the viewer is using. Internet Explorer 8 is a common point of frustration for developers, so they will frequently check if a user is using ANY version of IE, and disable features.
通常，懒惰的开发人员只会根据他们认为查看者使用的浏览器来嗅探 UA 字符串并禁用其网站上的内容。Internet Explorer 8 是开发人员常见的挫折点，因此他们会经常检查用户是否使用任何版本的 IE，并禁用功能。
The Edge team details this even deeper on their blog.
All user agents strings contain more information about other browsers than the actual browser you are using – not just tokens, but also ‘meaningful' version numbers.
所有用户代理字符串都包含比您正在使用的实际浏览器更多的关于其他浏览器的信息——不仅仅是令牌，还有“有意义的”版本号。
Internet Explorer 11's UA string:
Internet Explorer 11 的 UA 字符串：
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) 像 Gecko
Microsoft Edge UA string:
Microsoft Edge UA 字符串：
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136
The userAgent property has been aptly described as “an ever-growing pack of lies” by Patrick H. Lauke in W3C discussions. (“or rather, a balancing act of adding enough legacy keywords that won't immediately have old UA-sniffing code falling over, while still trying to convey a little bit of actually useful and accurate information.”)
在 W3C 的讨论中，Patrick H. Lauke 恰当地将 userAgent 属性描述为“不断增长的谎言”。（“或者更确切地说，添加足够的遗留关键字的平衡行为，不会立即使旧的 UA 嗅探代码失效，同时仍然试图传达一点实际有用和准确的信息。”）
We recommend that web developers avoid UA sniffing as much as possible; modern web platform features are nearly all detectable in easy ways. Over the past year, we've seen some UA-sniffing sites that have been updated to detect Microsoft Edge… only to provide it with a legacy IE11 code path. This is not the best approach, as Microsoft Edge matches ‘WebKit' behaviors, not IE11 behaviors (any Edge-WebKit differences are bugs that we're interested in fixing).
我们建议 Web 开发人员尽可能避免 UA 嗅探；现代网络平台功能几乎都可以通过简单的方式检测到。在过去的一年中，我们看到一些 UA 嗅探站点已更新以检测 Microsoft Edge……只是为它提供了旧的 IE11 代码路径。这不是最好的方法，因为 Microsoft Edge 匹配“WebKit”行为，而不是 IE11 行为（任何 Edge-WebKit 差异都是我们有兴趣修复的错误）。
In our experience Microsoft Edge runs best on the ‘WebKit' code paths in these sites. Also, with the internet becoming available on a wider variety of devices, please assume unknown browsers are good – please don't limit your site to working only on a small set of current known browsers. If you do this, your site will almost certainly break in the future.
根据我们的经验，Microsoft Edge 在这些站点中的“WebKit”代码路径上运行最佳。此外，随着互联网在更广泛的设备上可用，请假设未知浏览器是好的 - 请不要将您的站点限制为仅在一小部分当前已知的浏览器上工作。如果您这样做，您的网站将来几乎肯定会崩溃。
Conclusion
结论
By presenting the Chrome UA string, we can work around the hacks these developers are using, to present the best experience to users.
通过提供 Chrome UA 字符串，我们可以解决这些开发人员正在使用的技巧，为用户提供最佳体验。
