【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 版本。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用Python进行大数据处理Dask与Apache Spark的对比

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python进行大数据处理Dask与Apache Spark的对比 随着数据量的增加和数据处理需求的增长…

旅游管理系统源码小程序

便捷旅行&#xff0c;尽在掌握 旅游管理系统是一款基于FastAdminElementUNIAPP开发的多端&#xff08;微信小程序、公众号、H5&#xff09;旅游管理系统&#xff0c;拥有丰富的装修组件、多端分享、模板消息、电子合同、旅游攻略、旅游线路及相关保险预订等功能&#xff0c;提…

[leetcode]avoid-flood-in-the-city 避免洪水泛滥

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> avoidFlood(vector<int>& rains) {vector<int> ans(rains.size(), 1);set<int> st;unordered_map<int, int> mp;for (int i 0; i < rains.size(); i) {i…

Redis实战—基于setnx的分布式锁与Redisson

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P56 - P63 目录 分布式锁介绍 基于SETNX的分布式锁 SETNX锁代码实现 修改业务代码 SETNX锁误删问题 SETNX锁原子性问题 Lua脚本 编写脚本 代码优化 总结 Redisson 前言…

Hadoop简单应用程序实例

Hadoop是一个分布式系统基础架构&#xff0c;主要用于大数据的存储和处理。它允许使用简单的编程模型跨集群处理和生成大数据集。Hadoop主要由HDFS&#xff08;Hadoop Distributed FileSystem&#xff0c;分布式文件系统&#xff09;和MapReduce编程模型两部分组成。 准备工作…

LeeCode 994. 腐烂的橘子

原题链接994. 腐烂的橘子 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;采用bfs遍历图&#xff0c;将烂橘子加入队列&#xff0c;然后将被烂橘子感染的橘子也加入队列&#xff0c;bfs的具体细节就不多说了&#xff0c;可以自己去搜&#xff0c;很简单&#xff0c;…

【并发编程】-1. 计算机内存架构、JAVA内存模型、Volatile关键字

JAVA内存模型JMM 概述 概念&#xff1a;Java Memory Model (JMM)JAVA内存模型是一种抽象的概念&#xff0c;描述的是一组规范&#xff0c;规范中定义了程序中各个变量&#xff08;实例字段、静态字段、数组对象的组成元素&#xff09;的访问方式&#xff0c;决定了一个线程对…

八皇后00

题目链接 八皇后 题目描述 注意点 每个皇后都不同行、不同列&#xff0c;也不在对角线上“对角线”指的是所有的对角线&#xff0c;不只是平分整个棋盘的那两条对角线 解答思路 本题与N皇后相同&#xff0c;思路仍然是深度优先遍历的同时存储前面每一行选取了哪些列&#…

深圳网页设计收费情况

深圳是中国最具活力和发展速度最快的城市之一&#xff0c;随着经济的快速发展&#xff0c;各种行业都飞速发展&#xff0c;尤其是互联网行业。网页设计是互联网行业的重要组成部分&#xff0c;深圳的网页设计师数量也是非常庞大的。那么&#xff0c;深圳网页设计师的收费情况是…

LLM 推理:Nvidia TensorRT-LLM 与 Triton Inference Server

随着LLM越来越热门&#xff0c;LLM的推理服务也得到越来越多的关注与探索。在推理框架方面&#xff0c;tensorrt-llm是非常主流的开源框架&#xff0c;在Nvidia GPU上提供了多种优化&#xff0c;加速大语言模型的推理。但是&#xff0c;tensorrt-llm仅是一个推理框架&#xff0…

互联网信息服务算法备案流程与要求

一、备案申请的办理流程 企业通过网信办的互联网信息服务算法备案系统&#xff08;https://beian.cac.gov.cn/#/index&#xff09;提交算法备案申请。填报信息包括三部分&#xff0c;分别是算法主体信息、产品及功能信息、算法信息。备案中比较重要的文件包括主体信息中的《落…

如何查看websocket连接信息

Chrome 浏览器中查看 webSocket 连接信息_谷歌浏览器看不到 websocket-CSDN博客 Getting Started — Flask-SocketIO documentation 运作原理 | Socket.IO

Oracle数据库使用指南基本概念

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

不锈钢氩弧焊丝ER316L

说明&#xff1a;TG316L 是超低碳的不锈钢焊丝。熔敷金属耐蚀、耐热、抗裂性能优良。防腐蚀性能良好。 用途:用于石油化工、化肥设备等。也可用于要求焊接后不进行热处理的高Cr钢的焊接。

Android模拟器linux内核的下载,编译,运行,驱动开发测试

Android模拟器linux内核的下载&#xff0c;编译&#xff0c;运行&#xff0c;内核模块开发 1.下载适合Android模拟器的内核 git clone https://aosp.tuna.tsinghua.edu.cn/android/kernel/goldfish.git git branch -a git checkout android-goldfish-4.14-gchips 新建一个目录…

Word恢复历史文档,记好4个方法就足够

“我正在准备一个重要的报告&#xff0c;但是电脑突然就崩溃了&#xff0c;导致我的文档还没保存就被关闭了&#xff0c;大家有什么方法可以恢复Word历史文档吗&#xff1f;快给我出出主意吧&#xff01;” 在数字化时代&#xff0c;文档编辑和保存已经成为我们日常工作和学习中…

flink使用StatementSet降低资源浪费

背景 项目中有很多ods层&#xff08;mysql 通过cannal&#xff09;kafka&#xff0c;需要对这些ods kakfa做一些etl操作后写入下一层的kafka&#xff08;dwd层&#xff09;。 一开始采用的是executeSql方式来执行每个ods→dwd层操作&#xff0c;即类似&#xff1a; def main(…

信创产业生态圈各企业分布

文章目录 应用系统&#xff1a;办公管理&#xff1a;云平台网络安全基础软件操作系统数据库中间件 基础硬件芯片 我们国家在前几年提出了信创战略计划&#xff0c;就是为了在信息技术领域&#xff0c;将一些国外牌子的设备和应用、软件逐渐替换成国产的&#xff0c;保证国家的金…

记录samba账号操作日志,增删改查等(安全审计)

说明&#xff1a;windows用户映射samba文件共享服务&#xff0c;记录samba账号的操作日志 只要三步&#xff01; 安装必要软件包 audit配置samba共享配置Syslog 具体步骤 1. 安装必要的软件包 audit 是linux系统的高级审计框架 主要功能&#xff1a;系统调用监控、文件和目…