初探CSS容器查询

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS的原生嵌套、作用域(@scope)、级联层(@layer和容器查询(@container)被称为 下一代 CSS,并且在整个社区得到热议。比如,刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询(@container),更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变,将对Web设计生态系统的发展产生巨大的影响。因为,容器查询将使单个元素有可能根据局部的环境进行调整,而不是依赖整个视窗的尺寸。从今天开始,我将和大家一起进入容器查询的世界,和大家一起了解为什么需要容器查询,它们将来何使Web设计和开发变得更轻松,最重要的是,容器查询将现更强大的组件和布局,尤其是响应式的布局。

容器查询的发展历程

自 2010 年 @Ethan Marcotte 首次提出 Web 响应式设计(RWD) 的设计理念(概念),Web设计就进入现代Web布局时代。开发者可以根据 CSS 媒体查询特性 (通常是视窗宽度、媒体设备特性等)来为Web页面定制不同的表现形式,比如可以根据用户浏览内容的设备特性来呈现不同的布局、不同的字体大小和不同的图片等。

但对于 Web 设计师或Web开发者来说,在现代Web设计或布局中仍然缺少一特性,页面的设计不能够响应其容器的宽度(或其他特性)。也就是说,如果Web开发者能够根据容器宽度来改变UI样式,那就更好了。容器查询将在很大程度上帮助 Web 开发者更好的完成他们的工作,在为Web开发基于组件代码时,其遗漏(容器查询特性的缺失)是一个巨大的限制。

正因此,有关于容器查询的特性在社区中的探讨就没有停止过。

早在 2019 年底,@Zach Leatherman 在寻找容器查询起源时,找到的最早有关于容器查询的解决方案是 @Andy Hume 的基于 JavaScript 的选择器查询和响应式容器的解决方案。

2015 年, @Mat ‘Wilto’ Marquis 在响应式图片社区小组引入了 <picture> 元素,将响应式图片带到了响应式 Web 设计的世界,他在《Container Queries: Once More Unto the Breach》一文中概述了元素查询的挑战和使用案例演示了容器查询的特性。

然后,在2017年,@Ethan Marcotte写了一篇关于容器查询相关的文章,并提出了这样的看法:

在他最初关注的响应式设计的文章之后的几年里,Web设计师和开发人员的工作越来越集中在组件上,而不是整个页面,这使得媒体查询不那么理想。

从那时起,虽然有很多人主张使用媒体查询,但容器查询向前推进的速度还是不够理想。@L. David Baron在《Thoughts on an implementable path forward for Container Queries》中简明扼要地解释了容器查询向前推进慢的问题出在哪?

容器查询要求样式取决于组件的大小,但考虑到 CSS 的工作原理,组件中的样式会影响其大小。任意打破这个循环,既会产生奇怪的结果,又会干扰浏览器的工作,还会增加浏览器优化的成本。

除了 @David Baron 之外,2018年6月,@Greg Whitworth在荷兰阿姆斯特丹举办的 CSS Day + UX Special 活动上的主题分享《Over the moon for container queries》中也解释了容器查询在Web平台上推进慢的相关原因。更重要的是,@Greg Whitworth还提供了使用新的 JavaScript API 和 CSS 的新技术来实现容器查询的特性。@David Barrrron 也提出了一个可以避免这种困境的策略,更重要的是 @Miriam Suzanne 在 @David Baron 的策略基础上提出了 @container 方法

@container 方法通过对被查询的元素应用大小和布局的限制来实现。任何具有尺寸和布局限制的元素都可以通过一个新的 @container规则进行查询,其语法与现有的媒体查询类似。

这个提议已经被 W3C 的 CSS 工作组采纳,并已经添加到 CSS Containment Level 3 模块中。有关于该功能的相关问题和各网格平台推进进度,可以点击这里查阅

到目前为止,@container 已经是 Chrome 的一个实验性属性,即开启浏览器实验标记,就可以使用@container

快速体验容器查询特性

虽然 @container 还只是一佧实验性属性,但在社区中有关于这方面的案例已经非常多。@Miriam Suzanne 在 Codepen 上整理了一个容器查询案例集合

来看两个关于 @container 的具体案例,@Una Kravets 使用容器查询写的有关于一个产品卡片的案例,卡片在网站不同位置使用的是同一个 UI 组件,但UI效果是有差异的:

示例效果如下:

再来看一个 @Jhey 使用容器查询特性写的案例,当容器的高度和宽度都达到一定的阈值时,示例中的衬衫尺寸会改变:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/container-queries.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部