有没有办法在 *.css 文件中执行浏览器特定的条件 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/639999/
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
Is there a way to do browser specific conditional CSS inside a *.css file?
提问by craigmoliver
Is there a way to do browser specific conditional CSS inside a *.css file? I want to define all of the styles inside of the same physical file.
有没有办法在 *.css 文件中执行浏览器特定的条件 CSS？我想在同一个物理文件中定义所有样式。
采纳答案by Dan Lew
There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).
有一种方法可以通过利用浏览器中的错误和@import 在 IE 中做到这一点。我见过的最好的方法是在这里，由 bobince 提供（并且绝对击败了我的答案，呵呵）。
In general though, no. Even conditional comments are browser-specific to IE.
但总的来说，没有。甚至条件注释也是特定于浏览器的 IE。
回答by Jeff Clayton
I have been working on this for many, especially recent browsers -- most versions of Firefox, Webkit, and versions of Internet Explorer. More recently, versions of Safari and Chrome are able to be separated. Some of these I have put on browserhacks.com
我一直在为许多浏览器，尤其是最近的浏览器——大多数版本的 Firefox、Webkit 和 Internet Explorer 版本进行此工作。最近，Safari 和 Chrome 的版本可以分开。其中一些我放在 browserhacks.com 上
It is always best to start with the best CSS you can do first, but these are available for when your time is short and something is needed... yesterday.
最好先从你能做的最好的 CSS 开始，但是当你的时间很短并且需要一些东西......昨天时，这些都是可用的。
Currently for reference, Internet Explorer is version 11, Safari is version 8, Firefox is up to 36 in Development/Aurora versions, and Chrome is up to 41 in Development/Canary versions at the time of this posting.
目前作为参考，Internet Explorer 为 11 版，Safari 为 8 版，Firefox 在 Development/Aurora 版本中最高为 36，Chrome 在 Development/Canary 版本中最高为 41。
These are very specific, if they are altered by removing any parts they will not work correctly.
这些是非常具体的，如果通过移除任何部件来改变它们，它们将无法正常工作。
To target any version of Firefox [NOT on iOS! See Below]:
面向任何版本的 Firefox [不在 iOS 上！见下文]：
/* Firefox (any) */
_:-moz-tree-row(hover), .selector { color:red; }
To detect new versions of Chrome:
要检测新版本的 Chrome：
(THIS IS NOT FOR Chrome on iOS!!! --- the developers used the Safari engine on iPads and iPhones instead of Chromium or Mozilla - so you use the Safari hack for iOS versions of those browsers instead)
（这不适用于 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; }
}
If you wish to do it you can also target Chrome a little farther back with a combination hack I worked out (this is odd CSS but it works - copy it exactly as you see here):
如果您想这样做，您还可以使用我制定的组合黑客将 Chrome 定位在更远的地方（这是奇怪的 CSS，但它有效 - 完全按照您在此处看到的方式复制它）：
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.selector {-chrome-:only(;
color:red;
);}
}
To detect new versions of Safari was just as difficult to work out as Chrome, this one using a nested pair of media queries:
检测 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; }
}}
Safari updated in late March of 2017 so this one works for 10.1:
Safari 于 2017 年 3 月下旬更新，因此该版本适用于 10.1：
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
.selector { color:red; }
}}
For versions (7.1 and up) you can use this one:
对于版本（7.1 及更高版本），您可以使用以下版本：
/* Safari 7.1+ (10.1 is the current version as of April 2017) */
_::-webkit-full-page-media, _:future, :root .selector { color:red; }
To target newer versions of Internet Explorer:
以较新版本的 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.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
}
; }
/* Microsoft's Edge Browser */
@supports (-ms-ime-align:auto) { .selector { color:red; } }
These are the basics, but to see more of my creations to target many different browser versions see my blog:
这些是基础知识，但要查看我针对许多不同浏览器版本的更多创作，请参阅我的博客：
https://jeffclayton.wordpress.com
https://jeffclayton.wordpress.com
or my live CSS hack test pages:
或者我的实时 CSS hack 测试页面：
https://browserstrangeness.bitbucket.io/css_hacks.htmlMIRROR: https://browserstrangeness.github.io/css_hacks.html
https://browserstrangeness.bitbucket.io/css_hacks.html镜像：https: //browserstrangeness.github.io/css_hacks.html
Enjoy!
享受！
回答by Jeff Clayton
you can use this clever javascript file, CSS Browser Selector: http://rafael.adm.br/css_browser_selector/
你可以使用这个聪明的 javascript 文件，CSS 浏览器选择器：http: //rafael.adm.br/css_browser_selector/
it allows you to target specific browsers by using class names such as:
它允许您使用类名来定位特定的浏览器，例如：
##代码##回答by AaronSieb
Only by means of hacks. Conditional comments are only defined for the markup files, not the .CSS files.
只能通过黑客手段。条件注释仅针对标记文件定义，而不针对 .CSS 文件。
回答by Malcolm
No. The whole purpose of using CSS files is that each file represents particular style. If you want to write scripts, you should use PHP or something like that, CSS is merely a description of a single style.
不。使用 CSS 文件的全部目的是每个文件都代表特定的样式。如果你想写脚本，你应该使用 PHP 或类似的东西，CSS 只是对单一样式的描述。
回答by spiral
There's multiple hacks (see this somewhat outdated tableas an example)
有多个黑客（以这个有点过时的表格为例）
And there's server-side based solutions, such as conditional-cssfor php
还有基于服务器端的解决方案，例如php 的conditional-css
But well written, well structured css should not need that many hacks, only the ocassional ie fix.
但是写得好，结构良好的 css 应该不需要那么多的 hack，只需要偶尔的 ie 修复。
回答by Jeremy Cron
Not sure of a way to do that exactly. We just set the CSS file based on the users browser in codebehind.
不确定有什么方法可以做到这一点。我们只是在代码隐藏中根据用户浏览器设置 CSS 文件。
回答by Brad Elfman
I don't think there's a better CSS browser selector than the one referred to above by Rafael Lima, so I won't add the link here or examples which are in same post and taken from Rafael Lima's page.
我认为没有比 Rafael Lima 上面提到的更好的 CSS 浏览器选择器，所以我不会在此处添加链接或在同一帖子中取自 Rafael Lima 页面的示例。
The caveat is that it can only be used outside the CSS selector and doesn't target specific lines of CSS, but it is more robust than standard methods and easier to read.
需要注意的是，它只能在 CSS 选择器之外使用，并且不针对特定的 CSS 行，但它比标准方法更健壮且更易于阅读。
