Edge浏览器中CSS image-set属性AVIF格式fallback失效问题求助

问题出在Edge对image-set的实现逻辑：它能识别image-set语法，但遇到不支持的图片格式时，不会自动跳过并加载列表中的下一个资源，而是直接尝试加载第一个资源，导致fallback失效。

要保留AVIF选项同时让fallback正常工作，可以通过**CSS特性检测（@supports）**分情况处理：

1. 保留最基础的PNG作为全局fallback，确保所有浏览器都能加载。
2. 针对支持image-set的浏览器，先提供不含AVIF的格式列表（WebP + PNG），覆盖基础fallback。
3. 再针对支持AVIF格式的浏览器，提供包含AVIF的完整image-set列表，覆盖之前的规则。

最终代码如下：

.speaker__imagen {
    /* 全局基础fallback，所有浏览器都能识别 */
    background-image: url(../img/bg_1.png);
}

/* 针对支持image-set的浏览器 */
@supports (background-image: image-set(url("") 1x)) {
    .speaker__imagen {
        /* Edge这类支持image-set但不支持AVIF的浏览器，会应用这个规则 */
        background-image: image-set(
            url(../img/bg_1.webp) 1x,
            url(../img/bg_1.png) 1x
        );
    }

    /* 针对支持AVIF格式的浏览器（自动覆盖上面的规则） */
    @supports (background-image: image-set(url("test.avif") 1x)) {
        .speaker__imagen {
            background-image: image-set(
                url(../img/bg_1.avif) 1x,
                url(../img/bg_1.webp) 1x,
                url(../img/bg_1.png) 1x
            );
        }
    }
}

原理说明 #

• @supports (background-image: image-set(url("") 1x))：检测浏览器是否支持image-set语法，筛选出Edge、Chrome、Firefox等支持该属性的浏览器。
• @supports (background-image: image-set(url("test.avif") 1x))：进一步检测浏览器是否支持AVIF格式的image-set，只有真正支持AVIF的浏览器才会应用包含AVIF的规则。
• 规则的优先级：后声明的@supports规则会覆盖前面的，所以支持AVIF的浏览器会优先加载AVIF，Edge等不支持AVIF的浏览器则加载WebP或PNG。

内容的提问来源于stack exchange，提问作者Nicolas Tabia