为什么人们使用 CSS 供应商前缀，尽管规范明确说不要

Question

我想知道为什么每个人都vendor-prefix在他们的生产版本中使用es，尽管 CSS 2.1 规范明确说明：

作者应避免特定于供应商的扩展（链接）

CSS 3 说：

实现应支持该功能的供应商前缀和无前缀语法。（链接）

因此，据我所知，供应商前缀用于解决跨浏览器的不同行为以实现实验性功能，并且复制粘贴特定 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; 

但是为什么人们使用 vendor prifix 来处理跨浏览器一致的事情，例如：

-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 上，检查代表可以帮助您区分可行的答案和最佳答案。

关于如何放弃对与 Web 可访问性相关的旧浏览器的支持，还有一个单独的问题。不会在这里讨论，但有些人说选择只支持更新和/或流行的浏览器本质上是有问题的。

Autoprefixer 可以配置为准确定位您想要支持的浏览器。它仅添加满足您指定的需求所需的特定于供应商的 CSS。默认情况下，Autoprefixer 使用 Browserlist 默认值。使用该设置，不需要特定于供应商的代码来支持border-radius: 10px 5px和transition: all 4s ease. 您可以通过https://autoprefixer.github.io/运行您的两个规则来看到这一点，“过滤”了> 0.5%, last 2 versions, Firefox ESR, not dead. 您可以在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