【第3124期】 CSS前瞻:@media (scripting)助你优雅降级
前言
介绍了一个 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
这期前端早读课
对你有帮助,帮” 赞 “一下,
期待下一期,帮” 在看” 一下 。