如何规范实现source元素media属性的三种匹配状态（含从不匹配）

针对你需要切换<source>元素media属性的三种状态，这里有符合W3C规范的实现方式，无需使用自定义非规范值或删除元素：

• 仅系统深色模式匹配：直接使用标准的深色模式媒体查询，和你原来的写法一致：

  sourceElement.media = "(prefers-color-scheme: dark)";
  

  这是CSS媒体查询的标准语法，会精准匹配系统开启深色模式的场景。

• 始终匹配：推荐使用"all"作为媒体值，这是媒体查询的默认类型，明确表示匹配所有设备和场景，比空字符串""更具可读性和规范性：

  sourceElement.media = "all";
  

  当然空字符串也能生效，但"all"是文档明确规定的合法值，语义更清晰。

• 从不匹配：使用"not all"这个标准的否定式媒体查询，它会匹配所有情况的反面，也就是永远不满足条件：

  sourceElement.media = "not all";
  

  这是完全符合规范的写法，替代你自定义的"match_nothing"，浏览器能正确解析并忽略这个<source>的匹配逻辑。

补充：也可以用其他永远为假的媒体查询条件，比如"(min-width: 0px) and (max-width: -1px)"，但"not all"是最简洁且语义明确的规范方案。

内容的提问来源于stack exchange，提问作者Andrew Parks