Question

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

作者应避免使用供应商特定的扩展名（link）

CSS 3说：

实现应同时支持该功能的供应商前缀和非前缀语法。（link）

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

例如，我认为写这样的东西是可以的：

-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;

但是为什么人们使用供应商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的内容。

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

问题是W3C的CSS工作组，他们编写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。您可以通过在> 0.5%, last 2 versions, Firefox ESR, not dead中“过滤”的https://autoprefixer.github.io/中运行两个规则来看到这一点。您可以查看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

为什么人们使用CSS供应商前缀，尽管规范明确指出不这样做

1 个答案: