检测 CSS 中的 JavaScript 支持

最新推荐文章于 2024-10-14 23:09:19 发布

前端77

最新推荐文章于 2024-10-14 23:09:19 发布

阅读量865

点赞数 16

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/gaotlantis/article/details/139239695

版权

原文链接：ryanmulligan.dev/blog/detect…

最近，我惊喜地发现了一个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日 - 在发布这篇文章后，一些反馈浮现出来，解释了这个媒体特性在哪些方面意外地失败了。

当使用像NoScript或uBlock Origin这样的浏览器扩展来禁用页面脚本时，它的表现并不像预期的那样。即使扩展将JavaScript关闭了，scripting: enabled仍然匹配。
如果脚本被阻止或无法加载，需要通过JavaScript来处理回退。在上面的演示中，回退需要接入演示的scripting: none媒体查询规则集。