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

Question

根据 answer 之一对于“为什么浏览器会为 CSS 属性创建供应商前缀？”，需要供应商前缀的原因之一是为了避免破坏页面，即使属性的最终规范与供应商的实现(解释)不同也是如此。

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

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

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

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 中尝试上面的代码片段，看看我在说什么。