现代CSS加-webkit-和-moz-前缀并非因标准强制要求，而是因部分属性在某些浏览器中尚未进入正式标准或未被完全实现，前缀作为厂商实验性功能的隔离标识；一旦W3C正式采纳且各浏览器稳定支持，前缀应移除，但历史兼容包袱常导致冗余保留。
为什么现代CSS仍要加-webkit-和-moz-前缀
不是“需要”，而是部分属性在某些浏览器中**尚未进入正式标准或未被完全实现**，前缀是厂商为实验性功能预留的隔离标识。一旦该属性被W3C正式采纳且各浏览器稳定支持，前缀就该移除——但现实是，很多项目仍保留它们，只因历史兼容包袱没清理干净。
transition、transform等属性为何长期带前缀
这些属性在2010年代初由WebKit（Safari/Chrome早期）率先实现，Mozilla随后跟进但实现细节有差异。比如：transform: rotateZ(45deg)在旧版Firefox中必须写成-moz-transform: rotateZ(45deg)，否则不生效。
-
-webkit-主要覆盖 Safari 3.1+、Chrome ≤ 25、iOS Safari ≤ 6.1 -
-moz-主要覆盖 Firefox ≤ 15（之后已移除大部分前缀） -
-ms-曾用于 IE10 的flex和grid，但 IE 已淘汰 -
-o-仅限 Opera 12.1 及更早版本，基本可忽略
现在写 transform 时还加 -webkit-transform，大多是因为构建工具（如 Autoprefixer）按目标浏览器范围自动注入，而非手动维护。
哪些属性现在还必须手动加前缀
极少数新特性仍在过渡期，例如：
立即学习“前端免费学习笔记（深入）”；
- CSS
@property：Chrome 支持无前缀，Firefox 仍需-moz-property（截至2026年7月） -
aspect-ratio：所有主流浏览器已无前缀，但旧版 Android WebView（≤4.4）仍需-webkit-aspect-ratio -
scroll-snap-type：Firefox 68+ 无需前缀，但 iOS Safari ≤ 13.3 需-webkit-scroll-snap-type
判断依据不是“有没有前缀”，而是查 caniuse.com 对应属性的“Known issues”栏——那里会明确标注是否需前缀及适用版本。
用 Autoprefixer 代替手写前缀的坑
Autoprefixer 默认按 last 2 versions, not dead 规则补全，但容易踩两个坑：
- 它不会为已废弃的旧浏览器（如 IE11）补
-ms-，除非你显式配置browserslist包含ie >= 11 - 它对 CSS Custom Properties（
--my-var）不加前缀，但旧版 Safari（≤9.1）根本不支持变量，此时加前缀也没用，只能降级为静态值 - 如果项目用了 PostCSS 插件链，确保 Autoprefixer 在
cssnano压缩之前运行，否则压缩可能删掉带前缀的重复声明
真正麻烦的从来不是加不加前缀，而是你写的那行 display: grid 在某个安卓 WebView 里根本没解析——这时候前缀救不了你，得靠特性检测或降级方案。
