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”，需自行处理
