为什么人们使用CSS供应商前缀,尽管规范中明确说明了don';T

为什么人们使用CSS供应商前缀,尽管规范中明确说明了don';T,css,autoprefixer,vendor-prefix,Css,Autoprefixer,Vendor Prefix,我想知道为什么每个人在生产构建中都使用供应商前缀es,尽管CSS 2.1规范明确指出: 作者应避免特定于供应商的扩展() CSS 3说: 实现应支持该功能的供应商前缀和非固定语法。() 因此,据我所知,供应商前缀用于解决实验性功能的不同浏览器行为,复制粘贴特定CSS属性的值并向其添加不同的前缀是没有意义的 例如,我认为可以这样写: -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit

我想知道为什么每个人在生产构建中都使用
供应商前缀
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; 
但为什么人们使用供应商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这样的工具会复制粘贴每个属性,即使它在不同浏览器中没有不同的行为。

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

该规范称,引用浏览器而非样式表的实现不需要供应商前缀。这与他们是否这样做是不同的。某些浏览器确实需要某些样式的前缀

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

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

在网上找到的代码片段并不总是过时的。比如说

-webkit转换:所有4s
-moz过渡:所有4s都很轻松;
-ms过渡:所有4s轻松;
-o-过渡:所有4s缓解;
过渡:所有4s轻松;
这些天通常会被认为是杀伤力过大。始终检查在线找到的代码位上的日期。因此,检查rep可以帮助您区分可行答案和最佳答案

还有一个完全不同的问题,就是如何放弃对与web可访问性相关的旧浏览器的支持。这里我不想讨论这个问题,但是有一些人说,选择只支持最新和/或流行的浏览器本身就有问题

可以将Autoprefixer配置为完全针对您想要支持的浏览器。它只添加满足指定需求所需的特定于供应商的CSS。默认情况下,Autoprefixer使用浏览器列表默认值。通过该设置,无需供应商特定代码即可支持
边界半径:10px 5px
过渡:所有4s轻松
。通过运行这两条规则,您可以看到,
>0.5%过滤了最后两个版本,Firefox ESR,not dead
。您可以查看在上覆盖哪些浏览器

实际上,许多人并不编写特定于供应商的CSS,而是依赖于构建工具中内置的Autoprefixer。例如,您可能有一个或安装程序,可以通过Autoprefixer自动运行样式表。如果这对您来说是新的,那么一个很好的起点可能是POSTSS的命令行工具

npm安装-g postsss cli autoprefixer
postsss my-styles.css--使用autoprefixer--目录输出目录

由于许多人阅读有关功能的文章,这些文章是在功能制作时撰写的(仍然是实验性的,需要前缀),它们没有更新,但被很好地引用。如果你不知道代码的意思,你就盲目地复制/粘贴并使用它。谢谢@TemaniAfif,但正如CSS 3所说,即使功能还在试验阶段,浏览器也应该支持它们,而不使用厂商前缀。因此,这些文章首先不应该存在。规范说:一旦功能稳定,实现更新以匹配互操作行为,就应该删除对供应商前缀语法的支持。-->你错过了一个重要的部分,那就是一旦功能稳定下来,它过去是必要的。现在,它(大部分)不是。是的,大多数供应商已经同意不再在最终将被标准化的实验性实现中使用前缀。尽管如此,对于非标准的特定于供应商的内容(这就是为什么@Temani Afif总是允许使用前缀的原因)。只要您了解它是特定于浏览器的设计,那么为这些东西使用前缀是正常的。但是实验性的东西的前缀基本上是最近才出现的。所以从你的回答中,我了解到一个完全兼容css 3的浏览器不需要任何厂商的前缀就可以正常工作,除非某些属性与最终规范不同。这是正确的吗?我认为这是一种合理的思考方式。这变得很棘手,因为当发布特定版本的浏览器时,给定的功能可能不稳定。当功能稳定时,旧版本的浏览器仍需要浏览器前缀。因此,也许可以将其视为“与CSS 3规范完全兼容的浏览器版本不需要在发布该版本浏览器时稳定的任何属性的前缀。”但该规范指出,浏览器应支持不固定语法和固定语法,即使该属性还不稳定。“在生产版本中向Web公开此类标准跟踪不稳定功能时,实现应支持该功能的供应商前缀和非固定语法。一旦功能稳定,实现更新以匹配可互操作行为,就应该删除对供应商前缀语法的支持。”是的,我们看到的是主流浏览器正在采取的行动