带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(20)

简介: 带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(20)

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(19)https://developer.aliyun.com/article/1340876?groupCode=taobaotech


定义一个包含性上下文

要使用 CSS 容器查询特性,首先要定义一个包含性上下文(Containment Context)。这个有点类似于使用FlexboxGrid 布局(定义FlexboxGrid 上下文使用的是 display 属性),只不过,定义一个包含性的上下文使用的不是我们熟知的 display 属性,而是一个新的CSS属性,即 container。

 

在一个元素上显式使用 container  可以告诉浏览器以后要针对这个容器进行查询,以及具体如何查询该特定的容器。比如,上面演示的示例中,我们在 .card__container 元素上(.card的父容器)显式设置了 container-type 的值为 inline-size:

.card__container {
container-type: inline-size 3 }

上面的代码告诉浏览器,可以基于.card__container容器的内联轴(Inline Axis)方向尺寸变化进行查询。也就是说,当.card__container容器宽度大小变化到指定的某个值时,其后代元素的样式就可以进行调整。

 

container-type 是 container 属性中的一个子属性,另外,还可以显式使用 container-name 来命名你的容器, 即给一个包含性上下文指定一个具体的名称:

 

.card__container {
container-name: card 3  }


这种方式对于同一个上下文中有多个包含性上下文时非常有意义,可以更明确地知道哪些查询会影响元素。 你可以使用简写属性container,只不过需要在 container-typecontainer-name 之间添加斜杠分割符/:

 

.card__container {
container-type: inline-size; container-name: card;
}
/* 等同于 */
.card__container {
container: inline-size / card;
}

 

如果一个容器查询被应用到一个没有定义的包含祖先元素上,查询将无法应用。也就是说,无论是 body 还是 html 元素,都没有默认的回退包含上下文。另外,定义包含上下文名称时不能是 CSS 的关键词,比如 default、inher- it、initial 等。

 

注意:container-name 可以省略,如果省略将会使用其初始值none,但 container-type 不可省略,如果省略的话则表示未显式声明包含性上下文!

 

定义一个容器查询

现在我们知道使用 container(或其子属性 container-type和container-name)对一个元素显式声明包含上下文

(对一个元素应用包含性)。

 


有了这个包含性上下文之后,就可以使用 CSS@ 规则@container来对应用了包含性元素进行查询,即对容器进行查询。@container 规则的使用和 @media 以及 @supports相似:

 

@container containerName size(width > 45rem) {
/* 应用了包含性上下文后代元素的 CSS */
}
@container size(width > 45rem) {
/* 应用了包含性上下文后代元素的 CSS */
}

 

  带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(21)https://developer.aliyun.com/article/1340874?groupCode=taobaotech

相关文章
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
40 3
|
13天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
26 6
|
1月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
55 1
|
1月前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
57 2
|
2月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
57 5
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
42 2
|
2月前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
273 0
|
2月前
|
自然语言处理 Cloud Native 数据安全/隐私保护
后端技术在现代Web开发中的实践与创新
本文探讨了后端技术在现代Web开发中的重要性及其应用。通过分析当前流行的后端框架和开发模式,揭示了如何利用这些技术来构建高效、可扩展的Web应用程序。同时,文章也讨论了未来后端技术的发展趋势,为开发者提供了一些启示。
|
2月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
55 2