【CSS in Depth 2 精译_062】第 10 章 CSS 中的容器查询(@container)概述 + 10.1 容器查询的一个简单示例

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 【第十章 CSS 容器查询】 ✔️
    • 10.1 容器查询的一个简单示例 ✔️
      • 10.1.1 容器尺寸查询的用法 ✔️
    • 10.2 深入理解容器
    • 10.3 与容器相关的单位
    • 10.4 容器样式查询的用法
    • 10.5 本章小结

文章目录

  • 第 10 章 容器查询
    • 10.1 容器查询的一个简单示例 A basic example of a container query
      • 10.1.1 容器尺寸查询的用法 Using container size queries

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
终于又来到了第2版的另一个全新章节——第十章的 CSS 容器查询。虽然各大主流浏览器对该语法支持已经有一年多了,启用该特性也无需依赖浏览器的实验环境,但系统介绍容器查询的高质量技术博文依然屈指可数。新特性的掌握主要分两步走:先不折不扣地学一遍,然后再想方设法投入实践。而前者的另一个窍门,则是结合具体的示例场景加深理解。精心挑选的示例在 CSS 新语法特性的学习过程中极为重要,但也是博文创作者经常忽视的一个环节,毕竟经典案例需要作者自己先吃透该知识点。让我们跟随作者的思路,一次性拿下这个业界期盼已久的容器查询功能!!!

第 10 章 容器查询

本章概要

  • 容器的定义与 @container 规则的用法
  • 根据容器大小实现模块的响应式
  • 容器相对单位的用法
  • 利用样式查询实现基于自定义属性值的样式变更

至此我们已经掌握了将 CSS 组织为方便重用的模块的具体方法。在大型项目团队构建大型网站或 Web 应用时,利用该方法可以得到效果完全一致的 CSS 样式。然而,要是遇到响应式设计的场景,要让设计出的模块在页面任意位置都能使用,难度就会直线攀升。可能经常会遇到要将某个模块放入像侧边栏这样的狭长的列内。虽然视口本身可能够宽了,但留给特定模块的可用空间就另说了。因此,普通的 @media 媒体查询在模块的响应式设计方面未必可行。

而 CSS 新推出的 容器查询(container query 功能则提供了更为灵活实用的解决方案。容器查询分为两大类:容器尺寸查询(container size queries)容器样式查询(container style queries)。前者可以根据容器元素的宽度调整页面元素的样式;而后者则可以根据容器的自定义属性实现样式修改。

容器的定义

在容器查询的语境下,容器(container 是指包含了相关元素的特定祖先元素。容器可以是父元素或者更高层级的 DOM 树节点。容器元素在容器尺寸查询和容器样式查询中有各自的确定方式,稍后会详述。

本章将对媒体查询的局限性作简要说明,并介绍容器查询在响应式设计中的具体用法。之后将结合几个实际案例进行深入探讨,助您彻底拿下这个前端期盼已久 CSS 特性。

10.1 容器查询的一个简单示例 A basic example of a container query

不妨再来仔细考察一下上一章介绍过的媒体模块(如图 10.1 所示)。先将该模块添加到一个简单的两栏布局中,并让页面符合响应式的设计要求,以便在视口尺寸较小时两个内容列可以呈上下分布。下面将演示在页面响应式特性的控制上,尤其是在涉及模块化 CSS 的相关场景时,媒体查询的表现未必会令人满意。

图 10.1 第 9 章中构建的媒体模块效果图

【图 10.1 第 9 章中构建的媒体模块效果图】

上述模块的 HTML 标记如以下代码清单 10.1 所示。媒体模块位于一个 <aside> 元素内,该元素在页面上渲染为一个狭长的侧边栏列。

代码清单 10.1 带媒体模块的简单两栏布局页 HTML 标记

<!doctype html>
<html lang="en-US"><head><meta charset="UTF-8" /><meta name="viewport"content="width=device-width, initial-scale=1" /><!-- 视口的 meta 标签 --><link href="style.css" rel="stylesheet" /></head><body class="l-page"><main><h1>Franklin Running Club</h1></main><aside><h3>Running tips</h3><div class="media"><!-- 媒体模块 --><img class="media__image" src="runner.png" /><div class="media__body"><h4>Change it up</h4><p>Don't run the same every time youhit the road. Vary your pace, andvary the distance of your runs.</p></div></div></aside></body>
</html>

此时,正文列 main 元素中并没有多少内容,本章稍后会进行扩充。这里先关注侧边栏中的媒体模块。

接着打开样式表,并根据代码清单 10.2 提供的样式进行更新。此时页面中的媒体模块效果和上一章相比,除了引入一些媒体查询来实现页面的响应式外,并没有什么不同之处。整体的页面布局也使用了一个媒体查询,以便在视口尺寸较小时,整个侧边栏可以叠放在 <main> 元素的下方。该写法本质上与第 7 章介绍过的响应式知识是一样的。

代码清单 10.2 两栏布局与媒体模块的样式代码

@layer reset, layout, modules;@layer base {img {display: block;max-width: 100%;}
}@layer layout {.l-page {margin-inline: 1rem;}@media (min-width: 800px) { /* 大尺寸视口下使用双栏布局 */.l-page {display: grid;gap: 1rem;grid-template-columns: 1fr 30%;}}
}@layer modules {.media {padding: 1.5rem;background-color: #eee;border-radius: 5px;}.media__image {margin-inline: auto;}@media (min-width: 450px) { /* 对于 450px 以上的视口,将文本移至图片旁边 */.media {display: flex;gap: 1.5em;}.media__image {align-self: start;margin-inline: revert;}}
}

在浏览器中加载该页面,媒体模块会出现在较窄的右边栏;而当视口尺寸变得很小时,各列又会叠放在一起,同时媒体模块内部元素也会发生堆叠,最终令图片出现在文本上方,如下图 10.2 所示。由于在小尺寸断点的图片上设置了 margin-inline: auto,因此图片可以水平居中展示。

图 10.2 媒体模块在小尺寸视口的响应式页面中的叠放效果图

【图 10.2 媒体模块在小尺寸视口的响应式页面中的叠放效果图】

在本例中,页面所有内容在视口尺寸较大时显示正常,在视口较小时页面的响应式渲染也表现良好;然而,当视口尺寸处在二者之间时,情况就不太理想了。当视口宽度稍微迈过 800px 时,页面会按两栏布局渲染。此时右边栏的宽度无法按响应式设计很好地处理媒体模块的渲染,导致媒体模块中的文本内容被强行挤到一处非常狭窄的位置,如图 10.3 所示:

图 10.3 两栏布局中的侧边栏由于宽度不够,无法正确处理媒体模块的渲染

【图 10.3 两栏布局中的侧边栏由于宽度不够,无法正确处理媒体模块的渲染】

这里的媒体查询模块的问题在于,尽管视口本身的宽度已经够宽了,似乎可以按并排模式来渲染媒体模块了;但媒体模块却被放到了一个宽度严重不足的容器内。

这个问题理论上可以通过再加一个媒体查询来解决。这样一来,当视口宽度介于 800px 到大约 1100px 之间时,媒体模块将位于较窄的侧边栏内,并按照一个“动态的”(“mobile”)上下布局进行渲染。这无疑需要写更多样式代码,并且还得时刻关注页面其他位置是否也有类似的狭窄容器;更要命的是,这样的解决方案严重违背了模块化设计的一个核心原则:设计模块时不应该依赖可能会用到该模块的上下文。

一种更好地解决方案是完全放弃媒体查询,转而使用 容器查询。使用了容器查询的模块,视口大小与否都无关紧要;重要的是该模块所在的容器大小。

10.1.1 容器尺寸查询的用法 Using container size queries

启用容器尺寸查询只需两个步骤:先定义一个 容器(container,再用 @container 规则查询该容器。接下来将通过容器查询的一个简单示例来完善刚才的媒体模块,之后将带您深入考察定义容器时可用的其他配置项。

注意

容器查询功能虽然已于 2023 年初得到了当时所有主流浏览器最新版的支持,但在决定是否使用该功能时,也要考虑到用户可能推迟升级浏览器的情况。获取浏览器最新的版本支持情况,详见 https://caniuse.com/css-container-queries。

在 CSS 中,容器 这一术语长期以来一直用于指代某个祖先级元素,并通过指定尺寸大小或背景颜色来界定页面上的某个区域;而在容器查询的上下文中同样如此。但在容器尺寸查询中,必须通过设置 container-type 属性来显式定义容器。您也可以在同一元素上设置 container-name,例如:

container-name: layout;
container-type: inline-size;

这样就给容器指定了一个名称 layout,并且限定开发者只能根据其行内尺寸或宽度进行容器查询。稍后我们还将重点考察这些属性中的各种取值,但眼下这些配置已经足以构建出一个容器查询的基本示例了。

上述两个属性声明也可以通过 container 简写属性等效替换。这通常也是设置它们的最简单的方式:

container: layout / inline-size;

定义好了容器,就可以使用 @container 来查询宽度了,然后再对容器内的任意元素设置相应的样式。具体写法类似于媒体查询,例如 @container layout (min-width: 450px);或者使用带区间范围的写法 @container layout (width >= 450px)。这里的 layout 指代容器上定义的容器名称。当目标容器满足指定的尺寸大小时,该查询内的样式声明就会生效,在本例中即为:当容器的宽度大于或等于 450px 时生效对应的样式。

代码清单 10.3 给出了示例媒体模块的容器查询样式代码,请按照以下内容更新本地样式表。

代码清单 10.3 添加容器查询后的示例样式代码

@layer layout {.l-page {margin-inline: 1rem;}.l-page > * {container: layout / inline-size; /* 令每列均为一个容器 */}@media (min-width: 800px) {.l-page {display: grid;gap: 1rem;grid-template-columns: 1fr 30%;}}
}@layer modules {.media {padding: 1.5rem;background-color: #eee;border-radius: 5px;}.media__image {margin-inline: auto;}@container layout (width >= 450px) { /* 查询 layout 容器的宽度 */.media {display: flex;gap: 1.5em;}.media__image {align-self: start;margin-inline: revert;}}
}

通过调整浏览器窗口大小来查看上述变更情况(或者利用浏览器的 DevTools 开发者工具启用响应式的设计模式)。此时,媒体模块相当于拥有了四个断点尺寸:在小尺寸视口中作上下布局排列;宽度介于 450px800px 时则恢复为水平布局;宽度介于 800px 到约 1530px 时(即侧边栏较窄时)再次作上下排列;最后当宽度大于该断点时,又恢复为水平布局排列。

更重要的是,侧边栏的代码和媒体模块的代码并没有纠缠到一起,可以放心修改二者中的任意一个。至于媒体模块在哪个上下文里响应哪种布局,则完全交由浏览器自行决定。

警告

鉴于容器的固有特性,需要严格遵守一项特殊规定:容器查询不能在容器本身指定样式。容器查询中的选择器只能选中容器内的 后代元素

与媒体查询一样,您也可以使用 not 关键字来对查询逻辑取反,令样式声明在查询条件为 false 时生效,例如 @container layout not (width >= 450px)



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版第 2 版
读者评分原版:4.7(亚马逊);中文版:9.3(豆瓣)原版:5.0(亚马逊);中文版:暂无,待出版
出版时间原版:2018 年 3 月;中文版:2020 年 4 月原版:2024 年 7 月;中文版:暂无,待出版
原价原版:$44.99;中文版:¥139.00原版:$59.99;中文版:暂无,待出版
现价原版:$36.49;中文版:¥52.54 起步原版:$52.09;中文版:暂无,待出版
原版国内预订起步价 ¥461.00起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

目前已完结的章节(可进入本专栏查看详情,连载期间完全免费):

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局(已完结)
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 (上)
      • 5.2.1 网格线的编号(下)
      • 5.2.2 网格与 Flexbox 配合(下)
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格(上)
      • 5.4.1 添加变化 (中)
      • 5.4.2 让网格元素填满网格轨道(下)
    • 5.5 子网格(全新增补内容)
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计(已完结)
    • 7.1 移动端优先设计原则(上篇)
      • 7.1.1 创建移动端菜单(下篇)
      • 7.1.2 给视口添加 meta 标签(下篇)
    • 7.2 媒体查询(上篇)
      • 7.2.1 深入理解媒体查询的类型(上篇)
      • 7.2.2 页面断点的添加(中篇)
      • 7.2.3 响应式列的添加(下篇)
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结
  • 第八章 层叠图层及其嵌套
    • 8.1 用 layer 图层来操控层叠规则(上篇)
      • 8.1.1 图层的定义(上篇)
      • 8.1.2 图层的顺序与优先级(下篇)
      • 8.1.3 revert-layer 关键字(下篇)
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法
    • 8.4 CSS 嵌套的使用
      • 8.4.1 嵌套选择器的使用
      • 8.4.2 深入理解嵌套选择器
      • 8.4.3 媒体查询及其他 @规则 的嵌套
    • 8.5 本章小结
  • 第九章 CSS 的模块化与作用域
    • 9.1 模块的定义
      • 9.1.1 模块和全局样式
      • 9.1.2 一个简单的 CSS 模块
      • 9.1.3 模块的变体
      • 9.1.4 多元素模块
    • 9.2 将模块组合为更大的结构
      • 9.2.1 模块中多个职责的拆分
      • 9.2.2 模块的命名
    • 9.3 CSS 的作用域
      • 9.3.1 CSS 作用域的就近原则
      • 9.3.2 划定作用域的边界
      • 9.3.3 CSS 中的隐式作用域
      • 9.3.4 关于 CSS 作用域与层叠图层
    • 9.4 CSS 模式库
    • 9.5 本章小结

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

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

相关文章

openjdk17 jvm 对象 内存溢出 在C++源码体现

##java大对象类 public class MiBigObject {private String f1;private String f2;private String f3;private String f4;private String f5;private String f6;private String f7;private String f8;private String f9;private String f10;private String f11;private String…

HCIE:详解OSPF,从基础到高级特性再到深入研究

目录 前言 一、OSPF协议基本原理 简介 基本原理 OSPF路由器类型 OSPF网络类型 OSPF报文类型和封装 OSPF邻居的建立的维护 DR和BDR的选举 伪节点 LSDB的更新 OSPF的配置 二、OSPF的高级特性 虚连接&#xff08;Virtual-Link&#xff09; OSPF的LSA和路由选择 OSPF…

C++算法练习-day45——236.二叉树的最近公共祖先

题目来源&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目思路分析 题目要求在一个二叉树中找到两个给定节点的最低公共祖先&#xff08;Lowest Common Ancestor, LCA&#xff09;。最低公共祖先是指在树中同时包含两个给定节点的所有节点中&#xff0c;深度最大的…

think php处理 异步 url 请求 记录

1、需求 某网站 需要 AI生成音乐&#xff0c;生成mp3文件的时候需要等待&#xff0c;需要程序中实时监听mp3文件是否生成 2、用的开发框架 为php 3、文件结构 配置路由设置 Route::group(/music, function () {Route::post(/musicLyrics, AiMusic/musicLyrics);//Ai生成歌词流式…

【VRChat 改模】开发环境搭建:VCC、VRChat SDK、Unity 等环境配置

一、配置 Unity 相关 1.下载 UnityHub 下载地址&#xff1a;https://unity.com/download 安装打开后如图所示&#xff1a; 2.下载 VRChat 官方推荐版本的 Unity 跳转界面&#xff08;VRChat 官方推荐页面&#xff09;&#xff1a;https://creators.vrchat.com/sdk/upgrade/…

AJAX 实时搜索

AJAX 实时搜索 AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;实时搜索是一种无需刷新整个网页就能从服务器获取数据并在网页上展示的技术。这种技术极大地提升了用户体验&#xff0c;尤其是在搜索引擎、在线购物网站、社交媒体平台等应用中。本文将详细介绍AJ…

ollama部署bge-m3,并实现与dify平台对接

概述 这几天为了写技术博客,各种组件可谓是装了卸,卸了装,只想复现一些东西,确保你们看到的东西都是可以复现的。 (看在我这么认真的份上,求个关注啊,拜托各位观众老爷了。) 这不,为了实验在windows上docker里运行pytorch,把docker重装了。 dify也得重装: Dify基…

详细介绍HTTP与RPC:为什么有了HTTP,还需要RPC?

目录 一、HTTP 二、RPC 介绍 工作原理 核心功能 如何服务寻址 如何进行序列化和反序列化 如何网络传输 基于 TCP 协议的 RPC 调用 基于 HTTP 协议的 RPC 调用 实现方式 优点和缺点 使用场景 常见框架 示例 三、问题 问题一&#xff1a;是先有HTTP还是先有RPC&…

Paddle Inference部署推理(十五)

十五&#xff1a;Paddle Inference推理 &#xff08;python&#xff09;API详解 枚举类型 DataType DataType 定义了 Tensor 的数据类型&#xff0c;由传入 Tensor 的 numpy 数组类型确定。 # DataType 枚举定义 class paddle.inference.DataType:# 获取各个 DataType 对应…

blender 视频背景

准备视频文件 首先&#xff0c;确保你有想要用作背景的视频文件。视频格式最好是 Blender 能够很好兼容的&#xff0c;如 MP4 等常见格式。 创建一个新的 Blender 场景或打开现有场景 打开 Blender 软件后&#xff0c;你可以新建一个场景&#xff08;通过点击 “文件” - “新建…

Elasticsearch与NLP的深度融合:文本嵌入与向量搜索实战指南

Elasticsearch与NLP的深度融合:文本嵌入与向量搜索实战指南 引言 在当今信息爆炸的时代,如何从海量文本数据中快速准确地检索出相关信息,成为了一个迫切需要解决的问题。自然语言处理(NLP)技术的发展为这一挑战提供了新的解决方案。Elasticsearch,作为一个强大的搜索引…

Lesson 10 GNN

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了生成式对抗网络&#xff08;GNN&#xff09;。 目录 Generation Network as Generator 到目前为止&#xff0c;我们学习到的是类似于函数的network&#xf…

Delphi 内置的用于 SOAP WebService 的数据类型定义

记录一下备查。 数据定义在这个单元&#xff1a;unit Soap.InvokeRegistry; 比如&#xff1a; TByteSOAPArray array of Byte;TIntegerSOAPArray array of Integer;TCardinalSOAPArray array of Cardinal;TWordSOAPArray array of Word;TSmallIntSOAPArray array of Sma…

Qt creator设置程序图标

1.windows 在.pro加入 RC_ICONS XXX.ico Qt 只能使用.ico图片设置为程序图标&#xff0c;若是其他图片&#xff0c;需转换为.ico. png在线转ico:PNG to ICO | Convert PNG to ICO online for free 2.其他平台 Qt 设置应用程序图标并没有跨平台&#xff1a; https://doc…

JSON数据转化为Excel及数据处理分析

在现代数据处理中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;因其轻量级和易于人阅读的特点而被广泛使用。然而&#xff0c;有时我们需要将这些JSON数据转化为Excel格式以便于进一步的分析和处理。本文将介绍如何将JSON数据转化为Excel文件&#xff0…

Scala入门基础(20)数据集复习拓展

一.Stack栈二.Queue 队列 一.Stack栈 Stack:栈&#xff0c;特殊的结构。它对元素的操作是在头部&#xff1a;栈顶 先进后出的队列。pop表示取出&#xff0c;push表示在栈中添加元素 二.Queue 队列 Queue 队列;先进先出.enqueue入队&#xff0c;dequeue出队。

Pandas 数据读取与导出

Pandas 是一个强大的 Python 库&#xff0c;用于数据处理和分析。它提供了许多函数来读取和导入数据&#xff0c;支持多种文件格式&#xff0c;如 CSV、Excel、SQL 数据库、JSON 等。以下是一些常用的数据读取和导出方法&#xff1a; 常用方法 格式文件格式读取函数写入&…

Ubuntu20.04运行DM-VIO

目录 环境配置非ROS环境运行编译运行结果图 ROS环境参考 环境配置 Ubuntu20.04 将项目中Cmakelists.txt中C 和 opencv版本修改下 C 使用 14 opencv使用4 非ROS环境运行 编译 按照官网即可 cd dm-vio mkdir build cd build cmake .. make -j运行 DM-VIO给的命令是 bin/d…

TDengine 签约深圳综合粒子,赋能粒子研究新突破

在高能物理和粒子研究领域&#xff0c;实验装置的不断升级伴随着海量数据的产生与处理。尤其是随着大湾区综合性国家科学中心的建设步伐加快&#xff0c;深圳综合粒子设施研究院&#xff08;以下简称“研究院”&#xff09;作为承载“双区驱动”战略的重要科研机构&#xff0c;…

IDEA连接Apifox客户端

IDEA连接Apifox客户端 一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步 一、下载Apifox安装包 Apifox官网&#xff0c;根据自己的操作系统下载对应的Apifox安装包&#xff0c;我是windows系统所以下载的是windows版。 下载 默认仅为我安装&#xff0c;点击下一…