Question

我正在做codechool，他们告诉我：

抱歉，再试一次必须在浏览器前缀样式之后最后定义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);

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

为什么我必须在没有transform: translate(10px,20px);的情况下定义行-o-/-webkit-/-moz- 如果它根本不起作用？

而不是第二名：为什么codechool告诉你

抱歉，再试一次必须在浏览器前缀样式之后最后定义transform。

为什么？

Answer 1

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

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

但这造成了一个新问题：“一旦完成CSS3，该怎么处理这些规则？”这就是CSS中的“级联”：下级规则优先于较高级别的规则。通过在扩展名下面添加“标准”规则，只有当浏览器支持时，它才会覆盖特定于浏览器的。

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

Answer 2

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

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

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

为什么我必须在所有“-o - / - webkit - / - moz-transform：xxx（px px）”之后定义“transform：xxx（px px）”？

2 个答案: