使用容器查询可以创建“调整大小黑客”吗？

如果您关注 CSS 的新发展，您可能已经听说过即将到来的 容器查询。我们将在本文中介绍基础知识，但如果您想了解更多信息，可以查看 Una 的 “下一代 CSS：@container” 文章。在自行了解基础知识后，我们将使用它们构建一些非常有趣的东西：一个对经典 CSS 模因（以 Peter Griffin 烦恼地摆弄百叶窗为特色）的新颖诠释。;

那么，什么是容器查询？它就是… 恰如其名。就像我们使用媒体查询来查询视口大小等内容一样，容器查询允许我们查询容器的大小。基于此，我们可以对所述容器的子元素应用不同的样式。

它是什么样子的？它看起来像这样

.container {
  container-name: my-container;
  container-type: inline-size;
  /* or */
  container: my-container inline-size;
}

@container my-container (min-width: 768px) {
  .child { background: hotpink; }
}

my-container 关键字通过 container-name 来定位容器查询的容器。inline-size 允许用户更具体地指定包含范围。目前，这意味着我们只能查询容器的 width。使用 size，我们可以查询容器的 height。

从 Chrome 105 版和 Safari 16 版开始，您可以使用容器查询（无需 polyfill）。我强烈建议您快速阅读一下 csswg.org 上的草稿。

开始使用的最简单方法是快速制作几个带有可调整大小的容器元素的演示。

尝试更改 container 值，并查看演示的响应。这些演示使用 container-type: size，它不限制轴。当容器的 height 和 width 都满足某些阈值时，第一个演示中的衬衫尺寸会进行调整。第二个演示展示了轴如何独立工作，其中胡须会改变颜色，但仅在调整水平轴时才会改变。

@container (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --size: "L";
    --scale: 2;
  }
}

这就是您目前需要了解的关于容器查询的内容。它实际上只是几行新的 CSS 代码。

唯一的问题是，到目前为止，我看到的关于容器查询的大多数演示都使用相当标准的“卡片”示例来演示概念。我并不是说卡片不是容器查询的一个很好的用例。卡片组件实际上是容器查询的典型代表。考虑一个通用的卡片设计，以及它在不同布局中使用时可能会受到怎样的影响。这是一个常见的问题。我们许多人在项目中都遇到过这种情况，最终制作了各种卡片变体，所有这些变体都针对使用它们的各种布局。

但卡片并不能激发人们开始使用容器查询的兴趣。我想看到它们被推向更大的极限，做一些有趣的事情。我在那个 T 恤尺寸演示中稍微尝试过它们。我打算等到浏览器支持更好之后再深入研究（我目前是 Brave 用户）。但后来 Bramus 分享了一个容器查询 polyfill！

感谢 @bramus 分享了 @jon_neal 几天前分享的容器查询 polyfill 👏

这促使我开始“黑客攻击”！😅https://#/Em5TLyslip
— Jhey 🐻🛠 (探索机会 ✨) (@jh3yy) 2021年4月30日

这让我开始思考如何“黑客”容器查询。

⚠️ 剧透警告：我的黑客攻击没有奏效。它确实暂时起作用了，或者至少我以为它起作用了。但这实际上是一件好事，因为它引发了更多关于容器查询的讨论。现在有了一个新的容器查询 polyfill。

我的想法是什么？我想创建一些类似于 “复选框黑客” 的东西，但用于容器查询。

<div class="container">
  <div class="container__resizer"></div>
  <div class="container__fixed-content"></div>
</div>

这个想法是，您可以有一个包含可调整大小元素的容器，然后另一个元素以固定定位方式放置在容器外部。调整容器大小可以触发容器查询并重新设置固定元素的样式。

.container {
  container: layout size;
}

.container__resize {
  resize: vertical;
  overflow: hidden;
  width: 200px;
  min-height: 100px;
  max-height: 500px;
}

.container__fixed-content {
  position: fixed;
  left: 200%;
  top: 0;
  background: red;
}

@container(min-height: 300px) {
  .container__fixed-content {
    background: blue;
  }
}

这确实在 cqfill polyfill 的早期版本中有效。

我们可以用容器查询来揭穿经典的 CSS 模因吗？

看到它起作用让我非常兴奋。终于有机会用 CSS 创建 Peter Griffin CSS 模因的版本并揭穿它了！

您可能见过这个模因。它是对级联的嘲讽，以及管理级联的难度。我使用 [email protected]… 创建了演示… 当然，还加入了我自己的小创意。😅

3D CSS Peter 的百叶窗。修复了！有什么大惊小怪的？此演示不使用任何 JavaScript。那么它是如何交互的呢？我正在“黑客攻击”新的容器查询以使这些百叶窗工作。您能看到它是如何实现的吗？codepen.io/jh3y/pen/LYxKjKX 通过 @CodePen
— Jhey Tompkins (@jh3yy) 2021年4月30日

移动绳索手柄会调整元素的大小，进而影响容器的大小。不同的容器断点会将 CSS 变量 --open 从 0 更新到 1，其中 1 等于“打开”，0 等于“关闭”状态。

@container (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@media --css-container and (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@container (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@media --css-container and (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@container (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}
@media --css-container and (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}

但是…. 正如我提到的，这种黑客攻击是不可能的。

嗯，包含 inline-size 不应允许块（高度）查询。您可能正在利用 js polyfill 中的错误进行黑客攻击。

我喜欢这个想法，但我认为这种方法无法在 CSS 中使用容器查询。
— Miriam (但很糟糕) (@TerribleMia) 2021年5月1日

这里很棒的一点是，它引发了关于容器查询工作原理的讨论。它还突出了容器查询 polyfill 中的一个错误，该错误已得到修复。但我希望看到这个“黑客”能够奏效。

Miriam Suzanne 一直在围绕容器查询创建一些很棒的内容。其功能一直在发生变化。这就是走在技术前沿的风险。她最新的一篇文章总结了当前状态。

我很快就会修复它。遵循规范至关重要。

顺便说一句，我有点担心有多少视频和演示依赖于“导出”行为。主分支上尚未发布的代码删除了此要求，因此只需 `import ‘/path/to/cqfill.js’` 即可。
— Jonathan Neal (@jon_neal) 2021年5月2日

虽然我最初的演示/黑客攻击没有奏效，但我们仍然可以使用“调整大小”黑客来创建这些百叶窗。同样，如果我们使用 container-type: size，我们可以查询 height。

请考虑此演示

当容器大小调整时，箭头会旋转。这里的诀窍是使用容器查询来更新作用域内的 CSS 自定义属性。

.container {
  container-type: size;
}

.arrow {
  transform: rotate(var(--rotate, 0deg));
}

@container(min-height: 200px) {
  .arrow {
    --rotate: 90deg;
  }
}

那么我们这里有点像一个容器查询技巧。无法使用第一个黑客概念的缺点是我们无法完全实现 3D 效果。溢出 hidden 会阻止这一点。我们还需要使绳索位于窗口下方，这意味着窗台会挡路。

但是，我们几乎可以做到。

此演示使用容器查询步骤。在每个步骤中，都会更新作用域内的自定义属性。这会显示 Peter 并打开百叶窗。

这里的诀窍是放大容器以使调整大小手柄更大。然后我缩小内容以使其重新适应其应在的位置。

这个有趣的“揭穿模因”演示还没有完全实现，但我们正在接近。容器查询是一个令人兴奋的前景。而且看看它们如何在浏览器支持不断发展的情况下发生变化将会很有趣。人们如何将它们推向极限或以不同的方式使用它们也令人兴奋。

谁知道呢？“调整大小黑客”可能有一天会完美地融入臭名昭著的“复选框黑客”中。

我们可以用容器查询来揭穿经典的 CSS 模因吗？

评论

发表评论 取消回复

发表评论取消回复