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 回答