css - 为什么人们使用 CSS vendor-prefix 尽管规范明确表示不要

Question

我想知道为什么每个人都在他们的生产构建中使用 vendor-prefixes，尽管 CSS 2.1 规范明确地说:

Authors should avoid vendor-specific extensions (link)

CSS 3 说:

implementations should support both vendor-prefixed and unprefixed syntaxes for the feature. (link)

据我所知，供应商前缀用于解决跨浏览器的实验性功能的不同行为，复制粘贴特定 CSS 属性的值并仅向其添加不同的前缀是没有意义的。

比如我觉得这样写就可以了:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px; 

但是为什么人们对跨浏览器一致的东西使用供应商前缀，例如:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

以及为什么像 autoprifixer 这样的工具会复制粘贴每个属性，即使它在浏览器之间没有不同的行为。

Answer 1

CSS 3 规范比 CSS 2.1 更新，所以让我们跳过 2.1 的内容。

规范说实现——指的是浏览器，而不是样式表——应该不需要供应商前缀。这不同于他们是否做。有些浏览器确实需要某些样式的前缀。

问题是编写 CSS 规范的 W3C CSS 工作组实际上对浏览器开发人员没有权力——浏览器开发人员必须选择遵守规范(部分或全部)。令人兴奋的是，越来越多的主流浏览器都符合规范，并且越来越少需要供应商前缀。

您需要提供的供应商前缀属性取决于您支持的浏览器。在给定的浏览器中，要求通常因版本而异。在大多数情况下，较新版本的浏览器比同一浏览器的旧版本需要更少的供应商 CSS 属性。

在网上找到的片段并不总是会过时。例如

-webkit-transition: all 4s 
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

如今通常被认为是矫枉过正。始终检查在线找到的代码位上的日期。在 SO 上，检查代表可以帮助您区分可行的答案和最佳答案。

有一个完全不同的问题，即放弃对旧浏览器的支持与网络可访问性有何关系。此处不展开讨论，但有些人表示选择仅支持较新的和/或流行的浏览器本质上是有问题的。

Autoprefixer 可以配置为精确定位您想要支持的浏览器。它仅添加满足您指定需求所需的特定于供应商的 CSS。默认情况下，Autoprefixer 默认使用 Browserlist。使用该设置，不需要特定于供应商的代码来支持 border-radius: 10px 5px 和 transition: all 4s ease。您可以通过 https://autoprefixer.github.io/ 运行您的两条规则来看到这一点，由 > 0.5%“过滤”，最后 2 个版本，Firefox ESR，未死。您可以在 https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead 查看覆盖了哪些浏览器

在实践中，很多人根本不编写特定于供应商的 CSS，而是依赖于构建工具中内置的 Autoprefixer。例如，您可能有一个 Gulp或 webpack通过 Autoprefixer 自动运行样式表的设置。如果这对您来说是新的，一个好的起点可能是 postcss-cli ，PostCSS 的命令行工具。

npm install -g postcss-cli autoprefixer
postcss my-styles.css --use autoprefixer --dir output-directory