乐趣区

关于前端: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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版