网站开发后端做那些,艺术类网站模板,打工网站校企合作建设,wordpress最好的插件当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 ✔️ 10.1.1 容器尺寸查询的用法 ✔️ 10.2 深入理解容器10.3 与容器相关的单位10.4 容器样式查询的用法10.5 本章小结 文章目录 第 10… 当前内容所在位置可进入专栏查看其他译好的章节内容 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 ✔️ 10.1.1 容器尺寸查询的用法 ✔️ 10.2 深入理解容器10.3 与容器相关的单位10.4 容器样式查询的用法10.5 本章小结 文章目录 第 10 章 容器查询10.1 容器查询的一个简单示例 A basic example of a container query10.1.1 容器尺寸查询的用法 Using container size queries 《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 章中构建的媒体模块效果图】
上述模块的 HTML 标记如以下代码清单 10.1 所示。媒体模块位于一个 aside 元素内该元素在页面上渲染为一个狭长的侧边栏列。
代码清单 10.1 带媒体模块的简单两栏布局页 HTML 标记
!doctype html
html langen-USheadmeta charsetUTF-8 /meta nameviewportcontentwidthdevice-width, initial-scale1 /!-- 视口的 meta 标签 --link hrefstyle.css relstylesheet //headbody classl-pagemainh1Franklin Running Club/h1/mainasideh3Running tips/h3div classmedia!-- 媒体模块 --img classmedia__image srcrunner.png /div classmedia__bodyh4Change it up/h4pDont 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 媒体模块在小尺寸视口的响应式页面中的叠放效果图】
在本例中页面所有内容在视口尺寸较大时显示正常在视口较小时页面的响应式渲染也表现良好然而当视口尺寸处在二者之间时情况就不太理想了。当视口宽度稍微迈过 800px 时页面会按两栏布局渲染。此时右边栏的宽度无法按响应式设计很好地处理媒体模块的渲染导致媒体模块中的文本内容被强行挤到一处非常狭窄的位置如图 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 开发者工具启用响应式的设计模式。此时媒体模块相当于拥有了四个断点尺寸在小尺寸视口中作上下布局排列宽度介于 450px 到 800px 时则恢复为水平布局宽度介于 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 与 rem2.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 本章小结
