关于前端:CSS容器查询终于来了

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

CSS 容器查问终于来了! 它们目前在谷歌浏览器（105）中失去了反对，很快就会在 Safari 16 中失去反对。这对前端来说容器查问与媒体查问一样重要。

在这节课中，咱们介绍一下容器查问是如何工作的，如何应用它们，以及语法是什么样子的，并分享一些现实生活中的例子和用例。

简介

在设计一个组件时，咱们须要适配不同的变动，并依据 CSS 类或视口大小来扭转它们。这对于咱们开发来说不是很现实，会迫使咱们依据变动类或视口尺寸来写 CSS。

思考上面例子：

咱们有一个卡片组件，当视口足够大时，它应该切换到程度款式。乍一看，这可能听起来不错。然而，当你更深刻地思考这个问题时，它就有点简单了。

如果咱们想在不同的中央应用同一个卡片组件，比方在空间狭小的侧边栏和有更多空间的主区域，咱们就须要应用不同的类来适配：

.c-article {/* Default stacked style */}

@media (min-width: 800px) {
  /* Horizontal style. */
  .c-article--horizontal {
    display: flex;
    align-items: center;
  }
}

如果咱们不想用下面的形式，那么会呈现上面这样的状况：

这种从用户界面的角度来看，并不敌对。

通过容器查问，咱们能够简略地编写响应父级或容器宽度的 CSS。请看下图：

留神到在媒体查问中，咱们是如何依据视口或屏幕宽度来查问一个组件的。在容器查问中，同样的状况产生在父级上。

什么是容器查问？

通过 container-type 属性查问一个组件与最靠近的父类的关系，该父类有一个定义的蕴含物。

咱们过来在媒体查问中写 CSS 的形式，但只是针对组件层面。

容器查问语法

要依据一个组件的父级宽度查问，咱们须要应用 container-type 属性。看上面的例子 ”

.wrapper {container-type: inline-size;}

有了这些，咱们就能够开始查问一个组件。在上面的例子中，如果 .card 元素的容器的宽度等于 400px 或更大，咱们须要增加一个特定的款式。

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

尽管上述办法可行，但当有多个容器时，就会造成凌乱。为了防止这种状况，最好为一个容器命名。

.wrapper {
  container-type: inline-size;
  container-name: card;
}

当初，咱们能够在 @container 旁边加容器名称，如下所示。

@container card (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

残缺代码：

.wrapper {
  container-type: inline-size;
  container-name: card;
}

.c-article {/* Default stacked style */}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}

浏览器反对

容器查问当初在 Chrome 105 中失去反对，并很快在 Safari 16 中失去反对。

事例

这边有 10 个对于容器查问的事例，地址：https://lab.ishadeed.com/cont…

起源：https://ishadeed.com/article/…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。