1

我已经开始发现某些 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 和浏览器实现计划继续推进这些事情的方式吗？有没有更好更短的方法？这样做似乎不利于创造更 DRY 的编码体验。

4

3 回答 3

2

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

于 2012-05-16T03:15:00.440 回答
1

我建议您使用像 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%) }

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

于 2012-05-16T06:49:44.173 回答
0

看看prefixmycss，prefixfree，特别是CSS3好吗？它们将帮助您节省大量编写如此长的 CSS 的时间。

于 2012-09-13T04:28:46.087 回答