browserslist 配置优先级高于 autoprefixer.yml，因 autoprefixer 严格按顺序读取：先传入的 browsers 参数，再 package.json 的 browserslist 字段，最后 .browserslistrc 或 browserslist 文件；而 autoprefixer.yml 中的 browsers 仅在显式调用 processor 时生效，rails 环境中默认不启用。
Autoprefixer 能解决大部分 CSS 兼容性问题，但前提是 Browserslist 配置必须准确 —— 配错一条规则，就可能漏加前缀或误加过时前缀。
为什么 browserslist 配置优先级比 autoprefixer.yml 高
Autoprefixer 读取目标浏览器范围时，严格按顺序查找配置源：先看传入的 browsers 参数，再查 package.json 中的 browserslist 字段，最后 fallback 到 .browserslistrc 或 browserslist 文件。而 config/autoprefixer.yml 里的 browsers 项在 Rails 环境中默认不生效 —— 它只在显式调用 Autoprefixer::Rails::Processor.new(browsers: [...]) 时才被识别。
常见错误是把规则全塞进 autoprefixer.yml，结果构建时完全没用上。真实项目里，package.json 是最稳定、最通用的位置，尤其当你同时用 PostCSS、ESBuild 或 Webpack 时，所有工具都认这个字段。
- 如果用的是 Rails +
autoprefixer-rails，优先写.browserslistrc（它会被lib/autoprefixer-rails/processor.rb自动加载） - 如果项目有
package.json，且用了 PostCSS，就别碰autoprefixer.yml—— 它容易被忽略 - 环境变量
BROWSERSLIST可临时覆盖，比如 CI 构建时跑兼容性测试：BROWSERSLIST="ie 11" npm run build
not dead 和 last 2 versions 组合的实际效果
这两个规则看似简单，但组合后行为很关键：last 2 versions 指每个浏览器最新两个正式版（不含 beta），而 not dead 排除掉那些已停止维护、且全球使用率 not dead 不等于 not ie —— 如果某版本仍在维护（如 Firefox ESR），即使老旧也会被保留。
典型陷阱是误以为 not dead 能自动过滤 IE 11。实际上，IE 11 已被标记为 dead，所以 not dead 确实会排除它；但如果你写成 not ie ，反而更明确、更安全，尤其当团队对 <code>dead 定义不熟悉时。
-
> 1%是按全球统计，> 1% in CN才是中国区 —— 出海项目别漏掉地域限定 -
last 3 Chrome versions和chrome >= 90效果不同：前者取最近三个发布版（可能是 124、123、122），后者锁定最低版本（122 也符合） - 加
ignoreUnknownVersions: true可防止因拼写错误（如edge 12实际应为edge 12.1）导致整个配置失败
如何验证当前配置实际生效了哪些浏览器
光写规则没用，得确认 Autoprefixer 真正读到了什么。运行 npx browserslist（需已安装 browserslist 包）能直接输出匹配的浏览器列表，例如：
npx browserslist and_chr 124 and_ff 123 chrome 124 chrome 123 edge 124 firefox 123 firefox 122 ios_saf 17.4 ios_saf 16.5 safari 17.4
这个输出就是 Autoprefixer 实际用来查 caniuse-lite 数据库的依据。如果看到 ie 11 还在列表里，说明 not ie 没生效，大概率是写在了错误位置（比如放进了 <code>autoprefixer.yml 却没被加载）。
- 在 Rails 项目中，可加一行调试代码到
config/environments/production.rb：Rails.logger.info "Browserslist: #{Bundler.with_clean_env { `npx browserslist` }}" - PostCSS 用户可在
postcss.config.js中打印：console.log(require('browserslist')()) - 注意：CI 环境可能没装
npx，改用node_modules/.bin/browserslist更可靠
哪些 CSS 特性容易被 Browserslist 规则“漏掉”
不是所有属性都靠浏览器版本决定是否加前缀。像 user-select、backdrop-filter、filter 这类特性，Autoprefixer 依赖 caniuse-lite 的具体支持数据 —— 而这些数据有时滞后或颗粒度太粗。例如 backdrop-filter 在 Safari 9+ 支持，但 last 2 versions 可能只返回 Safari 17/18，导致老 Safari 被忽略。
这时不能只改 Browserslist，得配合 Autoprefixer 的 hack 机制。比如强制启用 backdrop-filter 支持：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['safari >= 9', 'chrome >= 76']
})
]
}
但要注意：overrideBrowserslist 会完全覆盖原有配置，慎用。更稳妥的方式是微调 Browserslist，比如把 safari >= 12 改成 safari >= 9，并确保 caniuse-lite 是最新版（npx update-browserslist-db）。
-
filter: blur()在 iOS Safari 9.3+ 才支持带-webkit-前缀的写法，仅写last 2 versions可能漏掉 -
gap属性在 Firefox 63+ 才无需前缀，但last 2 versions若匹配到 FF 122/123，就会跳过补前缀逻辑 - 自定义属性（CSS Custom Properties）默认不加前缀，哪怕你写了
chrome 49—— 因为 Autoprefixer 认为它“不可 polyfill”，需自行处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
