[前端好文翻译]新技术：组件驱动世界中的网页设计

时间：2023-09-27 06:12:02 | 来源：网站运营

时间：2023-09-27 06:12:02 来源：网站运营

[前端好文翻译]新技术：组件驱动世界中的网页设计：原文链接：The new responsive: Web design in a component-driven world

以下为全文翻译和笔者思索：

---

今日的响应式设计

今天，当使用术语”响应式设计”时，你很可能考虑的方案是在利用媒体查绚在手机、平板和桌面布局进行切换。

但很快，这种响应式设计布局的概念会和（古老的）表格式布局一样过时了。

基于视口的媒体查询给了你一些强大的工具能力，但也相对丧失了技巧。这样做缺乏响应用户需求的能力，也缺乏将响应式的样式注入组件本身的能力。

在本文中提到组件时，指代的是元素，包括由其他元素组成的元素，如卡片或侧边栏。这些组件组成了我们的网页

你可以使用全局的视口信息来设置组件的样式，但组件仍然不拥有自己的样式，而且当我们的设计系统基于组件而不是基于页面时，这就行不通了。

好消息是，生态系统正在改变，而且进步非常迅速。CSS正在发展中，一个新的响应式设计时代即将到来。

我们大约每10年就会看到这种情况发生一次。10年前，大约在2010-2012年，我们看到了移动和响应式设计的巨大变化，以及CSS3的出现。






来源：Web Design Museum

因此，生态又一次为CSS的一些重大变化做好了准备。Chrome和跨web平台的工程师们正在为下一个响应式设计时代进行原型设计、规范设计并且开始着手实现。

这些更新包括基于用户偏好的媒体功能、容器查询以及新屏幕类型（如可折叠屏幕）的媒体查询。

基于用户的响应式

新的用户偏好媒体功能，能够让你根据用户自身的特定偏好和需求来设计web体验。这意味着首选媒体功能允许你根据用户的经验来调整用户体验

这些用户媒体偏好功能包括：

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• And more

偏好选项功能会获取用户在其操作系统中的偏好设置，帮助构建更加健壮和个性化的web体验，特别是对于那些具有可访问性需求的用户。

prefers-reduced-motion

用户在操作系统中设置了偏好减弱动态效果(reduced motion)，意在总体使用电脑时只需较少的动画效果。因此，这些人在浏览网页中很可能不会欣赏华丽的介绍屏幕、卡片旋转动画、复杂的加载提示或者其他浮夸的动画效果。

使用prefers-reduced-motion你可以在设计页面时考虑减少动态效果，同时也为哪些并未开启此项偏好的用户创造增强的动画体验。

演示视频

上述视频链接中的例子卡片在正反面都有信息。在基础的动态减弱体验下是一个交叉淡入的显示，而动态增强下的体验是进行一个卡片翻转。

动态减弱并不意外着“没有动态”，因为动态在网页中的传达信息起到了至关重要的作用。相反，你应该使用一个坚实的、去除非必须的动效基础体验去引导这些用户，同时逐步增强没有此项偏好设置的其他用户的体验。

prefers-color-scheme

另一个偏好媒体设置是偏好配色方案。这个功能帮助你根据用户喜好定制个性化的主题UI。无论是在他们的台式机还是移动设备上，用户都可以设置浅色、深色或随一天的时间变化的自动切换主题。

如果在你的页面使用了css自定义变量，那么切换颜色值会变得相当简便。你可以快速的更新主题颜色值，例如backgroundColor和textOnPrimary，以便在媒体查询中动态适配新主题。

演示视频

为了更方便的测试这些偏好值，你可以使用开发者工具去模拟，而不是每次都打开系统首选项进行更改。

演示视频

适配深色主题

当为深色主题设计时，不仅仅是反转背景、文本颜色或深色滚动条。还有一些细节你可能没有意识到。例如，你可能需要降低深色背景上的颜色饱和度，以减少视觉抖动。







不同于利用阴影创造深度并将元素突出，你可能需要在元素背景色使用一些灯光来让其前置。这是因为阴影深设色背景下不会那么有效。

演示视频

Material design在深色主题的设计上有指导意义

深色主题不仅仅提供了个性化的用户体验，并且还可以显著的提供AMOLED屏幕的电池寿命（ps：笔者对这方面存疑，有相关数据支持么？例如全天候使用深色主题能在延长多久电池的寿命）。这些屏幕通常用在较新的高端手机上，并且在移动设备之中越来越流行。







一项2018年安卓对于深色主题的研究显示，根据屏幕亮度和整体用户界面的不同，耗电量最多可以节省60%。这60%的统计数据来源是，分别使用使用暗主题和亮色主题，比较在100%屏幕亮度下的Youtube暂停视频页面的耗电量。

你应该尽可能的为你的用户提供一个深色主题体验。

基于容器的响应式

CSS中最令人兴奋的新领域之一便是容器查询，也被称为元素查询。
很难低估从从基于页面的响应式设计到基于容器的响应式设计的转变，对设计生态系统的发展起到什么作用。

下面是容器查询提供的强大功能的一个示例。你可以操纵卡片元素的任何样式，包括链接列表、字体大小和基于其父容器的总体布局：

演示视频

这个例子展示了两个具有两个不同容器大小的相同组件，它们都使用了CSS Grid布局中的空间。每个组件都适配了其独特的空间分配，并相应地调整自己的样式。

这种灵活性单凭媒体查询是无法实现的。

容器查询为响应式设计提供了一种更加动态的方法。这意味着，如果你将此卡片组件放在侧边栏或英雄视图部分中，或者放在页面主体内部的grid中，则该组件本身根据容器而不是视口进行响应式的信息展示。

这需要@container规则，其工作方式与使用@media的媒体查询类似，但相反，@container查询父容器以获取信息，而不是视口和浏览器的UserAgent。

.card { // 笔者注：contain属性可以声明当前元素和它的内容独立于 DOM 树的其他部分 // size: 表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸 // layout: 表示元素外部无法影响元素内部的布局，反之亦然 contain: size layout;}@container (max-width: 850px) { .links { display: none; } .time { font-size: 1.25rem; } /* ... */}首先，在父元素上进行contain限制（ps：contain属性解释）。然后，编写一个@container查询，使用minwidth或max width，根据容器的大小设置容器中任意元素的样式。

上面的代码使用了max width，在容器宽度小于850px时，将链接设置为display:none，并减小了时间字体的大小。

容器查询卡片

在这个植物演示网站中，每个产品卡片，包括激活的卡片、最近查看项目的侧边栏和产品网格，都是完全相同的组件，具有相同的标记。

视频演示

这里没有基于整个布局的媒体查询，只有容器查询。这允许每个产品卡转换到适当的布局以填充其空间。例如，在Grid中使用minmax列布局让元素流入它们的空间，并在空间过于压缩时重新布局网格（这意味着它达到了最小限制）。

.product { contain: layout inline-size;}@container (min-width: 350px) { .card-container { padding: 0.5rem 0 0; display: flex; } .card-container button { /* ... */ }}当网格中至少有350px的空间时，通过设置display:flex（默认的flex方向为“row”）让卡片布局保持水平。

当空间越小，产品卡片就越堆叠。每个产品卡片都有自己的风格，单凭整体样式风格是无法实现的。

混合使用容器查询和媒体查询

容器查询有很多用例，其中一个是日历组件。你可以使用容器查询，根据日历事件和其他片段的父组件可用宽度进行布局重新排布。

视频演示

此个演示中，容器查询更改了日历日期和星期几的布局和样式，以及调整计划事件的边距和字体大小，以帮助它们更好地适应空间。

然后，使用媒体查询让整个布局适配较小的屏幕尺寸。此示例展示了将媒体查询（调整全局或宏样式）与容器查询（调整容器的子元素及其微样式）结合在一起的强大功能。

所以现在我们可以思考在同一个UI组件中的宏和微布局，以实现一些细致入微的设计决策。

今日使用容器查询

这些演示现在可以在Chrome手动开启实验性功能去体验。在浏览器中输入about://flags并打开#enable container querys标志。这将支持contain属性，以及@container、inline size和block size值以及布局网格实现。

作用域样式

为了完善容器查询，CSS工作组还在积极讨论作用域样式，以帮助为组件提供适当的命名空间来避免冲突。







作用域样式允许传递和特定于组件的样式，以避免命名冲突，许多框架和插件（如CSS模块）已经允许我们在框架内这样做。这个规范现在允许我们用可读的CSS为组件编写本机封装的样式，而无需调整标记。

/* @scope (<root>#) [to (<boundary>#)]? { … } */@scope (.tabs) to (.panel) { :scope { /* targeting the scope root */ } .light-theme :scope .tab { /* contextual styles */ }}作用域允许我们创建“油炸圈饼形”选择器，在这里我们可以指定在何处封装样式，以及在何处突破作用域限制以使用全局样式。

一个例子是选项卡面板，我们希望选项卡获得范围样式，选项卡中的面板获得父样式。

基于尺寸外型的响应式

在响应式设计的新时代，要讨论的下一个话题是尺寸外型的转变，以及作为一个网络社区，我们需要为之进行设计的可能性越来越大（比如变形屏幕或虚拟现实）。




可折叠或灵活的屏幕，为这种屏幕跨度的设计是今天一个我们可以看到形式变化的例子。而屏幕延伸是另一个正在研究的规范，以涵盖这些新的尺寸和需求。

一个实验性的跨屏媒体查询可以帮助我们。它当前的行为如下：@media（跨度：<type of fold>）。演示设置了一个包含两列的网格布局：一列的宽度为—sidebar width，默认情况下为5rem，另一列为1fr。当在具有单个垂直折叠的双屏幕上查看布局时，—sidebar width的值将用左折叠的环境值更新。

:root { --sidebar-width: 5rem;}@media (spanning: single-fold-vertical) { --sidebar-width: env(fold-left);}main { display: grid; grid-template-columns: var(--sidebar-width) 1fr;}这将启用一个布局，其中侧边栏（本例中的导航）将填充其中一个折叠的空间，而app UI将填充另一个折叠空间。这可以防止UI中出现“折痕”。

视频演示

你可以在chrome的devtools模拟器中测试可折叠屏幕，来直接的调试可延展屏幕在浏览器中的显示。

总结

探索平面屏幕之外的UI设计是容器查询和样式作用域如此重要的另一个原因。它们使您有机会从页面布局、全局样式和用户样式中孤立组件样式，从而实现更具弹性的响应设计。这意味着您现在可以使用基于页面的媒体查询设计宏布局，包括跨屏幕的细微差别。同时在组件上使用带有容器查询的微布局，并添加基于用户偏好的媒体查询，来实现基于用户的独特偏好和需求的定制化体验。







这就是新的响应式。

它结合了宏布局和微布局，最重要的是，也将用户定制化和尺寸外型都考虑其中。

这些变化中的任何一个都将构成我们对web设计方式的重大转变。但它们结合在一起，意味着我们甚至在概念化响应性设计方面的一个巨大转变。是时候思考不止步于视口大小的响应性设计了，并开始考虑所有这些新方向，来获得更好的基于组件和定制化的体验。

响应式设计的下一个时代已经到来，你已经可以自己开始探索了。

web.dev/learnCSS （原作者广告）

现在，如果你想提升你的CSS技能，或者重温一些基础知识，我的团队将在web.dev上推出一个全新的、完全免费的CSS课程和参考资料。你可以通过web.dev/learnCSS访问它。

我希望你喜欢这篇关于下一个响应式设计时代的概述，以及随之而来的一些概念，希望这些对未来web设计的意义让你和我一样感到兴奋。

---

笔者小记

本篇文章的作者从设计角度出发阐述了最前沿的响应式概念。这些崭新的概念、标准的提出和演示demo都令人眼前一亮。

遥想当年响应式bootstrap框架在2012年横空出世，重构了人们对浏览器网页的布局想象。时至今日，这个经典的css框架依然不为过时，里面严谨的样式编写和层次结构都是值得细读学习的。现如今。伴随着硬件的快速发展，w3c规范的标准也朝着归一的方向稳步发展进步着。更为宽广的前端领域正在一步步走向每个用户和开发者。

作者从多个方向指出的响应式理念都是很有前瞻性的。无论是基于用户个性化定制，抑或是以容器响应式进行的微布局理念，都是css标准团队扫清了障碍，给了开发者和设计师们一个大展拳脚的空间。

css作为前端三剑客之一，也陪前端coder度过了相当长的岁月。对于这个语言，想必大家也是爱恨交加吧。在Javascript和Typescript快速发展的同时，css的学习相对就显得占比不足了。对于这门语言，想入门确实简单。随便从w3c网站看个1个小时就能写出一些正常的布局。但是在面试过程之中，谁又有十足的把握说自己精通css呢？但成为一个合格的前端工程师，即离用户最近的开发人员，对这门语言的深入学习依然是迈不开的一道门槛。

诚然，在互联网快速发展的今天，大多数公司的实际需求场景依然是业务驱动为主。可能绝大多数项目迭代甚至都不涉及响应式布局的考量，至多也就是用rem进行一个简单的显示适配。也许设计师并未站在开发的同一角度，或者是产品并不关心这方面的内容。但我们不应停止这方便的思索，积极的沟通和交流，将w3c的规范和caniuse兼容的标准吸纳并延伸至需求讨论和交互设计中去。

毕竟，用自己的才智和代码实现一个健全又生动的网页应用才是最终的目标啊。