你能想象在CSS里判断JavaScript有没有被禁用吗？现在，CSS整活了，通过 @media (scripting) 特性，开发者就可以判断当前环境JavaScript的可用性。

@media 查询简介

在介绍 @media (scripting) 之前，先给新来的同学简单介绍一下 @media 查询。 @media 查询是响应式设计的核心，它允许开发者编写针对不同媒体类型（如屏幕、打印）和条件（如视口宽度、分辨率）的样式，例如：

/* 默认样式，适用于大屏幕 */
.container {
  width: 60%;
  margin: auto;
}

/* 屏幕宽度小于600像素时应用的样式 */
@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    margin: 0;
  }
}

比较少见的是把@media 查询用于调整打印样式。在打印网页时，可以定义特定的 CSS 规则以优化页面的打印布局，如去除背景颜色和图像，更改字体大小和颜色，以及隐藏对于打印不必要的元素。

/* 在屏幕上显示时使用的样式 */
body {
  background-color: lightblue;
  color: black;
}

/* 添加一些屏幕专用的样式 */
.navbar, .footer {
  display: block;
}

/* 当文档被打印时使用的样式 */
@media print {
  body {
    background-color: white;
    color: black;
  }

  /* 隐藏屏幕专用的元素 */
  .navbar, .footer {
    display: none;
  }
}

在这个例子中：

• 当网页在屏幕上显示时，它有一个浅蓝色的背景和黑色的文字。
• 当网页被打印时（或保存为 PDF），背景变为白色，文字保持黑色，同时导航栏和页脚被隐藏，因为这些元素通常在打印版本中不需要显示。

@media (scripting) 特性

@media (scripting) 是CSS3新发布的媒体查询特性，它允许开发者基于客户端脚本（如 JavaScript）的支持情况来应用不同的样式。

这个特性主要有三个值：

• none 表示不支持脚本
• initial-only 表示仅在页面加载时执行脚本
• enabled 则表示脚本完全可用

应用场景

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

使用示例

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

.dynamic-content {
  color: blue;
  /* 其他样式 */
}

@media (scripting: none) {
  .dynamic-content {
    color: gray;
    text-decoration: line-through;
    /* 其他备选样式 */
  }
}

结语

你问兼容性？额……年轻人，我们聊下一个话题吧

专栏资源