1

我只是在做 codeschool，他们告诉我：

SORRY，TRY AGAIN transform 必须最后定义，在浏览器前缀样式之后。

这是我的代码：

img:hover {
  -webkit-transform: translate(10px,20px);
  -o-transform: translate(10px,20px);
    transform: translate(10px,20px);
  -moz-transform: translate(10px,20px);
}

像往常一样，我开始使用我的代码并发现我不需要这行代码：

  transform: translate(10px,20px);

一点也不！没有它一切正常！然后我试图删除所有这些东西

   -webkit-transform: translate(10px,20px);
  -o-transform: translate(10px,20px);
  -moz-transform: translate(10px,20px);

然后离开

    transform: translate(10px,20px);

只要。多么惊喜！它不起作用！所以这是我的第一个问题：

如果它根本不起作用，为什么我必须定义 line transform: translate(10px,20px);without ？-o-/-webkit-/-moz-

而不是第二个：为什么 codeschool 告诉你

SORRY，TRY AGAIN transform 必须最后定义，在浏览器前缀样式之后。

为什么？

4

2 回答 2

3

CodeSchool 强制您使用 CSS 最佳实践。这有一个很好的理由：面向未来。为什么/如何？

CSS3 还不是很标准，但这并没有阻止 Google 或 Mozilla 的人们尝试实现这些功能。问题是，由于 CSS3 正在发生变化，这些人不太确定它是如何工作的。为了解决这个问题，非标准前缀符号（-moz-或-o-规则）被创建为过渡规则，以便在 CSS3 规范慢慢完成时使用。

但这产生了一个新问题：“一旦 CSS3 最终确定，这些规则该怎么办？” 这就是 CSS 中的“级联”的用途：较低的规则优先于较高的规则。通过在扩展规则下面添加“标准”规则，它只会在浏览器支持时覆盖特定于浏览器的规则。

因此，我们可以使用当今最先进的浏览器功能，同时为明天的标准做好准备，并且使用相同的 CSS 文件！

于 2013-07-02T14:14:14.033 回答
-1

-o-/-moz- 等是浏览器特定的声明，允许不支持本机属性但有自己实现的浏览器。

您应该始终拥有不带前缀的常规属性。前缀只是为了扩展将应用该属性的浏览器范围。

属性的特定顺序对页面输出没有影响，但是根据验证器的严格程度，它可能会告诉您它无效，除非最后写入无前缀的属性

于 2013-07-02T13:58:38.633 回答