Question

在集成LESS CSS时，我遇到了CSS中的一些条件注释，如

[if IE 7] margin-top: -2px;
[if IE 8] margin-top: -3px;
[if Webkit] margin-top: -1px;

当然，LESS编译器无法将它们编译为CSS，

因此，对于IE，我找到了一种方法来避免条件评论并让它们起作用，如上所述IN THIS ARTICLE

但是，似乎没有办法[IF Webkit]，而不是通过JS检测webkit并添加一个类。

任何人都可以请我帮忙吗？

Answer 1

在指定要使用的样式表而不是样式表中时，应该使用条件注释。如下所示：

<!--[if IE 6]>
    <link rel="stylesheet" href="style_ie6.css">
<![endif]-->

或者您应该在css文件中使用特定的类：

.ie6 .container {}

并确保您在适当的HTML中使用.ie6类

在某些情况下，使用浏览器特定的样式表可能是一个好主意，但我强烈建议不要测试浏览器测试功能是否有可能。查看modernizr

Answer 2

虽然从技术上说它不是有效的CSS你仍然可以通过某些逃脱黑客获得它：

.cond(@c, @p, @v) {
    -: ~"; [if @{c}] @{p}: @{v}";
}

div {
    .cond(IE 7,   margin-top, -2px);
    .cond(IE 8,   margin-top, -3px);
    .cond(Webkit, margin-top, -1px);
}

这是在输出中生成虚拟-: ;的简化简约示例（通过在此处搜索~"，您将找到更多华丽的逃逸黑客示例。）

P.S。我给出了这个答案，以防万一，即表明你可以在LESS中获得这些字符串，但它并没有取消这个CSS本身非常值得怀疑的事实（[if Webkit]？ - 它支持哪些浏览器/库在？）

CSS LESS CSS中的条件注释

2 个答案: