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

#前端#
全部评论

相关推荐

07-07 11:33
江南大学 Java
已经在暑假实习了&nbsp;,没有明确说有hc,纠结实习到八月份会不会有点影响秋招毕竟感觉今年好多提前批
程序员小白条:92的话准备提前批,其他没必要,没面试机会的,而且你要准备充分,尤其八股和算法题
点赞 评论 收藏
分享
06-20 21:22
已编辑
门头沟学院 Java
纯真的河老师在喝茶:答应了就跑啊,实习随便跑啊,别被pua了,md就是找个廉价劳动力,还平稳过度正式工,到时候跟你说没转正
点赞 评论 收藏
分享
小浪_Coding:找硬件测试,也可兼顾软测欧, 简历还可以的 ,注意排版,项目写的有条理一点, 然后个人技能多加点, 润色好简历之后就开始沟通海投了,深圳,东莞这边做硬件相关的公司还不少, 医疗类,仪器类的都可以尝试
点赞 评论 收藏
分享
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务