企业内部网站如何建设软件下载网站如何履行安全管理义务确保提供的软件不含恶意程序

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 平台的一个很好的补充。

公众号：程序员白特