【CSS in Depth 2 精译】1.5 渐进式增强

文章目录

    • 1.5 渐进式增强
      • 1.5.1 利用层叠规则实现渐进式增强
      • 1.5.2 渐进式增强的选择器
      • 1.5.3 利用 `@supports()` 实现特性查询
        • 启用浏览器实验特性

1.5 渐进式增强

要用好 CSS 这样一门不断发展演进中的语言,其中一个重要的因素就是要与时俱进,及时了解哪些功能是新鲜出炉的,尤其是那些仅有部分常见浏览器支持的新功能,提前了解是很有必要的。

CSS 同时支持向前与向后兼容的精心设计,让样式代码能够同时在旧新两大类浏览器中流畅运行。只需稍加考虑,这些前沿特性就能在您的 CSS 中得以完美呈现,即便它们尚未对所有用户开放。

为此,可以给旧版浏览器设计一套可接受(但功能较少)的 CSS 样式;而把那些只能在最新版浏览器中呈现的新特性放到新的 CSS 图层(layer)上。这么一来您的样式代码就是面向未来的,随着升级浏览器的用户越来越多,这些新功能新特性也将逐步登台亮相。这种实现方案就叫做 渐进式增强(progressive enhancement

想知道一项特定功能的浏览器版本支持情况,请查看 https://caniuse.com 或 MDN 相关文档 https://developer.mozilla.org/en-US/docs/Web。

由于在互联网早期浏览器更新迭代的速度较慢,一些开发人员就总认为那些全新的 CSS 特性几年内都难登大雅之堂。但时至今日,所有主流浏览器都是基业常青的,其新版本的更新发布不仅频繁,而且往往是自动进行的。一些新功能仅仅只需数月就能将浏览器的支持率从 0% 拉升至 80%。之后便会因为用户延迟更新或者囿于公司政策而使更新速度放缓。但无论如何,只要没有明确需求要支持旧版浏览器,新特性通常都会在得到主流浏览器支持后的一两年内稳定下来。

利用适当的渐进式增强配置,您甚至可以即刻小试牛刀,无需恭候多时——尽管也得看该功能的具体适配情况,以及您希望尝试新特性的迫切程度。

1.5.1 利用层叠规则实现渐进式增强

启用渐进式增强最简单的办法是将其构建到层叠规则之中。当浏览器遇到无法解析的样式声明,会直接忽略。考察如下样式代码:

aside {background-color: #333333; /* 设置一个既安全又普遍支持的十六进制颜色值 */background-color: #333333aa; /* 使用更新的十六进制编码格式覆盖上一个值 */
}

因为第二个样式声明出现在第一个之后,利用前面介绍的层叠规则,就能断定这些元素的背景色层叠值最终花落谁家。

第二个声明使用了一个相对较新的八位的十六进制颜色编码格式(第 7 位和第 8 位数指定了一个 alpha 通道值,表示部分透明)。该语法在大多数浏览器中均有效,仅有部分旧版浏览器不支持,例如 Internet Explorer 浏览器。因此,如果用户恰巧用的是 IE 浏览器,该样式就会被忽略,层叠值为第一个样式声明的值。尽管该用户无法获得带透明效果的完整体验,但至少还能看到一个完全可用的版本。当前页面不会因此而“崩溃”或抛出错误;浏览器也会继续解析其余 CSS 并丢弃未能识别的样式声明。

从调试的角度来看,这样的处理似乎有些奇特,因为 CSS 从不抛出任何错误。但这恰恰是 CSS 正常运行的一个重要组成部分,也是为了实现渐进式增强的最终目标而精心设计的。

1.5.2 渐进式增强的选择器

渐进式增强的实施并不仅限于新的属性或新的样式值语法层面,还可以体现在新的选择器上。浏览器如果支持该语法就能正常渲染,否则将忽略整个规则集。

还有一个重要细节需要特别注意:当规则集有多个选择器时,只要任何一个选择器不被支持或无效,浏览器渲染时将忽略整个规则集。例如以下样式代码:

input.invalid,
input:user-invalid {border: 1px solid red;
}

本书撰稿时,伪类 :user-invalid 还是 CSS 的一个新增特性(更多详细信息,请参阅 附录 A)。落后几个版本的浏览器或许理解 input.invalid 的含义,但由于无法理解 :user-invalid,即使第一个选择器匹配成功,这些样式也同样不会生效。

要启用这样的新选择器,最好的办法是将它们分开书写:

input.invalid {border: 1px solid red;
}
input:user-invalid {border: 1px solid red;
}

这将不可避免地引入冗余样式,但也是当下最好的解决方案了。在使用新的伪类、伪元素或者属性选择器时,请务必牢记这一点(请参阅 附录 A)。

遇到上面列举的几个简单情况,尚且只需要重复几行样式代码;但偶尔也会遇到需要重复大段 CSS 的情况。这种情况下,一些开发人员为了尽量避免样式冗余很可能会选择一直等下去,直到浏览器对该选择器的支持情况令人满意后,才会谨慎启用新的功能特性。

1.5.3 利用 @supports() 实现特性查询

前面提到的分而治之的方法,足以应对因启用新特性而对现有样式的影响较小的情况;但偶尔也会遇到给支持新特性的浏览器定制多套不同样式声明的复杂情况。此时就可以利用 CSS 的 特性查询(feature query 技术,根据浏览器是否支持某个功能特性来定制化开发更大规模的样式效果。

特性查询的写法类似:

@supports (display: grid) {}

注意,@supports 规则后面有一个带括号的样式声明。如果浏览器能识别该声明(本例即为网格布局),则后面大括号内的所有规则集都会生效,否则予以忽略。

也就是说,您可以提供一套旧的样式布局(如浮动布局)留待备用。这些样式未必是最理想的方案,甚至不得不做出一些让步,但足以满足实际需求。然后再利用特性查询,让完整版的网格布局样式在页面生效。

网格布局方案目前已在所有现代浏览器中得到广泛支持,但以前却并非如此。用它来演示 @supports 的用法再好不过。如图 1.15 所示,在示例页面添加一组超链接,并将其布局到一个小型网格中:

图 1.15 定义在 @supports 代码块内的一组链接网格

图 1.15 定义在 @supports 代码块内的一组链接网格

首先,将如下 HTML 代码添加到页面标题和页脚之间的 <main> 元素中:

代码清单 1.24 添加到页面的一组超链接

<p>Try some of our newest coffees:</p>
<div class="coffees"><a href="/coffees/costa-rica">Costa Rica</a><a href="/coffees/ethiopia">Ethiopia</a><a href="/coffees/guatamala">Guatemala</a><a href="/coffees/kenya">Kenya</a><a href="/coffees/mexico">Mexico</a>
</div>

接着添加样式,将其设置为网格布局。首先,给旧版浏览器提供一套回退样式;然后利用特性查询,再提供一套完整功能的网格布局版本。代码如下:

代码清单 1.25 利用功能查询来实现渐进式增强

.coffees {margin: 20px 0;
}
.coffees a {/* 为旧版浏览器提供一套回退样式 */display: inline-block;min-width: 300px;padding: 10px 15px;margin-right: 10px;margin-bottom: 10px;color: black;background-color: transparent;border: 1px solid gray;border-radius: 5px;
}@supports (display: grid) { /* 仅对能识别网格布局的浏览器生效如下样式 */.coffees {/* 为现代浏览器定义网格布局 */display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;}.coffees a {/* 覆盖干扰当前网格布局的回退样式 */margin: unset;min-width: unset;}
}

上述代码中,备用方案和其他基本样式(如颜色)位于特性查询代码块外,因此将对所有浏览器生效。在不支持网格布局的浏览器中打开示例页面,会看到类似网格布局的备用样式效果;而所有基于网格布局的相关样式都在特性查询代码块内,因此仅在浏览器支持网格布局时才会生效。

本书第 5 章还会进一步深入考察网格布局,如果对上述代码不熟悉也无须担心。

试想一下要是没有 @supports 代码块,最终样式会有何不同;甚至可以临时注释掉里面的样式,在现代浏览器中查看样式回退的效果,再酌情调整。

@supports 规则可用于查询各种 CSS 特性的支持情况:使用 @supports (mix-blend-mode: overlay) 可以查询混合模式(blend mode)的支持情况(详见本书第 11 章);使用 @supports (color: color-mix(in oklab, red, white)) 还能查询 color-mix 特性的支持情况(详见本书第 13 章)。

CSS 特性查询还支持以下几种写法:

  • @supports not(<declaration>)——仅当目标声明不受支持时,生效特性查询块中的特定样式规则;
  • @supports (<declaration>) or (<declaration>)——支持任一目标声明,则生效对应的样式规则;
  • @supports (<declaration>) and (<declaration>)——同时支持两个目标声明,则生效相应的样式规则;
  • @supports selector(<selector>)——仅当浏览器能识别目标选择器时,生效相应的样式规则(例如 @supports selector(:user-invalid)

有了渐进式增强的解决方案,您可以实现跨浏览器为所有用户提供定制化的用户体验,甚至包括今后的浏览器。一个新的 CSS 语法特性,放到能识别的浏览器内就能渲染,无法识别的也自然不会渲染。Web 设计师兼教育家 Jen Simmons 半开玩笑地称它为“量子 CSS”(Quantum CSS):对于一个 CSS 特性,“可以同时拥有启用和不启用、生效和不生效两种状态”(“use it and not use it at the same time. It works and it doesn’t work at the same time”)。

CSS 的这种语言特性又被称为 CSS 的 弹性机制(resilience。CSS 这门语言(以及类似的 HTML 语言)是高容错设计理念的产物。随着将来 CSS 新功能的不断涌现,您可以充分利用它来扩充自己的工具箱。

启用浏览器实验特性

W3C 联盟与浏览器厂商一道共同制定并开发了 CSS 规范。这也意味着在 CSS 规范最终确定之前,一些浏览器可能就已经开始支持某项特性功能的研发了。为了防止正处在生产环境中的网站贸然引入尚待稳定的 CSS 样式效果,这些实验性功能仅对有意在浏览器设置中启用它们的开发人员开放。这样也有利于在规范最终确定前进行早期实验和效果反馈。如果您也想接触这些实验性功能,知道如何开启它们也是至关重要的。

在 Chrome 和 Opera 中,可以通过启用一个标志开关(flag)来完成该操作。在 Chrome 的地址栏内输入 chrome://flags 并按 Enter 键跳转;Opera 浏览器则跳转至 opera://flags。然后下翻或搜索找到“实验性网络平台功能”(Experimental Web Platform Features),并单击启用该选项。

如果习惯用 Firefox 浏览器,则需要下载并安装 Firefox 开发者版本(https://www.mozilla.org/en-US/firefox/developer/)或 Firefox Nightly 版本(https://nightly.mozilla.org/)。如果习惯用 Safari 浏览器,则需要安装 Safari 技术预览版(Safari Technology Preview)或 Webkit Nightly Builds 版本。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI 大模型企业应用实战(09)-LangChain的示例选择器

1 根据长度动态选择提示词示例组 1.1 案例 根据输入的提示词长度综合计算最终长度&#xff0c;智能截取或者添加提示词的示例。 from langchain.prompts import PromptTemplate from langchain.prompts import FewShotPromptTemplate from langchain.prompts.example_selecto…

PADS学习笔记

1.PADS设计PCB流程 封装库&#xff08;layout&#xff09;&#xff0c;原理图库&#xff08;logic&#xff09;的准备原件封装的匹配&#xff08;logic&#xff09;原理图的绘制&#xff08;logic&#xff09;导网表操作&#xff08;logic&#xff09;导入结构&#xff08;lay…

C++系列-String(一)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” string是用于字符串&#xff0c;可以增删改查 首先&#xff0c;我们来看一下string的底层 接下来&#xff0c;我们来看一下string的常用接口有哪些&#xff1a; #define _CRT_S…

【机器学习】音乐大模型的深入探讨——当机器有了创意,是机遇还是灾难?

&#x1f440;国内外音乐大模型基本情况&#x1f440; ♥概述♥ ✈✈✈如FreeCompose、一术科技等&#xff0c;这些企业专注于开发人工智能驱动的语音、音效和音乐生成工具&#xff0c;致力于利用核心技术驱动文化产业升级。虽然具体公司未明确提及&#xff0c;但可以预见的是…

拓扑排序——C语言

拓扑排序&#xff08;Topological Sorting&#xff09;是一种用于有向无环图&#xff08;DAG&#xff09;的排序算法&#xff0c;其输出是图中所有顶点的线性排序&#xff0c;使得对于每条有向边 (u, v)&#xff0c;顶点 u 在 v 之前出现。拓扑排序确定了项目网络图中的起始事件…

大电流一体成型电感CSEB1350系列,助力实现DC-DC转换器小尺寸、高效率

DC-DC转换器 , 转换器 , 科达嘉 DC-DC转换器作为一种电压转换装置&#xff0c;在电子产品、电源系统、工业控制、新能源等领域广泛应用。。。 DC-DC转换器作为一种电压转换装置&#xff0c;在电子产品、电源系统、工业控制、新能源等领域广泛应用。随着各行业用户对DC-DC转换器…

Appium + Python App自动化第一个脚本

今天跟大家讲解一个Appium和Python App自动化的脚本。 【1】打开你的夜神模拟器&#xff08;或者连接你的手机&#xff09; 【2】打开桌面的Appium 【3】下载你要测的App的apk文件&#xff0c;放到桌面 【4】拖动你的apk安装包到夜神模拟器里&#xff0c;然后模拟器会提示你…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-36图像增广

6 图片增广 import matplotlib.pyplot as plt import numpy as np import torch import torchvision from d2l import torch as d2l from torch import nn from PIL import Image import liliPytorch as lp from torch.utils.data import Dataset, DataLoaderplt.figure(cat)…

B站大模型指令微调入门实战(完整代码),一键打造你的数字分身

前两天&#xff0c;想导出微信聊天记录&#xff0c;于是搞了个小工具。 感兴趣的小伙伴&#xff0c;可以回看&#xff1a; 微信聊天记录导出为电脑文件实操教程&#xff08;附代码&#xff09; 一键获取所有微信聊天记录&#xff08;附PyQT6入门实战&#xff09; 拿到这些数…

Python中使用PyQT5库时报错:没有Qt平台插件可以初始化

一、发现问题&#xff1a;无限易pythonGo打开执行的时候报&#xff1a;“没有Qt平台插件可以初始化&#xff0c;请重新安装应用程序。”的错误&#xff0c;点击确定后无限易崩溃闪退。 二、解决问题&#xff1a; 1、重新安装依赖&#xff0c;打开CMD输入pip list&#xff0c;查…

Leetcode3185. 构成整天的下标对数目 II

Every day a Leetcode 题目来源&#xff1a;3185. 构成整天的下标对数目 II 解法1&#xff1a;哈希 本质思路类同经典的“两数之和”。枚举右&#xff0c;用哈希表维护左。 枚举 j&#xff0c;并维护 cnt[x] 表示所有满足 i < j 的下标 i 中&#xff0c;有几个 hours[i]…

初识 SpringMVC,运行配置第一个Spring MVC 程序

1. 初识 SpringMVC&#xff0c;运行配置第一个Spring MVC 程序 文章目录 1. 初识 SpringMVC&#xff0c;运行配置第一个Spring MVC 程序1.1 什么是 MVC 2. Spring MVC 概述2.1 Spring MVC 的作用&#xff1a; 3. 运行配置第一个 Spring MVC 程序3.1 第一步&#xff1a;创建Mave…

基于CDMA的多用户水下无线光通信(1)——背景介绍

研究生期间做多用户水下无线光通信&#xff08;Underwater Optical Wireless Communication&#xff0c;UOWC&#xff09;&#xff0c;写几篇博客分享一下学的内容。导师给了大方向&#xff0c;让我用直接序列码分多址&#xff08;Direct Sequence Code Division Multiple Acce…

塞贝壳效应

塞贝克效应&#xff08;Seebeck effect&#xff09;&#xff0c;通常被称为第一热电效应&#xff0c;是由托马斯约翰塞贝克&#xff08;Thomas Johann Seebeck&#xff09;在1821年发现的一种热电现象。这个效应描述了当两种不同的导体或半导体在它们的接点处有温度差时&#x…

containerd手动配置容器网络

containerd手动配置容器网络 机器详情nerdctl启动一个不带网络的容器获取容器ID、PID与network namespace路径准备bridge插件的执行配置文件通过下面的命令调用bridge插件准备tuning插件文件执行下面的命令调用tuning插件准备portmap插件文件执行下面的命令调用portmap插件删除…

SFF1006A-ASEMI无人机专用SFF1006A

编辑&#xff1a;ll SFF1006A-ASEMI无人机专用SFF1006A 型号&#xff1a;SFF1006A 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;10A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;600V 最大…

富文本编辑器CKEditor

介绍 富文本编辑器不同于文本编辑器,它提供类似于 Microsoft Word 的编辑功能 在Django中,有可以现成的富文本三方模块django-ckeditor,具体安排方式: pip install django-ckeditor==6.5.1官网:Django CKEditor — Django CKEditor 6.7.0 documentation 使用方式 创建项…

VBA学习(17):使用条件格式制作Excel聚光灯

今天给大家分享的表格小技巧是制作聚光灯。 先说一下啥是聚光灯。所谓聚光灯&#xff0c;可以简单理解为对工作表的行列填充颜色&#xff0c;突出显示被选中的单元格&#xff0c;仿佛该单元格被聚光灯照亮似的。聚光灯有助于肉眼识别所选中的单元格或区域&#xff0c;提高数据…

【启明智显产品介绍】工业级HMI芯片Model3C详解(二)图像显示

Model3C芯片国产自主的工业级高清显示与智能控制 MCU&#xff0c;配备强大的 2D 图形加速处理器、PNG/JPEG 解码引擎&#xff0c;可以满足多种交互设计场景和多媒体互动需求&#xff0c;具备高可靠性、高开放性&#xff0c;可广泛应用于工业自动化控制、HMI人机交互、串口屏、智…

拖拽劫持与数据窃取

2010 年&#xff0c;ClickJacking 技术有了新的发展。一位名叫 Paul Stone 的安全研究者在 BlackHat 2010 大会上发表了题为“Next Generation Clickjacking”的演讲。在该演讲中&#xff0c;提出了“浏览器 拖拽事件”导致的一些安全问题。 目前很多浏览器都开始支持 Drag &a…