现代Web技术让我们离容器查询更近一步

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

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革,十年后的今天,CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大,但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过,庆幸的是,现代的一些 Web 技术(比如,FlexboxGrid媒体查询比较函数等)让我们离容器查询特性更近一步。今天我们来看看,这些现代Web技术是如何让我们离容器查询更近一步。

背景

通过《初探CSS容器查询》和《容器查询中的 container@container》两篇文章中可以获知:

广大Web设计师和开发者所期待的、真正的CSS容器查询已经离我们越来越近了。

真正的CSS容器查询是 CSS 全新的特性,但也是对媒体查询的补充,他和媒体查询最大的差异是:CSS媒体查询是基于浏览器视窗宽度或媒体特性来做条件判断;CSS容器查询是于容器尺寸、样式或状态等条件来做判断

对于Web开发者而言,在为Web构建组件时,并不总是知道该组件将被如何使用。也许它会和浏览器的视窗一样宽;也许有是一排二;也许它将被放在某个狭窄的栏目中(比如侧边栏)。它的宽度并不总是与浏览器视窗宽度相关。通常情况下,如果能对组件的CSS进行基于容器的查询,将是非常的方便的。也就是说,如果组件能够让你基于容器的尺寸做出响应,而不是基于视窗尺寸做出响应,这对于基于组件的设计是非常有帮助的,因为你不再需要为同一组件创建该组件的变体。

针对于这样的场景,你可能首先会想到 CSS 的一些现代布局技术,比如使用 Flexbox、Grid 或者一些CSS函数,我们可以创建响应容器和内容宽度的样式,并克服容器查询所要解决的一些痛点。但它们之间还是有着本质的差异。接下来我们就来一起探讨这方面的差异。

问题所在

我们从实际需求出发。我想大家平时在开发的时候,应该碰到像下图这样的需求:

正如上图所示:

  • 视窗变窄,窄到一行只能放置一个卡片时(想象在移动端),三个卡片在垂直方向堆叠(从上往下,一个一个)放置,但它们向用户呈现的效果是一致的
  • 视窗变宽,但没有足够空间一排容纳三个卡片时,第三个卡片会换行,并且在 UI 的呈现上也与其他卡片不同(它可以是故意的),你可以认为第三个卡片是特别的(卡片的变体)
  • 视窗有足够宽的空间或卡片容器有足够宽的空间,卡片一排三

请不要在意这样设计的原因和理由。我们现在要考虑的是如何跳过这个中间的布局状态,直接从垂直堆叠(从上往下,一个一个放置)切换到水平一排三(从左向右,一个一个放置)?有什么办法呢?

或许你会说,使用 CSS 媒体查询很容易就能做到,使用 @media 在不同的断点下为卡片组件提供不同的 UI样式。

甚至可能还有更多的断点查询,比如在大的显示器上,为了让示例不那么复杂,只要是大于 768px 断点的,卡片都是一排三的水平放置:

看上去是OK的?事实呢?或许并不是这样的。因为,CSS @media 断点是设计系统的大忌。我们构建的 Web 组件(比如这个卡片组件),在上下文之外定义,可以在任何宽度的容器(父元素或其祖先元素)中实例化。上下文是可变的,但@media查询(断点查询)所能做的是根据浏览器视窗宽度这个常数来调整组件UI样式。

简单地说,对于Web组件来说,媒体查询是一种错误,因为我们永远不知道Web组件的大小。我们用下面这张图来展示这个问题:

要解决这个问题,CSS媒体查询是无法做到的,只有容器查询才能实现。

使用现代Web技术创建响应容器或内容宽度的样式

文章开头提到,针对于这样的场景,你可能会想到一些现代Web布局技术,比如 FlexboxGrid布局,甚至你还会想到使用 CSS 函数中的比较函数数学四则运算CSS的动态计算等技术创建响应容器和内容宽度的样式。

我们的示例将以三个卡片的布局为例,构建这个示例我们需要的 HTML 结构如下:

<!-- HTML -->
<div class="container">
    <div class="card">
        <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" />
        <div class="card__badge">Must Try</div>
        <h3 class="card__title">Best Brownies in Town</h3>
        <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
        <button class="card__button">Order now</button>
    </div>
    <div class="card"></div>
    <div class="card"></div>
</div>

注意,如果没有特别声明,后面的示例都将以这个 HTML 作为示例所需的 DOM 结构。

为了省事,单张卡片的使用 CSS Grid 来布局,并且添加一点CSS来美化卡片:

.card {
    display: grid;
    border-radius: 12px;
    background-color: #fff;
    color: #454545;
    gap: 10px;
    box-sh
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/modern-web-technologies-take-us-a-step-further-from-container-queries.html

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

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