让我们快速回顾一下 供应商前缀 CSS 属性的起源。 希望不会触发任何人的 PTSD！
目前尚不清楚是谁首先开始使用前缀，或者它究竟何时开始。 唯一明确的是，到 2006 年，Internet Explorer 和 Firefox 已经开始使用带前缀的功能。 前缀存在的理由是指定特定于浏览器的功能。 它被认为是实现非标准功能并提供新标准功能预览的一种方式。
到 2012 年，W3C CSS 工作组发布了 关于使用供应商前缀的指南
在 CSS 中，我们对以下属性、值和 @ 规则使用供应商前缀： - 特定于供应商的扩展（根据 CSS 2.1），或 - 实验性实现（根据 CSS Snapshot 2010）（例如在工作草案中）
它成为了行业规范。 前缀的数量不断增加，随之而来的是混乱。 它导致了 CSS 功能的局部实现，引入了错误，最终破坏了浏览器生态系统，令开发者感到沮丧。 开发者对此做出的反应是开发 工具 来自动解决问题。
浏览器供应商逐渐开始放弃前缀，转而使用浏览器设置中的功能标记。 似乎供应商前缀引起的问题会随着时间的推移而逐渐消失。 问题是：**现在是时候了吗？**
我对 caniuse 数据集 和 Mozilla 开发者网络兼容性数据集 进行了一些分析，以回答这个问题。
采用趋势
您可以在上面的图表中看到主要浏览器中带前缀的功能实现趋势。 我已排除 Android 版 Chrome，因为数据不足。
从 2007 年到 2011 年，所有浏览器中带前缀的功能数量稳步增加。 Internet Explorer 仅在 2011 年才出现上升趋势。 然后，在 2012 年，Mozilla 开始从 Firefox 中删除带前缀的功能，例如 -moz-border-radius* 和 -moz-box-shadow。 此后，他们始终在该属性的标准版本完全实现后删除带前缀的属性。
2013 年，Mozilla 开始 在功能标记（首选项标记）后提供功能。 同年，Chrome 将其渲染引擎从 WebKit 切换到 Blink（Chromium 项目的一部分）。 这是删除某些带前缀的功能的一个重要转折点。
直到 2016 年 4 月，WebKit 才宣布不再发布带有前缀的实验性功能
随着时间的推移，这种策略的效果并不理想。 许多网站开始依赖带前缀的属性。 他们经常使用功能的每个带前缀的变体，这使得 CSS 难以维护，JavaScript 程序也更难编写。 网站经常只使用功能的带前缀版本，这使得浏览器在添加对非带前缀标准版本的支持时难以删除对带前缀变体的支持。 最终，浏览器感受到来自兼容性问题的压力，不得不实现彼此的前缀。
由于 Safari 和 iOS 浏览器始终使用 WebKit 渲染引擎，因此这些浏览器中带前缀数量的持续减少来得较晚。
Microsoft 从未对前缀表现出热衷，并且始终拥有最少的带前缀功能。 2019 年，Edge 从其自身的渲染引擎切换到 Blink。 令人啼笑皆非的是，这一改变实际上增加了 Edge 中带前缀属性的数量！
功能趋势
下表对比了 2013 年（前缀的顶峰时期）和 2021 年的带前缀功能。
看到原始数字可能令人惊讶。 **从 2013 年到 2021 年，需要前缀的功能数量下降了约 33%**。 我认为这个数字相当小。
当然，仅仅关注数字可能会误导人。 影响会有所不同。 它可能是需要前缀的属性系列，例如 animation；或者它可能是一个只需要一个属性或值添加前缀的功能，例如 user-select: none。 让我们探讨一下实际功能，以更好地了解情况，首先看一下在此期间发生的变化。
二十个功能已取消前缀（在主要浏览器中完全实现），并且添加了三个带前缀的功能（backdrop-filter、CSS text-orientation 和 CSS initial-letter）。
在我看来，现在已取消前缀但以前是重大痛点的最值得注意的功能是
- CSS 弹性盒布局模块
- CSS3 盒子大小
- CSS 动画
- CSS3 2D 变换
- CSS3 3D 变换
- CSS 滤镜效果
另外 14 个功能并不那么突出
:any-link::placeholder::selection:focus-visible:is():read-only:read-writefont-feature-settingstext-align-lastwriting-mode- CSS
grab和grabbing光标 - CSS 逻辑属性（随着支持的改进，将来会更多地使用）
- CSS3
zoom-in和zoom-out光标 - CSS3 多列布局
如果您选择在 2021 年不支持 Internet Explorer 11，那么另外七个功能不再需要前缀。 这将 2021 年需要前缀的功能数量减少到 28 个，与 2013 年相比减少了 46% 。
2021 年的前缀
让我们看一下需要前缀的属性。 它是一个杂乱无章的集合！
| # | 名称 | 属性/值 | 描述 | 需要前缀 | 无前缀支持 | 带前缀支持 | 使用前缀的改进 |
|---|---|---|---|---|---|---|---|
| 1 | appearance |
appearance |
定义元素（特别是表单控件）的默认外观。 将值设置为 none 会导致使用其他 CSS 属性完全重新定义元素的默认外观。 |
|
69.80% | 97.03% | 27.23% |
| 2 | background-clip-text |
background-clip: text |
一种非标准方法，用于将背景图像剪裁到前景文本。 |
|
3.89% | 96.65% | 92.76% |
| 3 | backdrop-filter |
backdrop-filter |
一种方法，用于将滤镜效果（如 blur、grayscale 或 hue）应用于目标元素下方的内容或元素。 |
|
70.20% | 88.20% | 18.00% |
| 4 | background-image: crossfade() |
background-image: crossfade() |
用于创建图像之间“交叉淡入淡出”效果的图像函数。 这使得可以根据百分比值让一个图像过渡（淡入淡出）到另一个图像。 |
|
17.77% | 92.62% | 74.85% |
| 5 | background-image: image-set() |
background-image: image-set() |
一种方法，使浏览器可以从给定集中选择最合适的 CSS 背景图像，主要针对高 PPI 屏幕。 |
|
17.77% | 92.48% | 74.71% |
| 6 | box-decoration-break |
box-decoration-break |
控制盒子在断开时（如页面、列、区域或行）盒子的边距、边框、填充和其他装饰是否包裹盒子的断裂边缘。 |
|
6.39% | 97.17% | 90.78% |
| 7 | clip-path |
clip-path |
一种方法，使用 SVG 或形状定义来定义 HTML 元素的可见区域。 |
|
72.00% | 96.33% | 24.33% |
| 8 | color-adjust |
color-adjust |
一种非标准 CSS 扩展，可用于强制打印背景颜色和图像。 |
|
3.69% | 39.77% | 36.08% |
| 9 | element() |
background: element() |
此函数呈现从任意 HTML 元素生成的实时图像 |
|
0.00% | 4.04% | 4.04% |
| 10 | font-kerning |
font-kerning |
控制存储在字体中的字母间距的使用。 请注意，这只会影响具有字距信息 的 OpenType 字体，对其他字体没有影响。 |
|
81.73% | 96.03% | 14.30% |
| 11 | font-smooth |
font-smooth |
控制在渲染字体时如何应用抗锯齿。 尽管在 2002 年初的 CSS3 字体规范草案中存在，但此属性已被删除，目前不在标准轨道上。 |
|
0.00% | 39.64% | 39.64% |
| 12 | hyphens |
hyphens |
一种方法，用于控制行尾单词何时应使用连字符。 |
|
76.49% | 96.51% | 20.02% |
| 13 | initial-letter |
initial-letter |
一种方法，可以以健壮的方式创建放大的大写字母，包括下降或升高的大写字母。 |
|
0.00% | 18.00% | 18.00% |
| 14 | line-clamp |
line-clamp |
将文本限制在给定数量的行中，当与 display: -webkit-box 结合使用时。 任何超出空间的文本都会在包含 text-overflow: ellipsis 时产生省略号。 |
|
0.19% | 96.28% | 96.09% |
| 15 | position: sticky |
position: sticky |
根据元素在视窗中的显示方式，保持元素的位置为“固定”或“相对”。 因此，元素在滚动时会“固定”在适当的位置。 |
|
93.50% | 95.36% | 1.86% |
| 16 | tab-size |
tab-size |
自定义 Tab 字符宽度的方法。 仅在与 white-space: pre 或 white-space: pre-wrap 结合使用时有效。 |
|
92.33% | 97.38% | 5.05% |
| 17 | text-decoration 样式 |
text-decorationtext-decoration-* 属性。 |
定义 text-decoration 属性中线条类型、样式和颜色的方法。 这些可以作为简写形式定义（例如 text-decoration: line-through dashed blue）或作为单个属性定义（例如 text-decoration-color: blue）。 |
|
80.25% | 94.86% | 14.61% |
| 18 | text-emphasis 样式 |
text-emphasistext-emphasis-* 属性 |
在每个字形旁边使用小符号来强调一段文本的方法，通常用于东亚语言。 text-emphasis 简写属性及其 text-emphasis-style 和 text-emphasis-color 组成属性可用于对文本应用标记。 text-emphasis-position 属性单独继承，允许设置强调标记相对于文本的位置。 |
|
21.96% | 95.99% | 74.03% |
| 19 | text-orientation |
text-orientation |
指定一行中文本的方向。 当前值仅在垂直排版模式（由 writing-mode 属性定义）中有效。 |
Safari ( -webkit) |
90.88% | 94.84% | 3.96% |
| 20 | text-size-adjust |
text-size-adjust |
控制是否以及如何将文本膨胀算法应用于其应用于的元素的文本内容。 |
|
72.75% | 87.48% | 14.73% |
| 21 | user-select: none |
user-select |
防止文本或元素选择的方法。 |
|
74.81% | 96.49% | 21.68% |
| 22 | CSS Canvas 绘图 | background: -webkit-canvas(mycanvas) |
使用 HTML5 Canvas 作为背景图像的方法。 目前不属于任何规范的一部分。 |
|
0.00% | 19.40% | 19.40% |
| 23 | CSS 蒙版 | mask mask-* 属性 |
使用选定的图像作为蒙版来显示元素的一部分的方法。 |
WebKit/Blink 浏览器中的部分支持指的是支持 |
4.18% | 96.93% | 92.75% |
| 24 | CSS 反射 | -webkit-box-reflect |
显示元素反射的方法。 |
|
0.00% | 91.20% | 91.20% |
| 25 | CSS 滚动条样式 | scrollbar-colorscollbar-width |
设置滚动条颜色和宽度的两种方法。 |
|
4.28% | 96.87% | 92.59% |
| 26 | CSS 文本填充和描边 | text-stroketext-stroke-* 属性 |
声明文本轮廓（描边）宽度和颜色的方法。 |
|
0.00% | 96.65% | 96.65% |
| 27 | 内在尺寸和外在尺寸 | max-contentmin-contentfit-contentstretch（以前称为 fill）。 |
允许元素的高度和宽度以内在值而不是固定数值指定。 |
|
91.99% | 96.36% | 4.37% |
| 28 | 媒体查询：分辨率功能 | @media (min-resolution: 300dpi) { … }, @media (max-resolution: 300dpi) { … } |
允许根据每个 CSS 单位使用的设备像素设置媒体查询。 虽然标准使用 min-resolution 和 max-resolution，但一些浏览器支持旧的非标准 device-pixel-ratio 媒体查询。 |
支持 |
80.40% | 99.16% | 18.76% |
在整理完这份清单后，我的最初印象是这些并不是我经常遇到的东西。 一些属性还没有（也可能永远不会）完全实现。 我认为 element() 函数和 CSS Canvas 绘图就属于这种情况。 Safari 最近取消了 position: sticky 的前缀，所以它很快就会从清单中消失。
如果你想缩减清单并避开某些情况，你可以这样做。 你可以忽略它并说它不重要，为什么要费心呢？ 现实情况是，清单仍然很长，以至于你不想在代码中手动管理前缀。 需要回答的一个相关问题是：你想将跨浏览器支持提高到很高水平吗？ 如果答案是肯定的，那么你应该将其视为开发工作的一部分。
还必须记住，这不仅仅是关于这些属性和当前浏览器。 仍然有人在使用旧设备和旧浏览器，这些浏览器不支持一些功能的无前缀版本。 例如，以 animation 属性为例。 Chrome 是最后一个在 2015 年取消该属性前缀的浏览器。 然而，今天，全球 1.3% 的用户仍然使用不支持无前缀版本的浏览器。
我最近遇到了一些需要使用前缀属性的情况。 例如，我正在为博客制作 阅读进度条，需要使用 -webkit-appearance: none; 和 -moz-appearance: none; 来重置 progress 元素的默认样式。 它还需要粘性定位，所以我不得不为 Safari 添加 position: sticky 的前缀来支持粘性定位。
另一个例子？ 我想使用 PNG 图像作为圣诞主题设计的蒙版图像，发现 -webkit-mask-image 是唯一正常工作的属性。 蒙版通常有点不稳定，因为大多数浏览器只部分支持规范。
再举一个例子：Flavio Copes 在 “如何在 CSS 中对多行应用填充” 中写道，他希望在多行标题的每一行都具有相同的填充。 解决方法是使用 box-decoration-break: clone。 大多数浏览器需要此属性的 -webkit 前缀版本，因此你需要使用它。
工具
一些为解决前缀和浏览器支持问题而创建的 工具 已经过时。 我建议在使用之前先检查工具是否已更新。
当然，Autoprefixer（一个 PostCSS 插件）得到维护，它使用来自 caniuse 的直接数据来保持最新。
Emmet 还具有出色的前缀功能。 特别是，它有一个 css.autoInsertVendorPrefixes 选项，可以自动为你插入前缀。 我没有验证它是否是最新的，但它值得作为开发环境的一部分进行考虑。
由于大多数代码编辑器都支持 Emmet，因此编辑前缀属性变得容易得多。 Emmet 有一个 CSS 反射值 命令，可以更新规则中同一属性的所有前缀版本的 value。 你可以阅读 Emmet 文档 以获取有关前缀功能的更多信息。
结论
不幸的是，供应商前缀并没有消失。 我们仍然在承受着这种遗留问题的影响。 同时，我们也应该感谢前缀功能在不断减少。 浏览器供应商在实现无前缀功能以代替前缀功能方面做了一些很好的工作。 这减轻了开发人员的很大一部分负担。
然而，你可能偶尔会遇到仍然需要前缀的情况。 如果你想支持尽可能多的浏览器，你应该继续使用自动前缀策略。
我们本来就不应该使用供应商前缀来处理 W3 规范，而应该使用类似
-d1-*的东西，其中 d1 代表草案 1，浏览器已满足草案 1 规范。 只有当浏览器出现偏差时，供应商前缀才有意义。text-orientation和font-kerning不再需要前缀– https://github.com/Fyrd/caniuse/pull/5887
– https://github.com/Fyrd/caniuse/pull/5888
:)
不错！ 很高兴看到 Safari 正在处理这件事
https://preset-env.cssdb.org/ 是一个用于处理仍然需要的少数供应商前缀的优秀工具。
它还可以填充尚未完全支持的超级新的现代 CSS。
感谢分享 Sean。 它看起来是一个方便的一体化解决方案。 我不知道它也涵盖前缀。 它看起来在内部使用了 Autoprefixer。 我会在未来的项目中尝试一下。