写点什么

检测 CSS 中的 JavaScript 支持

  • 2024-05-27
    福建
  • 本文字数:1477 字

    阅读完需:约 5 分钟

检测 CSS 中的 JavaScript 支持

最近,我惊喜地发现了一个 CSS 媒体特性——scripting,它能够在所有现代浏览器中使用。这意味着,我们可以根据用户浏览器是否支持 JavaScript 来提供不同的 CSS 规则,从而减少未样式化内容的闪烁或不受欢迎的布局偏移。

使用方法

使用这个特性,我们可以按以下方式渐进式增强样式:

@media (scripting: enabled) {  .my-element {    /* 如果JS可用,增强样式 */  }}
复制代码

或者,我们可以优雅地回退到一些备选样式:

@media (scripting: none) {  .my-element {    /* 如果JS不支持,使用备选样式 */  }}
复制代码

还有一个initial-only值,适用于在页面加载期间启用脚本但在之后不启用的情况。CSS媒体查询第5级W3C工作草案中提到了一些它可能有用的场景。

例如,打印页面,或者在服务器上渲染页面并发送给用户的预渲染网络代理。

我个人不太能想象自己会经常使用initial-only,尽管我很想找到更多实际应用中的具体例子。

特性出现之前

在这项特性出现之前,检测 JavaScript 支持的一种方法是通过在html标签上设置一个自定义选择器——常见的做法是添加一个no-js类名。如果 JavaScript 得到支持并启用,它会在渲染页面内容之前移除该选择器。当 JavaScript 被禁用时,我们可以提供适应体验的备选样式。

<html class="no-js">  <!-- 页面内容 --></html>
.no-js .my-element { /* 当JS被禁用时的样式 */}
复制代码

组合查询

下面是一个示例,注意到媒体查询被结合起来检查脚本和减少运动的条件。

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {  /* JS可用且运动OK */}
@media (scripting: none), (prefers-reduced-motion) { /* JS已禁用或减少运动已启用 */}
复制代码

每个条件当然可以有独家样式,如果预期的结果需要的话,但在规则集有重叠的地方,将它们结合起来也很好。

问题

更新于 2024 年 4 月 21 日 - 在发布这篇文章后,一些反馈浮现出来,解释了这个媒体特性在哪些方面意外地失败了。

  1. 当使用像 NoScript 或 uBlock Origin 这样的浏览器扩展来禁用页面脚本时,它的表现并不像预期的那样。即使扩展将 JavaScript 关闭了,scripting: enabled仍然匹配。

  2. 如果脚本被阻止或无法加载,需要通过 JavaScript 来处理回退。在上面的演示中,回退需要接入演示的scripting: none媒体查询规则集。

小心那些陷阱

尽管scripting媒体特性非常有用,但上述问题提醒我们,在依赖它时需要谨慎。例如,如果一个脚本由于某种原因没有加载,你可能需要一个备用计划来确保内容的可访问性和页面的可用性。

现实世界的应用

在现实世界的网页设计中,这意味着我们需要为那些可能由于技术或个人偏好而禁用 JavaScript 的用户考虑。通过使用scripting媒体查询,我们可以确保所有用户都能获得清晰、优雅的体验,无论他们是否选择使用 JavaScript。

结语

总的来说,scripting媒体查询是一个强大的工具,可以帮助我们为支持 JavaScript 和不支持 JavaScript 的环境提供适当的样式。它让我们能够更好地控制页面加载时的样式应用,减少布局偏移,并且提供更加平滑和可预测的用户体验。

作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

JNPF 可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。

当然,我更建议大家成为一个全栈,不要把自己的定位局限于前端。


用户头像

还未添加个人签名 2023-06-19 加入

还未添加个人简介

评论

发布
暂无评论
检测 CSS 中的 JavaScript 支持_伤感汤姆布利柏_InfoQ写作社区