Question

根据answer中的一个＆＃34;为什么浏览器会为CSS属性创建供应商前缀？＆＃34;，需要供应商前缀的原因之一是避免破坏页面即使财产的最终规范与供应商的实施（解释）不同。

我读了一本书，说明在供应商前缀属性声明之后放置没有供应商前缀的属性通常是一个好习惯，如下所示：

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

让我们说连字符的最终规范与供应商的解释不同。如果有人开发了一个依赖于某些供应商前缀实现的网页，那么就不会因为我所假设的那样使用了＃14;连字符＆＃34;规格不同于供应商＆＃39;？如果解释与最终规范相同，我认为上面的代码很好。为什么上面的代码通常是一个好的做法？

Answer 1

您提供的代码段被认为是一种很好的做法，因为它（希望）向前和向后兼容......

基本上使用非标准实现，每个浏览器可能会以不同的方式实现属性，因此前缀也是如此。如果一切顺利，最终不同的浏览器将标准化属性并且（希望）以相同的方式呈现它。

在浏览器标准化属性并删除非前缀版本将起作用的前缀时，带前缀的版本将暂时起作用（希望如此）。

我知道上面的“希望”看起来并不那么令人鼓舞，如果你想让你的CSS成为防弹，不要使用新的属性，直到它们被标准化或设计你的东西来优雅地降级。

某些css3属性（如border-radius）在某种程度上是标准化的，并且在没有前缀的情况下可以正常呈现，但并非每个互联网用户都保持其浏览器是最新的，因此继续使用前缀可能是一个好主意而。

另一方面，Firefox会提供一些属性，而不会使用Chrome不支持的前缀，例如animation和@keyframes。在这种情况下，使用前缀版本后跟非前缀版本非常有意义。

.myClass {
  position: relative;
  -webkit-animation: myAnimation 3s; /* Chrome will use this */
  animation: myAnimation 3s; /*Firefox will ignore the -webkit- property and use this */
}
@-webkit-keyframes myAnimation { /* Chrome will use this */
  from {
    background: red;
    top: 10px;
  }
  to {
    background: blue;
    top: 100px;
  }
}
@keyframes myAnimation { /*Firefox will ignore the -webkit- property and use this */
  from {
    background: red;
    top: 10px;
  }
  to {
    background: blue;
    top: 100px;
  }
}

<div class="myClass">Hello World</div>

在Firefox和Chrome中尝试上述代码段，看看我在说什么。

Answer 2

由于CSS's overidding feature.

，上面的代码是很好的做法

通过这种方式，您可以让浏览器检查它是否具有特定的供应商前缀（现代浏览器通常不需要它，但在支持旧版本时它很好）并且最后您拥有一般（全能）财产;

如果浏览器没有识别出任何属性类型，那么它就会不知所措......

没有供应商前缀的属性，后跟CSS3中的供应商前缀属性

2 个答案: