type
status
date
slug
summary
category
tags
password
icon
你能想象在CSS里判断JavaScript有没有被禁用吗?现在,CSS整活了,通过 @media (scripting) 特性,开发者就可以判断当前环境JavaScript的可用性。

特性简介

@media (scripting) 是CSS3新发布的媒体查询特性,它允许开发者基于客户端脚本(如 JavaScript)的支持情况来应用不同的样式。
这个特性主要有三个值:
  • none 表示不支持脚本
  • initial-only 表示仅在页面加载时执行脚本
  • enabled 则表示脚本完全可用

应用场景

  • 禁用脚本的网页:为那些因为辅助技术或安全设置禁用JavaScript的用户提供替代样式。
  • 渐进增强和优雅降级:为不支持脚本的浏览器进行样式降级。
  • 广告和追踪阻止:对于使用广告拦截器的用户,提供不依赖于脚本的内容和布局。

使用示例

考虑一个动态内容加载区域,它依赖于JavaScript。在不支持脚本的环境中,我们可以使用 @media (scripting: none) 提供一个备选的静态内容显示或友好的消息提示。以下是代码示例:

结语

你问兼容性?额……年轻人,我们聊下一个话题吧
notion image

专栏资源

专栏介绍:分享CSS新特性和好看的样式设计
专栏地址:👉简明实用CSS技巧
 
CSS技巧:用 currentColor 提升样式的灵活性和一致性万字长文介绍React Fiber架构的原理和工作模式