CSS 媒体查询支持 Scripting

Chrome 浏览器 120 已于上周发布，在这个版本中，我们获得了用于脚本支持的 CSS 媒体查询（media query）。简单地说，这个媒体查询允许你测试脚本语言是否可用，并根据支持情况调整页面内容和样式。

媒体查询语法

媒体查询有三种值可选：none, initial-only, 和 enabled.。

none 的意思是用户代理不会在当前文档中运行脚本，因为它不支持脚本或脚本的支持尚未激活。

initial-only 表示在初始页面加载时可以使用脚本，但在页面加载后则不行。

enabled值表示当前文档和文档的 “生命周期 “内都支持并启用脚本。

代码示例

CSS 媒体查询意味着你可以根据类名改变页面的样式和内容。您可以在 HTML 中创建三组不同的内容，根据脚本的状态，您可以显示其中一组内容，同时隐藏另外两组内容。

<div class="no-scripting">
No scripting so here's a specific set of content and styles 
</div>

@media (scripting: none) {
    .no-scripting {
        display: flex;
        color: green;
    }

    .initial-scripting {
        display: none;
    }

    .full-scripting {
        display: none:
    }
}

浏览器支持

截至 2023 年 11 月 29 日，Chrome 浏览器已支持用于脚本的 CSS 媒体查询，Firefox 和 Safari 也已支持该功能（两款浏览器分别于今年 5 月和 9 月发布）。Microsoft Edge 和 Opera 也将支持该功能，目前还处于预览阶段。三星 Internet 没有发出明显的信号，完全不支持该功能。

结束语

即使是最基本的渐进增强功能，这似乎也是一个相当不错的功能。您可以轻松确保禁用 JavaScript 支持的用户获得良好的体验。在几乎所有主流浏览器都支持的情况下，这对网络平台来说是一个很好的补充。

编码愉快！

发布后编辑：确实有一个 <noscript> 标记，但使用该媒体查询的目的 “并不是要取代 noscript“。它只是让你可以根据脚本状态对元素进行样式调整”。– 源链接