使用容器和范围CSS查询的组件驱动的响应式设计

使用新的容器和范围查询，CSS终于追上了组件驱动的革命。

在过去的几年里，组件驱动设计在Web开发者中已经变得非常流行。这不仅是因为对这种开发策略的需求越来越大，而且还得益于解决了过去CDD方式的挑战的新工具。其中最主要的可以说是Bit，它不仅在独立开发组件方面发挥了重要作用，而且最重要的是，在Web开发世界中使用新的实体–“独立组件“进行跨项目的组件协作。

• teambit/bit
• 独立组件。网络的新构件

然而，有一样东西无法跟上这种演变。CSS!

等待已经结束了!

CSS将通过引入一些新的查询来彻底改变响应式设计的概念。这些将直接增强基于组件的设计景观。

让我在这篇文章中给你一个简单的见解。

使用@container从基于页面的响应式设计转换到基于容器的响应式设计。

我们大多数人仍然依赖基于视口的媒体查询（@media）来支持不同的屏幕尺寸。

然而，当我们的设计变得更加模块化和模式化时——。

• 我们在细微的层次上做出设计决定。但是，CSS要求我们将这些样式绑定到一个更大的、往往是不相关的 “页面 “的抽象概念上
• 此外，CSS限制了它在没有任何外部框架帮助的情况下向组件添加响应式样式的能力。

在最新的补充中，CSS通过引入一个名为@container的新查询来弥合这一差距。

在比特平台上部署的容器查询的效果演示

请看在bit.dev上作为组件共享的完整示例（这只有在使用Chrome Canary时才能正常运行）。

bit.dev/enlear/css-…

容器查询的强大能力。

1.控制单个组件的响应行为的能力

使用容器查询，我们可以查询其父辈分配给一个组件的空间量。

因此，子组件可以独立地应用样式，这取决于其父组件的可用尺寸和动态性。

简单地说，我们不必再为奇怪的布局异常而计划为我们的组件应用样式。

组件拥有自己的响应能力，可以生活在响应式设计的任何地方。我们可以将设计的重点重新放在组件本身上，使它们更加健壮、灵活和可共享。

下面的图片展示了两个相同的卡片组件，在不同的容器尺寸下，如何使用容器查询来分别表现。

使用@container控制单个组件的响应行为。源于此。文章作者：Una Kravets。

此外，一个基于组件的设计也可以通过完全使用Container查询来实现响应性。

下面的图片显示了几个购物卡，它们在不同的视图中用Container查询显示。

示范如何使用@container使整个页面响应。源于此。文章作者：Una Kravets。

每张商品卡都会根据分配给它的容器的空间来设计自己的样式，如果我们只依靠全局和视口样式，这是不可能做到的。

有了这些补充，它为创建真正的模块化应用打开了大门。

3.能够将微观布局与宏观布局分开。

我们可以通过使用容器查询（Container query）对单个组件进行样式设计来增强微观布局，而宏观布局（整个页面）则可以使用媒体查询（media queries）进行样式设计。

媒体查询与容器查询的结合使用，使我们对响应式设计的控制达到一个新的水平。下面是一个关于我们如何分别控制微观和宏观布局的例子。

整个日历的布局从单面板转变为多面板，这是在宏观层面上使用媒体查询。而容器查询会影响宏观布局，改变日期和事件。

使用@container和@media分别控制宏观和微观布局。源于此。文章作者：Una Kravets。

注：由于@container仍处于测试阶段，你可以暂时在Chrome Canary中试用@container。

1. 在Canary中进入_chrome://flags_。
2. 打开_Enable-container-queries_标志。

这里需要注意的一个基本事项是，我们可以把微观和微观层面的布局设计成组件。这将有助于建立一个作为基础的设计系统，甚至可以随着时间的推移扩展到微型前端。

引入@scope来隔离组件的样式

我们都知道，在没有全局样式的影响下，独立地为组件设计样式是相当棘手的。

默认情况下，使用一个单独的样式表会使它们成为全局的。即使我们把样式放在组件定义的旁边，这些样式也会在编译时被捆绑，并在运行时被注入到页眉中。我们都知道，在没有全局样式的影响下，独立地为组件设计样式是相当棘手的。

默认情况下，使用一个单独的样式表会使它们成为全局的。即使我们把样式放在组件定义的旁边，这些样式也会在编译时被捆绑，并在运行时被注入到页眉中。实际上，它们不会被束缚在原始组件上，碰撞是不可避免的。

然而，我们一直在用框架和CSS模块等插件来克服这些挑战。

对我们来说很幸运。

引入了Scoped Styles，用可读的CSS将组件的样式原生地封装在组件级别。

在范围样式的帮助下，我们可以指定保持一个特定的样式，或者跳出这个范围，为一个组件引用一个更全局的样式。

考虑到用户定制和形式因素

如前所述，网页设计的宏观和微观布局可以使用容器和范围查询独立控制。

然而，我们可以看到现代设备的发展必然会超越传统的平面屏幕。

因此，我们需要为我们的应用程序准备好新的外形因素，如双屏、可折叠或变形的屏幕设备。

CSS正试图通过引入跨越屏幕的媒体查询来解决这些问题。

创建形式因素的响应性设计

跨越式媒体查询（@media (spanning: )）将被引入，以使开发者能够建立针对双屏和可折叠屏幕的优化布局。

这可以用来识别显示是否跨越多个区域以及显示区域的配置（垂直或水平）。

跨越屏幕的区域。来源。微软Edge解释者

以下是建议的语法。

• single-fold-vertical：布局视口有两个显示区域，并且折叠是垂直的。
• single-fold-horizontal：布局视口有两个显示区域，并且折叠是水平的。
• none：窗口不在跨度模式中

借助于这个功能，开发者将能够防止用户界面中不必要的中断和错位。

允许设计个性化

借助媒体查询中的用户偏好 ，我们可以定制UI设计，以满足用户在其设备操作系统上的偏好。

它有助于为每个用户建立一个更灵活和个性化的设计，特别是那些有可访问性需求的用户。

其中一些可配置的偏好是。

1. 偏好-减少-动作。对于那些将操作系统偏好设置为减少动作的用户，它可以减少动画、过渡和其他华丽动作在屏幕上的效果。
2. 偏爱对比度。它能够为那些喜欢高对比度内容的用户提供与原始设计相比的内容。
3. **偏好-减少-**透明度。它通过分析用户操作系统中的设置，减少半透明的分层效果。
4. prefers-color-scheme。可以根据用户在其操作系统中的偏好设置，将UI主题定制为浅色、深色或自动主题。
5. **inverted-**color：这可以用来根据用户的偏好来反转屏幕上的颜色。

总结

在我看来，CSS的新特性的主要目标是降低将响应式样式整合到基于组件的网页设计中的负担。

它们允许我们将组件样式与页面布局、全局样式和用户样式隔离开来。此外，它还能帮助我们将宏观布局与微观布局分开，并相应地应用具有个性化的样式。

源于此。文章作者：Una Kravets。

希望这些新增的功能能够彻底改变我们的设计实践，并为未来具有难以想象的屏幕布局的设备做好准备。

今天就自己开始探索新的响应式设计吧!

了解更多

• 使用Bit的Storybook
• 构建React组件库–正确的方法
• 构建一个React设计系统，以便于采用和扩展
• 独立组件。网络的新构件

---

使用容器和范围CSS查询的组件驱动的响应式设计》最初发表在《Bits and Pieceson Medium》上，人们在这里通过强调和回应这个故事来继续对话。