当前位置: 首页 > news >正文

域名有关的网站sem

域名有关的网站,sem,贵州最新新闻,黄聪 wordpress当前内容所在位置(可进入专栏查看其他译好的章节内容) 【第十章 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 containers
    • 10.2.1 容器的类型 Container types
      • 10.2.1.1 inline-size 容器类型 The inline-size container type
      • 10.2.1.2 size 容器类型 The size container type
    • 10.2.2 容器的名称 Container names
    • 10.2.3 容器与模块化 CSS(Containers and modular CSS)

《CSS in Depth》新版封面

《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 的合法值有三个:normalinline-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-basisflex-grow 属性的值,否则容器宽度将为零,导致后续容器查询无法进行。

10.2.1.2 size 容器类型 The size container type

container-type 的值为 size,则容器将在行内方向(inline direction)与块级方向(block direction)上实现全尺寸局限(full-size containment)。换句话说,浏览器将无法通过子元素来确定其容器的高度;相反,子元素会根据容器的高度进行查询。

容器类型指定为 size 后,容器的高度就需要以某种方式显式地定义,例如直接设置 heightmin-height 属性;或者通过容器外部的样式声明来定义其高度大小,比如网格布局或 Flexbox 布局;再或者,如果容器用到了绝对定位或固定定位,也可以利用 inset 属性来指定容器高度。而当上述方法都无法确定容器高度时,容器高度将为零,基于该高度的容器查询也将无法正常工作。

一般来说,在大多数情况下,容器类型都应该设为 inline-size。而当容器为网格布局或 Flexbox 的一部分、并且高度可以明确确定时,如果想针对高度做容器查询,则可以将容器类型设为 size。但大多数响应式设计都是基于行内尺寸实现的,因此通常也不需要这样设置。

10.2.2 容器的名称 Container names

指定容器名称后,就可以针对具体的容器实现容器查询。为此 CSS 提供了很大的自由度,既可以为某容器指定一个唯一的名称,同时也可以为多个容器复用相同的名称。

其中一个好的做法是使用一个通用名称,例如指定为 layout,并将其应用到页面上的大多数(或者所有)容器。在大多数情况下,它们多半就是您要查询的目标容器,因为您大概率希望模块能根据现有宽度做出响应。容器查询将沿 DOM 树向上查找,并选中指定名称的最近的祖先级容器(如图 10.4 所示)。

图 10.4 容器查询将选中所有匹配名称中距离最近的容器

【图 10.4 容器查询将选中所有匹配名称中距离最近的容器】

遇到需要不同容器的特殊情况时,也可以指定不同的名称,甚至可以对同一容器指定多个容器名称。例如 container: layout sidebar / inline-size 就将名称 layoutsidebar 同时指定给该容器,这样一来,带有这两个名称中任意一个的 @container 查询都将与该容器成功匹配。

容器查询还会绕过所有名称匹配失败的容器,如图 10.5 所示。通常情况下,我们要匹配的都是距离最近的容器;当需要对某个特定容器做出响应时,就可以使用此类技术。

图 10.5 容器查询忽略了名称匹配失败的容器

【图 10.5 容器查询忽略了名称匹配失败的容器】

为容器添加名称不是必需操作,您也可以利用 container-type: inline-size 来建立一个不带名称的容器,并在容器查询时省略名称(如 @container (min-width: 450px));此时浏览器将查找 DOM 树,直至找到第一个容器。

注意

使用简写属性 container 时必须指定容器名称。而定义一个不带名称的容器只能通过 container-type 属性实现。

虽然可以在容器查询中省略容器名称(例如写作 @container (width > 400px) 完全有效),但我还是强烈建议您养成为所有容器命名的习惯。对于不带名称的容器查询,浏览器会从当前元素开始,向上遍历 DOM 树中第一个匹配到的容器,无论该容器是否命名。

10.2.3 容器与模块化 CSS(Containers 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 class="media-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 与 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.ritt.cn/news/7539.html

相关文章:

  • 某个网站访问慢的原因国内网络推广渠道
  • 建网站哪家最好登封seo公司
  • 有做网站的吗 优帮云广东广州重大新闻
  • 自己公司网站维护营销策略是什么意思
  • 白云营销型网站建设宁波seo关键词优化
  • as3.0网站制作教程网站模板免费下载
  • 做仿牌网站空间推广公司app主要做什么
  • 1.简述网站建设流程软文写作实训总结
  • 聚美优品网站建设情况性价比高seo的排名优化
  • 教人做美食的网站深圳哪里有网络推广渠避
  • 企业网站设计与优化今日新闻国内大事件
  • 学做日本料理菜的视频网站百度95099怎么转人工
  • wix做的网站正规百度推广
  • 青岛做网站公司哪家好常用的网站推广方法
  • 网站a记录的是做cname做百度推广员赚钱吗
  • 税务局门户网站建设经验交流材料电商平台app大全
  • 自己做的网站出现乱码东营seo整站优化
  • 杭州网站建设是什么百度竞价推广什么意思
  • 网站页面设置手机版seo搜索引擎优化工具
  • 微信怎么做自己的网站友链购买
  • 网站一年的费用关键词指数批量查询
  • 新网站建设验收做网站的外包公司
  • 网站建设公司年终总结百度推广工具
  • 怎么把在微企点做响应式网站站长统计app软件下载官网安卓
  • 建设银行网上营业厅官方网站下载百度客服人工
  • 网站制作 昆明磁力珠
  • 昆明软件公司有哪些安顺seo
  • 做网站怎样做网络推广赚钱
  • 滨湖区知名做网站选哪家线上营销活动案例
  • 湘潭网站建设 就问磐石网络专业企业网络搭建