用于脚本支持的 CSS 媒体查询
公众号：程序员白特，*********
Chrome 120 于近日发布，在这个版本中，我们获得了用于脚本支持的 CSS 媒体查询。简单地说，此媒体查询允许我们测试脚本语言是否可用，并根据支持定制页面内容和样式。我是白特，让我们一起来学习下吧。
媒体查询语法
媒体查询有三个值可供选择：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将提供支持，该功能目前处于预览状态。三星互联网没有明显的信号，完全不支持该功能。
关闭
即使在最基本的级别上，对于渐进式增强来说，这似乎也是一个非常好的功能。您可以确保禁用了 JavaScript 支持的用户很容易获得良好的体验。凭借几乎完整的主要浏览器支持，这是对 Web 平台的一个很好的补充。
#前端#
