查看原文
其他

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

BigYe 程普 前端早读课 2024-01-26

前言

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

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

正文从这开始~~

【第3119期】form-sizing:使用 CSS 实现文本区域的自动增加高度

你能想象在 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

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

继续滑动看下一个

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

BigYe 程普 前端早读课
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存