css - 如何针对特定浏览器进行媒体查询

Question

我在浏览有关高级响应式设计的在线类(class)的问答部分时遇到了这个问题。我找到了答案，分享了它，并决定将其发布在这里，以防其他人遇到同样的困境。

困境在于，如果我们可以为某些行为不同于大多数浏览器的浏览器定义不同的样式，那么确保浏览器兼容性可能会容易得多，例如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/

就是这样!确保浏览器与大多数浏览器兼容的能力!