乐趣区

关于css:你可能不知道的-CSS-容器查询

jiezi

背景

明天 PM 过去问我: 蛋总，有些用户反馈他们屏幕太小了，须要滑动，操作不不便。咱们的零碎能不能改成 自适应布局 啊?

我登时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布局? 真让人胆怯。

而后我就去查了一些自适应布局的材料，尝试找出一种革新老本最小的计划。

过程中发现了一个比拟好玩的货色：CSS 容器查问。

容器查问容许开发者依据 容器元素的大小 来设置元素的款式。

它相似于 @media查问，不同之处在于它依据 容器的大小 而不是视口的大小 进行判断。

对此，我做了一下简略的整顿和总结，在此分享给大家，心愿对大家有所启发。

注释

咱们应用创立响应式设计时，通常应用 媒体查问 依据 视口的大小 来更改文档布局。

然而，许多设计都有一些通用组件，这些组件会依据其容器的可用宽度来更改布局。

这可能 并不总是与视口的大小无关 ，而是 与组件在布局中的搁置地位无关。

例如，以下组件可能显示在网站布局的 窄或 宽列中。

如果有空间，它将显示为两列，否则，咱们心愿将其重叠显示。

上图中的左右两个组件，是同一个组件，性能上是齐全一样的，只是要展现不同的布局。

目前来说，咱们能够通过以某种形式辨认该组件，比方通过增加一个 类或应用其余 选择器 来定位元素，该选择器能够查看它在文档构造中的地位。

然而，这并不能齐全实现媒体查问在整个布局中的作用。

媒体查问使咱们可能依据视口的范畴来扭转元素的大小。

当咱们增加一个类或指标元素时，咱们决定当对象在侧边栏中时，它必须应用重叠布局。

然而，就可用空间而言，很可能是在大屏幕上，侧边栏中的对象将具备足够的空间来以并排布局显示。

容器查问将解决这种状况。

除了查看视口的大小，咱们还能够查看容器的大小，并依据容器中的空间进行布局调整。

CSS 容器查提案

容器查问，将成为 css containment 标准的一部分，并向 contain 属性增加新值。

该 contain 属性 最后是为了 性能优化 而设计的。

它为 Web 开发人员提供了一种办法来隔离 DOM 的各个局部，并向浏览器申明这些局部与文档的其余部分无关。

应用 contain: size; 示意浏览器在两个维度上都晓得该区域的大小。

晓得它有多大的容器，正是咱们进行容器查问所须要的。

然而，通常咱们并不常常晓得这两个维度有多大。

当咱们应用媒体查问时，大多数时候咱们都会指定可用的宽度（或内联大小）。

咱们将列定义为: 该维度中, 空间的 百分比 或分数。

因而，容器查问仅容许通过在 一维 中批示大小来扩大蕴含属性，这被形容为 单轴遏制。

以下 CSS 将创立一个仅在嵌入式轴上蕴含容器的容器，内容能够增长到在块轴上所需的大小：

.sidebar {contain: layout inline-size;}

申明 contain 属性，并且把 layout 和size的值叠加, 浏览器便会在该元素上创立一个 containment 上下文。

申明了这个属性，就意味着浏览器晓得：我当前可能要查问此容器。

而后，能够编写一个查问来查找此蕴含上下文而不是视口大小，以便为组件制订布局决策。

应用创立容器查@container。

这将查问最近的蕴含上下文。

为了使卡仅在边栏宽于 700px 时才显示为两列，咱们应用以下 CSS：

@container (min-width: 700px) {
  .card {
    display: grid;
      grid-template-columns: 2fr 1fr;
  }
}

如果布局的其余区域也是 containment，那么咱们能够将组件放到那些区域中，它将主动响应相干的容器。这使得咱们能够在模式库中创立的各种组件真正可重用，而无需晓得它们所处的上下文。

其实还有很多事件能够说，上文介绍的只是一些基本概念。

另外，上文显示的基本功能都曾经能够在 Chrome Canary 中进行测试。

下载 Canary，而后转到chrome://flags，搜寻Container Queries 并启用该标记。

在线演示 demo 汇合

本文演示 的 demo 的在线链接：
https://codepen.io/rachelandr…

以及容器查问 demo 的 大汇合:
https://codepen.io/collection…

容器查问的兼容性

目前还没有浏览器反对。

容器查问的相干停顿

Blink components

https://bugs.chromium.org/p/c…

Proposed (提案阶段）

Tracking bug:
https://bugs.chromium.org/p/c…

共识和规范

Chrome 浏览器中提供性能后，此处列出的值不保障是最新的。

  • Firefox: No signal
  • Edge: No signal
  • Safari: No signal
  • Web Developers: No signals

论断

CSS 容器查问，为自适应布局计划提供了一种新的思路。

然而目前还处于提案阶段，感兴趣的能够放弃关注。

好了，本文的内容就这么多，谢谢。

相干材料

  1. https://developer.mozilla.org…
  2. https://developer.mozilla.org…
  3. https://caniuse.com/?search=%…
  4. https://www.chromestatus.com/…
  5. https://bugs.chromium.org/p/c…
  6. https://morioh.com/p/8b1afe84…

最初，如果感觉内容有帮忙，能够关注下我的公众号，把握最新动静，一起学习！

退出移动版