Question

我开始发现某些css声明的重复有点单调乏味。

例如，如果我想利用旋转变换并执行类似前后旋转，跨越mozilla，chrome / safari的事情，即我必须执行以下操作：

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

@-moz-keyframes wiggle {
0% {-moz-transform:rotate(12deg);}
50% {-moz-transform:rotate(-6deg);}
100% {-moz-transform:rotate(12deg);}
}

@-ms-keyframes wiggle {
0% {-ms-transform:rotate(12deg);}
50% {-ms-transform:rotate(-6deg);}
100% {-ms-transform:rotate(12deg);}
}

然后我当然需要将这些中的每一个单独应用于：

.wiggle {
 -webkit-animation: wiggle 5s infinite;
 -moz-animation:    wiggle 5s infinite;
 -ms-animation:     wiggle 5s infinite;
}

在所有这些中，唯一不同的是ms，moz和webkit，我觉得有点愚蠢。理想情况下，上面20行代码可以被分解为8.但是每个浏览器似乎都在相互争吵，所以各地的css编码器都要受到影响。

这是CSS和浏览器实现计划继续推进这些事情的方式吗？有更好的短路吗？这样做似乎不利于创建更干的编码体验。

Answer 1

如果你想利用“前沿”css，那么很长一段时间内答案很可能会保持“是”。

Answer 2

我建议你使用像LESS这样的框架，它允许你在类（甚至是函数）中调用类，这里的例子是

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}

然后在需要单行的地方调用它

div { .box-shadow(0 0 5px, 30%) }

如您所见，您可以使用变量，因此您只能使用一个预设，然后针对要应用阴影的特定选择器修改它。

Answer 3

如何查看prefixmycss，prefixfree，尤其是CSS3 Please？它们将帮助您节省大量时间来编写如此长的CSS。

我必须始终为每个浏览器声明不同的webkit样式吗？

3 个答案: