用于脚本支持的 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 平台的一个很好的补充。