CSS前缀是过去时代的遗物。
开发者曾手动输入像这样的代码：
.round {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
这种繁琐的体验被流行的构建工具Autoprefixer自动化解决了。
作为标准化过程的一部分，浏览器需要测试不稳定的新功能并收集开发者反馈。如今，开发者可以通过在其网络浏览器设置中启用实验性功能标志，或者使用Chrome Canary、Firefox Nightly或Safari Technology Preview等浏览器来尝试尚未完全标准化的功能。在产线上没有人使用这些功能，因为它们对你的用户没有作用。在早期阶段，供应商前缀被用作浏览器尝试实验性功能的一种方式。开发者开始在面向用户的生产网站上使用这些前缀，浏览器团队后来意识到它们是个坏主意。
大约在2016年，浏览器停止使用供应商前缀来支持新的CSS属性，并开始消除许多旧的CSS属性之前需要的前缀。这是一个渐进而缓慢的过程，浏览器逐个取消前缀的CSS属性。
在2013年，Autoprefixer发布时，有53个CSS功能需要前缀。现在情况如何？
哪些CSS属性仍然需要前缀?
仍然需要前缀的CSS属性有：
- backdrop-filter
- user-select
- initial-letter
- text-decoration（有时）
- text-stroke
- text-fill-color
- line-clamp
- background-clip: text（临时）
- mask（临时）
在Safari中，backdrop-filter、user-select和initial-letter仍然需要在前面加上-webkit-前缀。
Safari支持text-decoration-color、text-decoration-line和text-decoration-style，而不需要前缀。text-decoration属性旨在作为这三个属性的简写。但是在Safari中，text-decoration只能设置text-decoration-line。text-decoration: underline;有效，但text-decoration: underline orange wavy;则无效。当设置所有三个属性时，-webkit-text-decoration可以正确工作。
text-stroke和text-fill-color从未标准化，但-webkit-text-stroke和-webkit-text-fill-color在所有浏览器中都有效。
同样，line-clamp仍然没有被标准化。目前在任何浏览器中都没有实现line-clamp属性，只有-webkit-line-clamp，它只能与另外两个有前缀的非标准属性一起使用：
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
box-orient或display: box永远不会有非前缀的标准化版本。Chrome似乎正在实现一个改进的非前缀line-clamp，它不依赖于设置任何其他陈旧的奇特属性。
background-clip: text和mask在Samsung Internet中仍然需要前缀，但该浏览器将在即将推出的版本中与Chromium保持同步。`
网友评论