image-set() 在 Firefox 和旧版 Safari 中无反应，因 Firefox v128 及之前完全不识别该函数，解析时直接丢弃整条声明；旧版 Safari（如 9–16.3）若缺 1x 描述符或语法有误，也会整条忽略。
为什么 image-set() 在 Firefox 和旧版 Safari 里根本没反应
Firefox（v128 及之前）解析到 image-set() 时直接跳过整条 background-image 声明，不是降级，是丢弃；旧版 Safari（-webkit-image-set()。Chrome ≥121 和 Safari ≥16.4 才原生支持标准语法，而安卓微信 X5、鸿蒙 WebView 等大量移动端环境只认 -webkit-image-set()，且强制要求单位用 dppx、路径为绝对或带引号的相对路径。
-webkit-image-set() 必须写在标准 image-set() 前面
浏览器按 CSS 声明顺序从上到下解析，遇到不认识的声明就跳过。如果把标准版写在前面，Safari 16.4+ 可能因兼容策略忽略后续的 -webkit- 版本；而把 -webkit- 版本前置，既能保旧版 Safari，又不影响新版解析。正确顺序只能是：
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
关键点：
-
1x描述符不能省略——旧版 Safari 会整条丢弃声明 - 两个声明中路径、引号类型（全用双引号或全用单引号）、空格、单位（
1x或1dppx）必须完全一致 - Autoprefixer 默认不处理
image-set，需手动开启envs或features实验性支持
fallback 不是逗号分隔，而是独立声明叠加
错误写法：background-image: url("logo@1x.png"), image-set(...); ——CSS 不支持 background-image 多值逗号语法（那是 background 简写的特性）。正确 fallback 是靠声明覆盖：
立即学习“前端免费学习笔记（深入）”；
background-image: url("logo@1x.png");
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
这样 Firefox 用第一行，旧版 Safari 用第二行，新版 Chrome/Safari 用第三行。注意：所有 url() 路径必须真实存在，且构建工具（如 Vite/Webpack）不会解析 image-set 内部的路径别名（如 @/assets），得写成 /img/logo@2x.png 这类运行时可访问路径。
DevTools 里怎么确认 image-set() 生效了
打开 DevTools → Elements → Styles 面板，找到对应元素的 background-image 行：
- 如果被划掉（strikethrough），说明该浏览器不识别这条声明
- 切到 Console，搜
parse或image-set，出现Failed to parse基本就是引号缺失、单位错写（比如用了device-pixel-ratio）、路径含空格未加引号 - 在 Network 面板里看不到高清图加载，可能是 DPR 不匹配（例如普通 Windows 笔记本始终走
1x，不会触发2x）
真正容易被忽略的是：你写的 image-set() 在 Safari 16.4+ 里可能生效，但在同个设备的微信内置浏览器里却失效——因为 X5 内核只吃 -webkit- 版本，且只接受 dppx 单位、绝对路径、无空格文件名。
