建网站语言,网站简历文字如何空行,18种最有效线下推广的方式,wordpress购物主题当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 ✔️ 10.2.1 容器的类型 ✔️10.2.2 容器的名称 ✔️10.2.3 容器与模块化 CSS ✔️ 10.3… 当前内容所在位置可进入专栏查看其他译好的章节内容 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 ✔️ 10.2.1 容器的类型 ✔️10.2.2 容器的名称 ✔️10.2.3 容器与模块化 CSS ✔️ 10.3 与容器相关的单位10.4 容器样式查询的用法10.5 本章小结 文章目录 10.2 深入理解容器 A closer look at containers10.2.1 容器的类型 Container types10.2.1.1 inline-size 容器类型 The inline-size container type10.2.1.2 size 容器类型 The size container type 10.2.2 容器的名称 Container names10.2.3 容器与模块化 CSSContainers and modular CSS 《CSS in Depth》新版封面 译者按 本篇将深入探讨容器查询中的核心概念——容器。通过对容器的分类、命名及其在模块化 CSS 中的应用帮助您打通容器查询的“任督二脉”。第一次接触容器查询时我也有过作者提到的提问如果容器查询真的可以实现那怎么避免页面渲染出现死循环呢真到实现它的时候才发现还需要很多前提条件比如引入 containment 的概念MDN 译作【局限】个人感觉稍欠准确因此在文中给出术语原文。相信学完本节您一定会对 CSS 容器有更深刻的理解。 10.2 深入理解容器 A closer look at containers
上一节定义容器时我们给容器指定了一个名称和对应的容器类型。本节我们将深入考察这些属性的行为模式并了解它们的具体用途。虽然前面的示例并不难但在使用容器时也需要了解一些特定的限制深入理解容器类型带来的影响尤为重要。
10.2.1 容器的类型 Container types
十多年来浏览器厂商一直认为这个功能永远无法实现主要是因为他们担心会产生无限循环。假设有这样一个场景需要查询一个高度小于 300px 的容器当符合查询条件时其中一个元素的字号会放大至 2em这反过来又将增加该元素的高度从而撑大所在容器的高度最终导致容器查询条件匹配失败——进而字号回落到原始大小然后查询条件再次触发循环往复永无休止。
而在容器查询的设计过程中决不允许出现这样的无限循环。为此CSS 引入了 局限containment 的概念。它为部分隔离 DOM 子节点和页面其余部分提供了一种有效途径。
在容器查询的上下文或语境中这就意味着不能使用容器查询来改变被查容器的尺寸大小并且该尺寸的设置也只能通过不依赖于其子元素的方式来予以明确。
该限制的具体表现取决于容器类型的具体取值。属性 container-type 的合法值有三个normal、inline-size 以及 size其初始值为 normal表示该元素并非查询容器因此也无法对其进行容器查询。 注意 也可以通过 contain 属性property直接设置元素的局限。但这往往并不常用因为指定 container-type 属性就能同步设置所需的局限。有关局限的更多设置详见 MDN 在线文档 https://mng.bz/WEg4。 10.2.1.1 inline-size 容器类型 The inline-size container type
令容器类型的值为 inline-size正如在之前的示例中演示的那样可以仅凭行内尺寸即元素宽度来实现容器查询。设为 inline-size 的容器也无法使用基于高度的容器查询。在大多数实际应用中inline-size 往往就是开发者需要的容器类型。容器的高度仍然会根据其内容的高度正常确定您也可以根据可用空间的宽度调整样式但容器中的任何内容都无法改变容器的行内尺寸。而这也正是 inline-size 起到的作用。
在常规文档流normal document flow中块级元素的宽度将自动填满所有可用的空间。这就为容器查询提供了一个已知的宽度。在某些情况下或许需要添加额外的样式声明来明确指定宽度例如当容器为一个弹性元素时这一点尤为重要务必确保弹性元素设置了 flex-basis 或 flex-grow 属性的值否则容器宽度将为零导致后续容器查询无法进行。
10.2.1.2 size 容器类型 The size container type
若 container-type 的值为 size则容器将在行内方向inline direction与块级方向block direction上实现全尺寸局限full-size containment。换句话说浏览器将无法通过子元素来确定其容器的高度相反子元素会根据容器的高度进行查询。
容器类型指定为 size 后容器的高度就需要以某种方式显式地定义例如直接设置 height 或 min-height 属性或者通过容器外部的样式声明来定义其高度大小比如网格布局或 Flexbox 布局再或者如果容器用到了绝对定位或固定定位也可以利用 inset 属性来指定容器高度。而当上述方法都无法确定容器高度时容器高度将为零基于该高度的容器查询也将无法正常工作。
一般来说在大多数情况下容器类型都应该设为 inline-size。而当容器为网格布局或 Flexbox 的一部分、并且高度可以明确确定时如果想针对高度做容器查询则可以将容器类型设为 size。但大多数响应式设计都是基于行内尺寸实现的因此通常也不需要这样设置。
10.2.2 容器的名称 Container names
指定容器名称后就可以针对具体的容器实现容器查询。为此 CSS 提供了很大的自由度既可以为某容器指定一个唯一的名称同时也可以为多个容器复用相同的名称。
其中一个好的做法是使用一个通用名称例如指定为 layout并将其应用到页面上的大多数或者所有容器。在大多数情况下它们多半就是您要查询的目标容器因为您大概率希望模块能根据现有宽度做出响应。容器查询将沿 DOM 树向上查找并选中指定名称的最近的祖先级容器如图 10.4 所示。 【图 10.4 容器查询将选中所有匹配名称中距离最近的容器】
遇到需要不同容器的特殊情况时也可以指定不同的名称甚至可以对同一容器指定多个容器名称。例如 container: layout sidebar / inline-size 就将名称 layout 和 sidebar 同时指定给该容器这样一来带有这两个名称中任意一个的 container 查询都将与该容器成功匹配。
容器查询还会绕过所有名称匹配失败的容器如图 10.5 所示。通常情况下我们要匹配的都是距离最近的容器当需要对某个特定容器做出响应时就可以使用此类技术。 【图 10.5 容器查询忽略了名称匹配失败的容器】
为容器添加名称不是必需操作您也可以利用 container-type: inline-size 来建立一个不带名称的容器并在容器查询时省略名称如 container (min-width: 450px)此时浏览器将查找 DOM 树直至找到第一个容器。 注意 使用简写属性 container 时必须指定容器名称。而定义一个不带名称的容器只能通过 container-type 属性实现。 虽然可以在容器查询中省略容器名称例如写作 container (width 400px) 完全有效但我还是强烈建议您养成为所有容器命名的习惯。对于不带名称的容器查询浏览器会从当前元素开始向上遍历 DOM 树中第一个匹配到的容器无论该容器是否命名。
10.2.3 容器与模块化 CSSContainers and modular CSS
在为网站构建模块化 CSS 的过程中开发人员应当采取某种策略来确保容器能以可预测的方式进行定义以便后续对模块进行有效的查询。每当一个模块存在某个包裹元素、并且可能包含其他模块时我更倾向于将该包裹元素视为容器。
例如在媒体模块中media__body 用于装填内容同时也可能包含其他模块。因此在这种情况下我通常会将 media__body 定义为一个容器这样就能对放置其中的任何内容作出适当响应。
根据如下代码清单 10.4 所示的示例代码同步更新您的本地示例页面。该代码片段对容器进行了定义同时还对媒体模块的正文部分media body设置了一个 flex-grow 属性值以确保其具有确定的宽度。
代码清单 10.4 将媒体模块中的正文部分设置为容器
layer modules {.media {padding: 1.5rem;background-color: #eee;border-radius: 5px;}.media__image {margin-inline: auto;}.media__body {container: layout / inline-size;flex-grow: 1;}
}这样该模块就可以放置后期可能需要嵌入其中的其他模块了甚至可以在一个模块内嵌套多个媒体模块它们会根据情况分别做出响应——尽管没有什么实用价值但看到这些模块的实际效果也挺有意思的。采用这种方法时还需要确保任何布局样式也能定义容器就像对 .l-page 设置布局时那样详见 10.1 小节代码清单 10.3。
这种方法的另一个替代方案是通过各自带有的容器来定义模块。例如用 div classmedia-container 来包裹媒体模块并指定 container-type: inline-size 来设计样式。但我不太喜欢给众多模块添加额外的 HTML 标记因此这种方法用得也不多。
在使用模块时容器查询的表现向来优于媒体查询。只要能在整个页面中始终如一地定义好容器往往就能将它们用于所有模块。 关于《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 本章小结
