我必须总是为每个浏览器声明不同的 webkit 样式吗？答案

【问题标题】：Must I always declare different webkit styles for each browser?我必须总是为每个浏览器声明不同的 webkit 样式吗？
【发布时间】：2012-05-23 14:21:19
【问题描述】：

我开始发现某些 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 的编码体验。

【问题讨论】：

@JohnConde 哈哈。是的，这似乎是地狱
这也是LESS 或SASS 流行使用变量、mixin 等来自动化部分重复的部分原因。
“不同的 webkit 风格”ಠ_ಠ
是的，我知道@BoltClock - 你怎么称呼它？ :)

标签： css webkit vendor-prefix

【解决方案1】：

看看prefixmycss、prefixfree，尤其是CSS3 Please怎么样？它们将帮助您节省大量编写如此长的 css 的时间。

【讨论】：

【解决方案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%) }

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

【讨论】：

【解决方案3】：

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

【讨论】：