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

Question

根据 "Why do browsers create vendor prefixes for CSS properties?" 的 answer 之一，需要供应商前缀的原因之一是即使属性的最终规范不同也能避免分页来自供应商的实施（解释）。

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

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

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

Answer 1

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

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

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

Answer 2

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

基本上，对于非标准实现，每个浏览器实现属性的方式可能与前缀略有不同。如果一切顺利，最终不同的浏览器将标准化属性并（希望）以相同的方式呈现它。

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

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

一些 css3 属性，例如 border-radius，在某种程度上是标准化的，并且可以在没有前缀的情况下正确呈现，但并不是每个互联网用户都会使他们的浏览器保持最新，所以继续下去可能是个好主意使用前缀一段时间。

另一方面，Firefox 会在没有前缀的情况下呈现某些属性，而 Chrome 则不会，例如 animation and @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 中尝试上面的代码片段，看看我在说什么。

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

a property without vendor prefix followed by vendor prefixed properties in CSS3

css

vendor-prefix

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

a property without vendor prefix followed by vendor prefixed properties in CSS3

css

vendor-prefix

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