Question

有没有办法在* .css文件中执行浏览器特定的条件CSS？我想在同一个物理文件中定义所有样式。

Answer 1

通过利用浏览器和@import中的错误，有一种方法可以在IE中实现。我见过的最好的方法是here，由bobince提供（并且肯定会打败我的答案，嘿）。

总的来说，没有。即使是条件注释也是IE浏览器特有的。

Answer 2

我一直在为许多人工作，特别是最近的浏览器 - 大多数版本的Firefox，Webkit和Internet Explorer版本。最近，Safari和Chrome的版本可以分开。其中一些我已经把它放在了browserhacks.com上

最好先从你可以做的最好的CSS开始，但是当你的时间很短并且需要一些东西时，可以使用这些...昨天。

目前可供参考，Internet Explorer是版本11，Safari是版本8，Firefox在开发/ Aurora版本中最多36个，而在发布时，Chrome在开发/加那利版本中最多可达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; } 
}}

Safari于2017年3月下旬更新，因此适用于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黑客测试页面：

https://browserstrangeness.bitbucket.io/css_hacks.html 镜子： https://browserstrangeness.github.io/css_hacks.html

享受！

Answer 3

你可以使用这个聪明的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
}

Answer 4

只能通过黑客攻击。仅为标记文件定义条件注释，而不是.CSS文件。

Answer 5

没有。使用CSS文件的整个目的是每个文件代表特定的样式。如果你想编写脚本，你应该使用PHP或类似的东西，CSS只是一种风格的描述。

Answer 6

不确定是否有办法完全这样做。我们只是根据代码隐藏中的用户浏览器设置CSS文件。

Answer 7

有多个黑客攻击（请参阅此somewhat outdated table作为示例）

还有基于服务器端的解决方案，例如用于php的conditional-css

但写得好，结构良好的CSS不应该需要那么多黑客，只需要ocassional即修复。

Answer 8

我认为没有比Rafael Lima上面提到的更好的CSS浏览器选择器，所以我不会在这里添加链接或者在Rafael Lima的页面中显示相同帖子的示例。

需要注意的是，它只能在CSS选择器之外使用，并不针对特定的CSS行，但它比标准方法更强大，更易于阅读。

有没有办法在* .css文件中进行浏览器特定的条件CSS？

8 个答案: