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

Question

根据answer 之一“为什么浏览器为 CSS 属性创建供应商前缀？”，需要供应商前缀的原因之一是避免破坏页面，即使属性的最终规范不同于供应商的实施（解释）。

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

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

假设连字符的最终规范与供应商的解释不同。如果有人开发了一个依赖于某些供应商前缀实现的网页，那么页面的设计是否会中断，因为正如我所假设的那样，“连字符”规范与供应商的不同？如果解释与最终的规范相同，我认为上面的代码很好。为什么上面的代码通常是一个好习惯？

Answer 1

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

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

带前缀的版本暂时可以使用，并且（希望）到浏览器标准化属性并删除前缀时，非前缀版本将可以使用。

我知道看到上面的“希望”并不是那么令人鼓舞，如果您希望您的 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 中试试上面的 sn-p 看看我在说什么。

Answer 2

上面的代码是很好的做法，因为CSS's overidding feature.

通过这种方式，您可以让浏览器检查它是否具有特定的供应商前缀（现代浏览器通常不需要它，但在支持旧版本时很好），最后您有一个通用的（包罗万象) 财产；

如果浏览器无法识别任何属性类型，它将忽略它...