先修：

• HTML
• CSS
• JS*

---

读者可能会在一些 CSS 属性上见到 -webkit- 这类前缀，这类前缀都是用来解决兼容性问题的，这里解释一下为什么。

因为 CSS 3 本身是由标准组织提出的，CSS 3 标准提出后，各大浏览器厂商去自行实现，这里就牵扯到一个问题，各个浏览器厂商实现的时间可能不太一样，比如一个属性 google 早就实现了，但是 firefox 却很久都没有去实现，这是很常见的问题，甚至现在很多 CSS 属性也不是所有浏览器都实现了，例如 timeline-scope 这类实验性属性目前 (2024 年 1 月 17 日)就没有被 firefox 实现。

有一些属性，它提出之后，只被少数浏览器实现了，例如某个属性只被 chrome 一个浏览器实现了，在其他浏览器还没有实现之前，这个属性几乎可以看做是 chrome 的私有属性，只有 chrome 才能用，其他用不了，所以浏览器厂商就搞了个前缀，像 chrome 就搞了个 -webkit- 前缀，表示这是我 chrome 实现的一个属性，你要在 chrome 上用这个属性就必须带上前缀，其他浏览器也识别不了这个带前缀属性。随着实现这个属性的浏览器越来越多，这个 -webkit- 前缀也就失去了其存在的意义，此时在浏览器的某一次更新中，就会支持去掉这个前缀的写法，更新之后哪怕是不带前缀的属性也可以正常识别了。

综上，所以一个在一个浏览器里，一个新属性本身会经历三个阶段不支持 -> 加前缀支持 -> 完全支持。

此时就会引出一个兼容性问题，比如一个属性，chrome 已经更新了，支持去掉前缀的写法，但是 firefox 还没有更新这种写法，还是只支持带前缀的写法，这个时候为了兼容 firefox，就必须写上 firefox 的私有前缀，这也就是为什么说前缀是一种兼容性写法。

关于 CSS 的更多兼容性问题，可以在 Can I use... Support tables for HTML5, CSS3, etc 查阅