为什么人们使用 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 [=32= 复制粘贴值] 并为其添加不同的前缀。

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

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

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

Autoprefixer 可以配置为准确定位您想要支持的浏览器。它仅添加满足您指定需求所需的供应商特定 CSS。默认情况下，Autoprefixer 默认使用 Browserlist。使用该设置，不需要特定于供应商的代码来支持 border-radius: 10px 5px 和 transition: all 4s ease。您可以通过运行通过 https://autoprefixer.github.io/, "filtered" by > 0.5%, last 2 versions, Firefox ESR, not dead. You can see which browsers that covers at https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead

看到您的两条规则

实际上，很多人根本不编写特定于供应商的代码 CSS，而是依赖于构建工具中内置的 Autoprefixer。例如，您可能有一个 Gulp or webpack setup that automatically runs your stylesheets through Autoprefixer. If that's new to you, a good starting point might be postcss-cli，PostCSS.

的命令行工具

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

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

Why people use CSS vendor-prefix although the specs clearly says don't

css

autoprefixer

vendor-prefix