css前缀补全需精准加、少加，重点支持旧版safari/firefox/ie10–11的transform/transition/animation、flexbox等属性；推荐autoprefixer按目标浏览器自动注入，静态页可用prefixfree.min.js运行时补全，并配合doctype、box-sizing和normalize.css保障基础兼容。
处理CSS前缀补全，核心是让现代CSS3特性在旧版浏览器中也能正常渲染。关键不在于“加所有前缀”，而在于“加对、加准、加得少”。
CSS厂商前缀要加哪些
不是所有属性都需要前缀，也不是所有浏览器都要照顾。当前（2026年）仍需关注的主要是：
- transform / transition / animation：Safari 15.6 及更早、Firefox 68 之前版本仍依赖前缀
-
flexbox 属性：IE10–11 需
-ms-前缀（如-ms-flex-direction），且语法略有差异 -
border-radius / box-shadow / background-clip：基本已无需手动加前缀，但若项目需支持 Safari 5.1 或 Chrome 25 以下，仍需保留
-webkit- -
@keyframes：旧版 Safari 和 Android Browser 必须写
@-webkit-keyframes并在animation中对应调用
优先用 Autoprefixer 自动处理
手动加前缀易漏、难维护，推荐用 Autoprefixer（基于 PostCSS）按需注入。它只加真正需要的前缀，不输出已淘汰的（比如 IE8/9 的 -ms-）。
- 配置目标浏览器范围，例如：
['>1%', 'last 2 versions', 'iOS >= 12', 'Android >= 6'] - 确保标准属性写在带前缀属性之后（Autoprefixer 会自动排序）
- 配合 webpack、Vite 或 CLI 工具，在构建阶段处理 CSS，开发时写纯标准语法即可
静态页面没构建流程？用轻量兼容层
如果只是纯 HTML + CSS 的静态页（比如邮件模板、落地页、CMS 内嵌页），可引入两个小文件：
- normalize.css：统一默认样式，解决 margin/padding/字体/表单等基础差异
-
prefixfree.min.js：运行时自动补前缀，放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
