如何针对媒体查询定位特定浏览器

Question

我在浏览高级响应式设计在线课程的Q＆amp; A部分时遇到了这个问题。我找到了答案，分享了它，并决定在这里发布，以防其他人可能有同样的dillema。

如果我们可以为某些与大多数浏览器行为不同的浏览器定义不同的样式，那么dillema就是确保浏览器兼容性要容易得多，例如： Internet Explorer以及至少我的网站Safari。

那我们该怎么做呢？请查看下面的答案，如果您认为您知道更好的方法针对特定的媒体查询定位特定的媒体查询，请随时提供帮助。

Answer 1

使用caniuse（https://caniuse.com/），查找仅受您要定位的特定浏览器支持的特定属性。然后，使用@support查询，使用您找到的属性定位该浏览器是唯一的。然后，在该查询中应用的任何样式将仅适用于支持您定义查询的属性的浏览器。

也就是说，@ support支持括号内的属性用于定义 - 对于哪些浏览器 - 花括号内的样式将应用;它们不需要相同，也就是说，您不需要在花括号中使用相同的属性来在括号中定义查询，因此您可以选择任何针对您想要的特定浏览器的属性显示样式。

更新

我发现这个网站似乎提供了针对caniuse风格的特定浏览器和浏览器版本的解决方案，让您无需手动测试每个属性：

http://browserhacks.com/

本文简要介绍了如何使用它：

https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

更新

仅适用于Internet Explorer，仅适用于旧版本，您可以使用HTML中的条件注释创建单独的样式表来加载它们。这可以是您的一般样式表的副本，调整为适用于旧的IE版本，但仅在检测到这些版本时加载，因此不会干扰其他浏览器上的显示。遗憾的是，它们不适用于其他浏览器。本文介绍了如何使用条件语句。

https://www.quirksmode.org/css/condcom.html

更新：

这个问题最有效的解决方案似乎是实现一些检测浏览器版本的javascript然后应用特定样式，甚至根据你定位的浏览器修改DOM。

这很好地解释了原理和一些应用：

Is there any equivalent to IE conditional comment for chrome and safari?

这个，如果相当陈旧，仍然是一个非常有用的应用程序：

http://rafael.adm.br/css_browser_selector/

就是这样！能够确保浏览器与大多数浏览器的兼容性！