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
“。它只是让你可以根据脚本状态对元素进行样式调整”。– 源链接
阅读余下内容