有没有一种方法可以在*.css文件中进行特定于浏览器的条件CSS？我想在同一个物理文件中定义所有样式。
有没有一种方法可以在*.css文件中实现特定于浏览器的条件CSS？
19
- craigmoliver
1
如果您使用黑客技巧来特定地针对某个浏览器（即使您没有检查用户代理），当浏览器最终修复您正在解决的问题时，您的代码可能会出现故障或产生不良影响。相反，尝试找到更标准化的方法来解决问题，或者研究一下它是否是浏览器的错误。 - Nick McCurdy
8个回答
7
我已经在这方面工作了很久，尤其是针对最近的浏览器——大多数版本的Firefox、Webkit和Internet Explorer版本。最近，Safari和Chrome的版本也可以分离。其中一些我已经放在了browserhacks.com上。
最好始终从最好的CSS开始，但当你时间紧迫并且需要某些东西时，这些都是可用的…昨天。
目前作为参考，Internet Explorer的版本是11，Safari的版本是8，Firefox在Development/Aurora版本中最高达到36，而Chrome在Development/Canary版本中最高达到41。
如果移除任何部分，它们将非常具体化，如果更改它们，它们将无法正常工作。
要针对任何版本的Firefox [不适用于iOS！请参见下文]：
如果你希望这样做，你也可以使用我想出的一种组合黑科技来更远程地针对Chrome（这是奇怪的CSS，但它有效 - 请完全按照您在此处看到的方式进行复制）：
检测Safari的新版本就像解决Chrome一样困难，这需要使用嵌套的媒体查询来实现：
最好始终从最好的CSS开始，但当你时间紧迫并且需要某些东西时，这些都是可用的…昨天。
目前作为参考，Internet Explorer的版本是11，Safari的版本是8，Firefox在Development/Aurora版本中最高达到36，而Chrome在Development/Canary版本中最高达到41。
如果移除任何部分，它们将非常具体化，如果更改它们，它们将无法正常工作。
要针对任何版本的Firefox [不适用于iOS！请参见下文]：
/* Firefox (any) */
_:-moz-tree-row(hover), .selector { color:red; }
检测Chrome的新版本：
（此方法不适用于iOS上的Chrome!!! --- 开发者在iPad和iPhone上使用了Safari引擎而非Chromium或Mozilla - 因此您需要使用Safari hack来检测这些浏览器的iOS版本）
/* Chrome 29 and newer */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
.selector { color:red; }
}
如果你希望这样做，你也可以使用我想出的一种组合黑科技来更远程地针对Chrome（这是奇怪的CSS，但它有效 - 请完全按照您在此处看到的方式进行复制）：
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.selector {-chrome-:only(;
color:red;
);}
}
检测Safari的新版本就像解决Chrome一样困难，这需要使用嵌套的媒体查询来实现：
/* Safari 6.1-10.0 */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.selector { color:red; }
}}
2017年3月底，Safari进行了更新，因此这个适用于10.1版本：
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
.selector { color:red; }
}}
对于版本（7.1及以上），您可以使用此代码：
/* Safari 7.1+ (10.1 is the current version as of April 2017) */
_::-webkit-full-page-media, _:future, :root .selector { color:red; }
针对较新版本的Internet Explorer：
/* Internet Explorer 11 */
_:-ms-fullscreen, :root .selector { color:red; }
/* Internet Explorer 10+ AND Microsoft Edge */
_:-ms-lang(x), .selector { color:red; }
/* Internet Explorer 9-11 */
_::selection, .selector { color:red\0; }
/* Microsoft's Edge Browser */
@supports (-ms-ime-align:auto) { .selector { color:red; } }
这些是基础知识，但如果想看更多我针对不同浏览器版本创建的作品，请查看我的博客：
https://jeffclayton.wordpress.com
或者我的实时CSS hack测试页面：https://browserstrangeness.bitbucket.io/css_hacks.html MIRROR: https://browserstrangeness.github.io/css_hacks.html
享受！
- Jeff Clayton
7
有一种方法可以在IE中利用浏览器和@import中的漏洞来实现。我看到的最好的方法是这里，由bobince提供（肯定比我的回答好）。
总的来说，不行。即使是条件注释也只适用于IE。
- Daniel Lew
5
你可以使用这个聪明的JavaScript文件：CSS浏览器选择器：http://rafael.adm.br/css_browser_selector/。它允许你使用类名来针对特定的浏览器，例如：
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
- Ara_Abc
3
只能通过黑客手段实现。条件注释仅适用于标记文件，而不适用于.CSS文件。
- AaronSieb
0
我认为没有比Rafael Lima上面提到的CSS浏览器选择器更好的了，所以我不会在这里添加链接或示例，这些示例来自于Rafael Lima的页面。
但需要注意的是，它只能在CSS选择器之外使用，不能针对特定的CSS行，但它比标准方法更强大且更易于阅读。
- Brad Elfman
1
2这应该是一个注释。 - JSK NS
0
不确定确切的方法。我们只是在代码后端根据用户浏览器设置CSS文件。
- JCron
0
不。使用CSS文件的整个目的是每个文件代表特定的样式。如果您想编写脚本，应该使用PHP或类似的东西，CSS仅仅是单个样式的描述。
- Malcolm
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接