Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >检测 CSS 中的 JavaScript 支持

检测 CSS 中的 JavaScript 支持

作者头像
chuckQu
发布于 2024-05-28 01:02:02
发布于 2024-05-28 01:02:02
23100
代码可运行
举报
文章被收录于专栏:前端F2E前端F2E
运行总次数:0
代码可运行

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

使用方法

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@media (scripting: enabled) {
  .my-element {
    /* 如果JS可用,增强样式 */
  }
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@media (scripting: none) {
  .my-element {
    /* 如果JS不支持,使用备选样式 */
  }
}

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

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

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

特性出现之前

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<html class="no-js">
  <!-- 页面内容 -->
</html>

.no-js .my-element {
  /* 当JS被禁用时的样式 */
}

组合查询

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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的环境提供适当的样式。它让我们能够更好地控制页面加载时的样式应用,减少布局偏移,并且提供更加平滑和可预测的用户体验。

本文译自:https://ryanmulligan.dev/blog/detect-js-support-in-css/

Reference

[1]

CSS媒体查询第5级W3C工作草案: https://www.w3.org/TR/mediaqueries-5/#scripting

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-05-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端F2E 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
互联网发展到今天,对于我们的前端而言,我们的关注点不应该仅仅是我们产出的页面能不能用,也需要更多的去关注我们的页面好不好用,有没有照顾到更多的用户群体?
Sb_Coco
2021/06/08
7180
使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data
在过去的几年里,浏览器实现了各种功能,可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。在本文中,将展示浏览器当前公开的用户偏好、处理它们的最佳方式,以及对未来的展望,以了解可能很快就会出现什么。
前端修罗场
2023/10/07
3430
媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data
现代 CSS 指南 -- at-rule 规则扫盲
这里表示的是与屏幕宽度相关的样式设置,上面的代码表示当屏幕宽度大于 900px 时,内部的样式代码块才能生效。
Sb_Coco
2022/11/14
1.2K0
现代 CSS 指南 -- at-rule 规则扫盲
CSS @media 规则
如果浏览器窗口的宽度为 768px 或更小时,把 <body> 元素的背景颜色更改为“浅蓝色”:
taoli
2022/08/28
1.8K0
CSS @media 规则
给用户一个否减弱动画效果的选择[每日前端夜话0x8B]
你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】,它基于 prefers-reduced-motion 媒体查询,将 <source media=""> 用于 <picture> 元素来提供动图(或不提供动图)?
疯狂的技术宅
2019/06/28
8570
给用户一个否减弱动画效果的选择[每日前端夜话0x8B]
Chrome 118:CSS @scope 规则 来了!
@scope at-rule 允许我们将样式规则限定到给定的范围内,并根据这个范围的邻近程度设置样式元素。
ConardLi
2023/10/31
4310
Chrome 118:CSS @scope 规则 来了!
Chrome 74 带来的新功能[每日前端夜话0x66]
Chrome 74 已经发布了,虽然从用户的角度来看并没有什么令人兴奋的东西,但是对开发人员来说带来了一些好处。新版本附带了新的 Javascript 私有类字段、允许用户减少动画的媒体查询和 Windows 的深色模式等等。
疯狂的技术宅
2019/05/16
7620
Chrome 74 带来的新功能[每日前端夜话0x66]
一个侧边栏导航组件实现思路
翻译:布兰 作者:Adam Argyle 来源:https://web.dev/building-a-sidenav-component/
用户4456933
2021/06/01
3.9K0
一个侧边栏导航组件实现思路
DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode
暗黑模式实现,最初的设计,就是参考之前的主题模式。所谓多套主题/配色/皮肤,就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。
周陆军
2020/12/11
3.6K0
从0开始编写一个开关组件
开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。
coder_koala
2020/08/27
2.6K0
从0开始编写一个开关组件
2020年你不应该错过的CSS新特性
@argyleink在第四次的伦敦(LondonCSS 2020)CSS活动中分享了一个有关于CSS特性相关的话题。看了一下这个主题的PPT,里面有些新东西还是蛮有意思的。基于该PPT,我稍微整理近24个CSS方面的新特性,感兴趣的同学可以继续往下阅读。
童欧巴
2020/11/02
1.2K0
2020年你不应该错过的CSS新特性
14 行 CSS 代码实现明暗模式
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反,它通过CSS 媒体查询来检测用户的系统设置,并使用两个自定义CSS属性来确定一个基本的配色方案。
用户6256742
2024/06/20
1390
14 行 CSS 代码实现明暗模式
【CSS】1088- CSS 快速实现烟花绽放
什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画,CSS 动画就足够了,而一些对动画要求比较高的运营活动,创意小游戏等,JS 动画肯定是首选,必要情况下还需要借助一些图形库,比如 Pixi.js。
pingan8787
2021/10/08
1.4K0
【CSS】1088- CSS 快速实现烟花绽放
14 行 CSS 代码实现明暗模式
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反,它通过CSS 媒体查询来检测用户的系统设置,并使用两个自定义CSS属性来确定一个基本的配色方案。
前端修罗场
2022/07/29
6650
14 行 CSS 代码实现明暗模式
2022 年的 CSS 全览
2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面,合作目标是实现 14 个功能。
ConardLi
2022/05/23
4.3K0
2022 年的 CSS 全览
随方逐圆--全面理解CSS媒体查询
在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在;media属性用于为不同的媒介类型规定不同的样式,而真正广泛使用的媒介类型是'screen'、'print'和'all'
江米小枣
2020/06/15
1.3K0
Modern CSS Reset
在早年间(其实也不是很早),写过几篇关于 CSS Reset 的文章 - reset.css 知多少。
Sb_Coco
2022/04/28
5910
Modern CSS Reset
深色模式适配指南
随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。
政采云前端团队
2020/08/18
2.9K0
深色模式适配指南
聊一聊CSS的过去与未来,加深对CSS的理解
它涉及设定规则,让浏览器自动处理。你可以改变边距、字体和大小,但这只是浅尝辄止,你懂的吗?
前端达人
2023/08/31
5100
聊一聊CSS的过去与未来,加深对CSS的理解
网站如何适配暗色模式并实现手动、自动切换
那么,我们自己的网站如何适配暗色/亮色模式呢?首先说一下最基础的媒体查询,然后带大家了解一下我的适配方案(纯JS、CSS和HTML的前端操作)。
Mintimate
2021/02/01
9.3K0
网站如何适配暗色模式并实现手动、自动切换
相关推荐
使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验