CSS前缀在缓慢消亡

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保持同步。`