CSS 媒体查询支持 Scripting

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

媒体查询语法

媒体查询有三种值可选:noneinitial-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“。它只是让你可以根据脚本状态对元素进行样式调整”。– 源链接

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号