【第3124期】 CSS前瞻：@media (scripting)助你优雅降级

前言

介绍了一个 CSS 的新特性 @media (scripting)，它允许开发者根据客户端脚本（如 JavaScript）的支持情况来应用不同的样式。还提供了一些应用场景，如为禁用脚本的网页提供替代样式、为不支持脚本的浏览器进行样式降级、对于使用广告拦截器的用户提供不依赖于脚本的内容和布局。

今日前端早读课文章由 @BigYe 程普授权分享。

正文从这开始～～

你能想象在 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;
     /* 其他备选样式 */
   }
 }

结语

你问兼容性？

关于本文
作者：@BigYe 程普
原文：https://weijunext.com/article/media-scripting

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。