CSS容器查询

更新日期: 2022-09-30阅读: 439标签: 容器

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/container-queries

来源:https://ishadeed.com/article/container-queries-are-finally-here/


链接: https://www.fly63.com/article/detial/12182

Web容器_Web服务器及常见的Web容器有哪些?

首先来理解一下简单的一个请求发送到响应的过程。客户端,通常是浏览器或者一些应用发送请求到你的服务器地址,比如访问你的Url或者其他的东西。而我们的服务器通常要分为两个部分,一部分是服务器硬件,有了硬件之后还有有硬件上对应运行的软件。

css实现图片自适应容器的几种方式

css实现图片自适应容器:经常有这样一个场景,需要让图片自适应容器的大小。img标签的方式:我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。

搞懂依赖注入, 用 PHP 手写简易 IOC 容器

好的设计会提高程序的可复用性和可维护性,也间接的提高了开发人员的生产力。今天,我们就来说一下在很多框架中都使用的依赖注入。要搞清楚什么是依赖注入如何依赖注入,首先我们要明确一些概念。

如何优雅监听容器高度变化

不管是对元素的哪种操作,都会造成它的属性、子孙节点、文本节点发生了变化,如果能能监听得到这种变化,这时只需比较容器宽高变化,即可实现对容器宽高的监听,而无需关系它外部行为。DOM3 Events 规范为我们提供了 MutationObserver 接口监视对 DOM 树所做更改的能力

css怎么使容器放不下自动换行?

css可以通过word-break与white-space这两个属性来设置自动换行。word-wrap属性允许长单词或URL地址换行到下一行。white-space属性可以设置文本换行方式。

Node.js/Deno 之父关于JavaScript成为新一代容器的思考

服务端绝大部分程序都是 Linux 程序。这些程序一般由文件系统、一些可执行文件,一些共享的库文件(这些库文件与一些系统库例如 systemd 或者 nsswitch 做交互)。Docker 让使用 Linux 容器变得更容易

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!