安全网站建设与服务的关系,定西网页设计,wordpress 表分析,制作网站开发Chrome 120 于近日发布#xff0c;在这个版本中#xff0c;我们获得了用于脚本支持的 CSS 媒体查询。简单地说#xff0c;此媒体查询允许我们测试脚本语言是否可用#xff0c;并根据支持定制页面内容和样式。我是白特#xff0c;让我们一起来学习下吧。
媒体查询语法
媒…Chrome 120 于近日发布在这个版本中我们获得了用于脚本支持的 CSS 媒体查询。简单地说此媒体查询允许我们测试脚本语言是否可用并根据支持定制页面内容和样式。我是白特让我们一起来学习下吧。
媒体查询语法
媒体查询有三个值可供选择none、initial-only和enabled。 none该值表示用户代理不会运行当前文档的脚本因为它不支持它或者支持脚本未激活。 initial-only该值表示脚本在初始页面加载期间可用但在之后不可用。 enabled该值表示当前文档和文档的“生存期”支持脚本并处于活动状态。
代码示例
CSS 媒体查询意味着您可以根据类名更改页面的样式和内容。您可以在 HTML 中构建三组不同的内容并且根据脚本的状态您可以显示其中一个内容集同时隐藏其他两个内容集。
div classno-scriptingNo scripting so heres a specific set of content and styles
/divmedia (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 平台的一个很好的补充。 公众号程序员白特
