文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS容器查询终于来了,你知道吗?

2024-12-01 14:09

关注

CSS容器查询终于来了! 它们目前在谷歌浏览器(105)中得到了支持,很快就会在Safari 16中得到支持。这对前端来说容器查询与媒体查询一样重要。

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

简介

在设计一个组件时,我们需要适配不同的变化,并根据CSS类或视口大小来改变它们。这对于我们开发来说不是很理想,会迫使我们根据变化类或视口尺寸来写CSS。

考虑下面例子:

我们有一个卡片组件,当视口足够大时,它应该切换到水平样式。乍一看,这可能听起来不错。然而,当你更深入地思考这个问题时,它就有点复杂了。

如果我们想在不同的地方使用同一个卡片组件,比如在空间狭小的侧边栏和有更多空间的主区域,我们就需要使用不同的类来适配:

.c-article {

}
@media (min-width: 800px) {

.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 {

}

@container card (min-width: 400px) {

.c-article {
display: flex;
align-items: center;
}
}

浏览器支持

容器查询现在在Chrome 105中得到支持,并很快在Safari 16中得到支持。

事例

这边有10个关于容器查询的事例,地址:https://lab.ishadeed.com/container-queries。

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯