Sublime Text 需同时安装 Autoprefixer 和 CSS3 语法包才能实现 CSS3 高亮与自动加前缀；Autoprefixer 失效多因 Node.js 环境缺失、文件类型未识别为 CSS、嵌入式 CSS 不支持、未重启编辑器或 browserslist 配置错误；CSS3 高亮需手动切换语言模式为 CSS3，且配置必须准确匹配浏览器兼容性要求。
Sublime Text 本身不带 CSS3 语法高亮增强和自动加前缀能力，必须靠插件组合实现——Autoprefixer 负责加前缀，Color Highlighter 或 CSS3 类语法包负责高亮，两者缺一不可。只装一个，写 transform 或 gap 时根本看不出是否被识别、是否该加前缀。
Autoprefixer 插件安装失败或不生效的常见原因
几乎所有“点了快捷键没反应”的问题，根源都在 Node.js 环境或文件类型识别上：
-
Node.js未安装，或未加入系统PATH（Windows 下检查命令行能否直接运行node -v） - 当前文件未被 Sublime 识别为
.css或.scss—— 右下角状态栏看语言名，如果不是CSS，点它手动选成CSS - 在
.html文件内写的<style>块里调用autoprefixer，插件默认不处理这种嵌入式 CSS（官方明确说明） - 插件安装后没重启 Sublime，或 Package Control 安装中途失败（可查
Ctrl+Shift+P输入Package Control: List Packages看Autoprefixer是否在列表里）
浏览器兼容配置写法直接影响前缀生成结果
Autoprefixer 不是“所有属性都加所有前缀”，它严格按 browserslist 规则判断——比如你写 display: flex，但配置里没包含 IE10/11，就不会生成 -ms- 前缀；写 gap 却配了 "last 2 versions"，那 Chrome/Firefox 新版本根本不会加任何前缀（因为已原生支持）。
推荐在 Preferences > Package Settings > Autoprefixer > Settings – User 中填入：
立即学习“前端免费学习笔记（深入）”；
{
"browsers": ["last 2 versions", "> 0.5%", "Firefox ESR", "IE 11"],
"cascade": true,
"remove": true
}
关键点：
-
"last 2 versions"指 Chrome/Firefox/Safari 最新两个稳定版，不含旧版 Edge -
"IE 11"显式声明才生成-ms-前缀；只写"ie 11"（小写）会失效 -
"remove": true会删掉已过时的旧前缀（如-webkit-box），避免冗余 - 别用
"Firefox < 20"这种写法——新版插件已弃用该语法，应改用"Firefox ESR"或具体版本号
CSS3 语法高亮依赖正确的语法定义包
默认的 Sublime CSS 语法对 will-change、aspect-ratio、container 等新属性不着色，容易误判是否写错。需换用社区维护的语法包：
- 通过 Package Control 安装
CSS3（作者：aokolich）——它扩展了标准 CSS 语法，支持绝大多数 CSS3+ 属性高亮，且与Autoprefixer兼容性好 - 避免安装已停更的
Prefixr，它规则陈旧、不支持现代浏览器数据源 - 装完后，打开任意
.css文件，右下角语言名点开 → 选CSS3（不是CSS），否则高亮不生效 - 若发现
@supports或@keyframes块内颜色异常，大概率是语法包未正确加载，可尝试Ctrl+Shift+P→Reload Syntax
真正麻烦的不是装插件，而是配置项之间的隐性耦合：Node 版本太低会导致 Autoprefixer 启动失败但无报错；browserslist 写错格式会让插件静默退化为“只加 -webkit-”；语法包选错则新属性永远灰扑扑——这些细节不验证，写出来的 CSS 看似正常，上线后在旧设备上就直接崩。
