CSS3中不带供应商前缀的属性，后跟供应商前缀属性

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

我读过一本书，书中说，一般来说，将没有供应商前缀的属性放在供应商前缀的属性声明之后是一种好的做法，如下所示：

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

---

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

以上代码是良好的实践，因为

通过这种方式，您可以让浏览器检查它是否有特定的供应商前缀（现代浏览器通常不需要它，但在支持旧版本时它很好），最后您有一个通用（catch all）属性

---

如果浏览器无法识别任何属性类型，它只会忽略它…

您提供的代码片段被认为是一个良好的实践，因为它（希望）是向前和向后兼容的

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

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

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

---

一些css3属性（如border radius）在某种程度上是标准化的，可以在不使用前缀的情况下正确渲染，但并不是每个internet用户都能保持其浏览器的最新状态，因此最好继续使用前缀一段时间

另一方面，Firefox会在没有前缀的情况下呈现一些属性，而Chrome不会，比如和。在这种情况下，先使用带前缀的版本，然后再使用不带前缀的版本是非常有意义的

.myClass{
位置：相对位置；
-webkit动画：myAnimation 3s；/*Chrome将使用此*/
动画：myAnimation 3s；/*Firefox将忽略-webkit-属性并使用此属性*/
}
@-webkit关键帧myAnimation{/*Chrome将使用此*/
从{
背景：红色；
顶部：10px；
}
到{
背景：蓝色；
顶部：100px；
}
}
@关键帧myAnimation{/*Firefox将忽略-webkit-属性并使用*/
从{
背景：红色；
顶部：10px；
}
到{
背景：蓝色；
顶部：100px；
}
}

---

Hello World

如果一个网页仅在带有供应商前缀版本的情况下看起来很好，而没有使用常规属性，该怎么办？我认为由于覆盖特性，页面将无法正确显示。我的意思是，如果它同时识别这两个属性，会发生什么情况。这两种实现是不同的。如果您能告诉我拒绝投票的原因，我将不胜感激。谢谢您的回答。我现在真的很困惑，因为在我看来，即使属性还没有标准化，也可以使用无前缀版本。为什么不使用非前缀版本，即使它不是标准化的呢？每个浏览器都使用一个渲染引擎（用于safari和chrome的WebKit，等等），对吗？因此，即使没有尚未标准化的供应商前缀属性，难道每个浏览器都不知道如何呈现属性吗？@hitochan所有支持这些属性的浏览器在开始时都使用前缀，直到很长一段时间后Firefox才删除前缀。。。前缀允许开发人员在各个浏览器仍在处理最终实现时使用它们。@例如，hitochan最近删除了css3转换的前缀，但是Firefox早在他们之前就放弃了它，我当时写的代码仍然有效，因为我包括了前缀版本和非前缀版本。我真的很感谢你对一些基本问题的耐心。我想现在我终于消除了我的疑虑。