文章标签

模拟容器查询的最小化方法

听起来越来越有可能，我们真的会得到真正的容器查询。Google 正在原型化来自 David Baron 的语法想法，并由 Miriam Suzanne 改进。显然，已经对 switch()…

Chris Coyier 于 2020 年 12 月 2 日

当为网站构建组件时，你并不总是知道该组件将如何使用。也许它…

Mathias Hülsbusch 于 2020 年 11 月 12 日

Heydon 的 <watched-box> 真是个绝妙的工具。它是一个自定义元素，本质上通过基于 ResizeObserver 计算的大小断点添加到盒子的类名来实现容器查询。它就像一个…

Chris Coyier 于 2020 年 5 月 4 日

这是 David Baron 的一篇公开文章的标题，David Baron 是 Firefox 的首席工程师，他在文章中阐述了对容器查询的思考。我知道很多人都屏息以待 David 的想法，因为他是在少数几个…

Chris Coyier 于 2020 年 4 月 29 日

容器查询今天还不存在，但许多 Web 开发人员最近一直在为它辩护。最初，这个想法听起来相对简单：媒体查询允许我们根据视窗的宽度进行样式更改…

Robin Rendle 于 2019 年 12 月 16 日

容器查询始终是 CSS 要求改进的项目列表中的首位。普遍观点是，如果我们有容器查询，我们就不需要编写那么多基于页面大小的全局媒体查询。这是因为我们…

Chris Coyier 于 2019 年 10 月 9 日

容器查询，指的是根据特定元素的值（如宽度和高度）对元素进行样式设置的能力。我们有媒体查询，但它们是基于视窗而不是单个元素的。有很多…

Chris Coyier 于 2018 年 2 月 28 日

现在，我们有能力编写只在浏览器窗口本身处于特定宽度或高度时才应用的 CSS。换句话说，断点。非常有用。我们没有（原生）的能力编写条件…

Chris Coyier 于 2017 年 4 月 6 日

我想，计划是停止使用“元素查询”，开始将其称为“容器查询”。我们已经关注了这个故事一段时间。元素查询有一个严重的缺陷：无限循环。

.our-element:media(min-width: 500px) {

…

Chris Coyier 于 2015 年 7 月 1 日