2023年 CSS 发展总结

哇！2023 年对 CSS 来说是重要的一年！ 从 #Interop2023 到 CSS 和界面领域的许多新着陆，开发者曾认为在 Web 平台上无法实现的功能。现在，每个现代浏览器都支持容器查询、subgrid、:has() 选择器以及大量新的颜色空间和函数。Chrome 支持仅支持 CSS 的滚动驱动的动画，并且支持通过视图转换在网页视图之间流畅地添加动画效果。最重要的是，为了改善开发者体验（例如 CSS 嵌套和作用域样式），许多新基元已推出。 今年真是非比寻常的一年！因此，我们希望在这一具有里程碑意义的一年结束之际，对浏览器开发者和网络社区为实现这一切而做出的努力，表示感谢和表彰。 请留意功能标题旁边的新 Baseline 徽章！请点击此处了解详情。 = 新增主要浏览器的所有稳定版。 = 在浏览器引擎中提供部分可用性。 架构基础 我们先来了解一下核心 CSS 语言和功能的更新。这些功能是您编写和整理样式的基础，并为开发者提供强大的功能。 Chrome 111 增加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其适用于所有主流引擎。这些函数对于动画和布局来说非常方便。例如，现在您可以更轻松地在以所选中心为中心的圆圈上布置元素。 详细了解 CSS 中的三角函数。 借助 :nth-child() 伪类选择器，您可以按索引选择 DOM 中的元素。您可以使用 An+B 微语法精确控制要选择哪些元素。 默认情况下，:nth-*() 伪代码会考虑所有子元素。从 Chrome 111 开始，您可以选择将选择器列表传递到 :nth-child() 和 :nth-last-child()。这样一来，您就可以在 An+B 执行操作之前预先过滤子项列表。 在下面的演示中，通过使用 of .small 对小玩偶进行预过滤，3n+1 逻辑仅应用于它们。使用下拉菜单可动态更改所使用的选择器。 复杂的第 n-* 选择演示 详细了解复杂的第 n-* 项选择。 Chrome 118 增加了对 @scope 的支持，这是一项 @ 规则，可让您将选择器的范围限定为文档的特定子树。借助作用域样式，您可以非常具体地选择元素，而无需编写过于具体的选择器或将它们与 DOM 结构紧密耦合。 限定作用域的子树由作用域根（上限）和可选的作用域限制（下限）定义。 @scope (.card) { … } /* scoping root */ @scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/ 放置在作用域块内的样式规则只会定位已切出的子树内的元素。例如，以下限定了范围的样式规则仅定位到 .card 元素与 [data-component] 选择器匹配的任何嵌套组件之间的 <img> 元素。 @scope (.card) to ([data-component]) { img { … } } 在以下演示中，由于应用了范围限制，轮播界面组件中的 <img> 元素不匹配。 如需详细了解 @scope，请参阅“如何使用 @scope 限制选择器的覆盖面”一文。在本文中，您将了解 :scope 选择器、特异性的处理方式、无前导范围以及 @scope 对级联的影响。 在嵌套之前，每个选择器都需要单独进行显式声明。这会导致重复、出现大量样式表以及零散的创作体验。现在，您可以将相关样式规则分组到选择器中，从而继续创建选择器。 dl { /* dt styles */ dt { /* dl dt styles */ } dd { /* dl dd styles */ } } /* same as */ dt { /* dt styles */ } dl dt { /* dl dt styles */ } dl dd { /* dl dd styles */ } 嵌套可以减少样式表的重量、减少重复选择器的开销，并集中组件样式。该语法最初发布时存在一个限制，要求在各个位置使用 &，但之后通过嵌套放松的语法更新得到了解除。 借助 CSS subgrid，您可以创建更复杂的网格，并在子布局之间实现更好的对齐。它允许另一个网格内的网格将外部网格的行和列作为自己的行和列，方法是使用 subgrid 作为网格行或列的值。 subgrid 非常适合用来根据彼此的动态内容对齐同级。这可让文案撰写人员、用户体验作者和翻译人员尝试创建“适合”布局的项目副本。借助 subgrid，可以调整布局以适应内容。 详细了解 subgrid。 排版 2023 年，网页排版取得了一些重要更新。text-wrap 属性是一个特别实用的渐进式增强。此属性可实现排版布局调整，无需额外的脚本即可在浏览器中编写。告别尴尬的行长度，体验更具可预测性的排版！ 我们在今年年初在 Chrome 110 中推出 initial-letter 属性，这是一项虽然小巧但功能强大的 CSS 功能，可用于为首字母的放置位置设置样式。您可以将字母的位置调整为放下或抬起。该属性接受两个参数：第一个表示将字母放在相应段落中的深度，第二个表示将字母放在上方字母的升高。您甚至可以结合运用这两种方式，如以下演示所示。 详细了解首字母。 text-wrap: 均衡和美观 作为开发者，您不知道标题或段落的最终大小、字体大小，甚至是语言。有效且美观处理文本换行所需的所有变量均在浏览器中提供。由于浏览器了解所有因素（例如字体大小、语言和分配区域），因此非常适合用于处理高级、优质文本布局。 这就需要我们采用两种新的文本换行技术，一种称为 balance，另一种称为 pretty。balance 值旨在创建一个和谐的文本块，而 pretty 旨在防止孤立字符并确保健康的断字。传统上，这两项任务都是手动完成的，将这项工作交给浏览器，让它支持任何翻译的语言，真是太棒了。 详细了解 text-wrap: 余额。 颜色 2023 年是网络平台缤纷多彩的一年。有了支持动态配色主题的新颜色空间和函数，您依然能够打造鲜艳明快、用户值得拥有的主题，并且允许您自定义这些主题！ 从硬件到软件，再从 CSS 到闪烁的灯光；我们的计算机需要做大量的工作来尝试呈现人眼所能看到的色彩。2023 年，我们将推出新的颜色、更多颜色、新的颜色空间、颜色函数以及新功能。 CSS 和颜色现在可以： - 检查用户的屏幕硬件是否支持广色域 HDR 颜色。 - 检查用户的浏览器能否理解 Oklch 或 Display P3 等颜色语法。 - 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等中指定 HDR 颜色。 - 使用 HDR 颜色创建渐变； - 在替代颜色空间中插入渐变。 - 使用 color-mix() 混合颜色。 - 使用相对颜色语法创建颜色变体。 详细了解颜色 4 和颜色空间。 混合颜色是一项经典任务，在 2023 年，CSS 也可以做到这一点。您不仅可以为颜色混合白色或黑色，还可以混合透明度，并且可以在您选择的任何颜色空间中执行所有这些操作。它既是基本颜色功能，也是高级颜色功能。 您可以将 color-mix() 视为渐变中的时刻。如果渐变显示的是从蓝色变为白色的所有路段，则 color-mix() 仅显示一步。一旦您开始考虑颜色空间，并了解混合颜色空间与结果有何不同，您的工作便会更进一步。 详细了解 color-mix()。 相对颜色语法 相对颜色语法 (RCS) 是对 color-mix() 的补充，用于创建颜色变体。它比 color-mix() 更强大，但同时也是不同的颜色处理策略。color-mix() 可能会混入白色来调亮颜色，通过 RCS 可以精确访问亮度通道，并能够在通道上使用 calc()，以编程方式降低或提高亮度。 RCS 可让您对颜色进行相对和绝对处理。相对变化是指采用当前的饱和度或亮度值，并使用 calc() 进行修改。绝对变化是指将渠道值替换为全新的值，例如将不透明度设置为 50%。此语法可为时间变体等提供有意义的主题设置工具。 详细了解相对颜色语法。 自适应设计 自适应设计于 2023 年发展。这一开创性的一年促成了多项新功能，这些功能彻底改变了我们构建响应式 Web 体验的方式，并开创了基于组件的自适应设计的新模式。容器查询和 :has() 的组合支持各种组件，这些组件能够根据其父级的大小及其任何子级的存在或状态来拥有自适应样式和逻辑样式。这意味着，您最终可以将页面级布局与组件级布局分开，只需编写一次逻辑即可在所有位置使用您的组件！ 容器查询支持查询网页中父元素，而不是使用视口的全局尺寸信息来应用 CSS 样式。这意味着，您可以在多个布局和多个视图中为组件设置动态样式。在今年的情人节（2 月 14 日）当天，所有现代浏览器对容器大小的查询都变得稳定了。 如需使用此功能，请先在要查询的元素上设置元素，然后与媒体查询类似，使用带有尺寸参数的 @container 来应用样式。除了容器查询，您还可以获得容器查询大小。在以下演示中，容器查询大小 cqi（表示内嵌容器的大小）用于调整卡片标头的大小。 详细了解如何使用容器查询。 在 Chrome 111 中，样式查询已部分实现。通过目前的样式查询，您可以在使用 @container style() 时查询父元素上的自定义属性的值。例如，查询自定义属性值是否存在，或者是否设置为特定值（例如 @container style(--rain: true)）。 尽管这听起来类似于在 CSS 中使用类名称，但样式查询具有一些优势。首先，对于样式查询，您可以根据伪状态的需要更新 CSS 中的值。此外，在未来版本的实现中，您将能够查询值的范围（例如 style(60 <= --weather <= 70)）和根据属性-值对（例如 style(font-style: italic)）来确定应用的样式。 详细了解如何使用样式查询。 近 20 年来，开发者一直要求在 CSS 中使用“父级选择器”。利用 Chrome 105 中随附的 :has() 选择器，现在已能做到这一点。例如，使用 .card:has(img.hero) 会选择以主打图片作为子级的 .card 元素。 由于 :has() 接受相对选择器列表作为其参数，因此您可以选择比父元素更多的内容。使用各种 CSS 组合器，可以在 DOM 树中向上，也可以进行横向选择。例如，li:has(+ li:hover) 会选择当前悬停的 <li> 元素之前的 <li> 元素。 详细了解 CSS :has() 选择器。 借助 update 媒体查询，您可以使界面适应设备的刷新率。该功能可以报告 fast、slow 或 none 值，这些值与不同设备的功能相关。 您设计的大多数设备都可能具有较快的刷新率。这包括桌面设备和大多数移动设备。电子阅读器以及低能耗付款系统等设备的刷新率可能会较慢。了解设备无法处理动画或频繁更新，意味着您可以节省电池电量或减少错误的视图更新。 脚本媒体查询可用于检查 JavaScript 是否可用。这对于渐进式增强非常有用。在此媒体查询推出之前，一个用于检测 JavaScript 是否可用的策略是在 HTML 中放置一个 nojs 类，然后使用 JavaScript 将其移除。这些脚本可以移除，因为 CSS 现在可以检测 JavaScript 并进行相应调整。 了解如何通过 Chrome 开发者工具在网页上启用和停用 JavaScript 以进行测试。 假设有一个网站上的主题切换，由于没有 JavaScript 可用，脚本媒体查询有助于使切换符合系统偏好设置。或者考虑使用 switch 组件 - 如果 JavaScript 可用，那么只需通过手势来滑动开关，而不必打开和关闭。如果脚本可用，就可以有大量升级用户体验的机会；如果停用脚本，则可以提供有意义的基础体验。 非不透明界面可能会引起头痛，或者让各类视力缺陷造成视觉障碍。因此，Windows、macOS 和 iOS 设有系统偏好设置，可以降低或移除界面的透明度。这个针对 prefers-reduced-transparency 的媒体查询非常适合使用其他偏好设置媒体查询，这让您可以既能发挥创意，又能为用户做出调整。 在某些情况下，您可以提供一种不会将内容叠加在其他内容上的备用布局。在其他情况下，可以将颜色的不透明度调整为不透明或几乎不透明。下面博文中提供了更多鼓舞人心的演示，可根据用户偏好进行调整。如果您想了解此媒体查询何时会很有价值，不妨看看这些演示。 详细了解 @media (prefers-reduced-transparency)。 互动是数字体验的基石。它可帮助用户获得关于他们点击的内容以及他们在虚拟空间中的位置的反馈。今年，出现了许多激动人心的功能，这些功能使互动更易于编写和实现，实现了流畅的用户体验历程和更精细的网络体验。 视图过渡会对网页的用户体验产生巨大影响。借助 View Transitions API，您可以在单页应用的两个页面状态之间创建视觉过渡。这些转换可以是整页转换，也可以是网页上某些较小的转换，例如向列表中添加或移除新项。 View Transitions API 的核心是 document.startViewTranstion 函数。传入将 DOM 更新为新状态的函数，此 API 会为您处理所有工作。为此，它会拍摄前后快照，然后在两者之间转换。使用 CSS，您可以控制捕获的内容，并视需要自定义这些快照的动画呈现方式。 Chrome 111 中随附的适用于单页应用的 View Transitions API。详细了解视图转换。 别让此函数的名称欺骗您。借助 linear() 函数（不要与 linear 关键字混淆），您可以用简单的方式创建复杂的加/减速函数，同时损失一些精度。 在 Chrome 113 中提供 linear() 之前，您无法在 CSS 中创建弹跳或弹簧效果。得益于 linear()，我们可以通过将这些加/减速简化为一系列点，然后在这些点之间进行线性插值来近似计算这些加/减速类型。 弹跳缓和曲线的图表，其中添加了几个点 以蓝色显示的原始弹跳曲线可通过以绿色显示的一组关键点简化。linear() 函数使用这些点并在它们之间线性插值。 详细了解 linear()。如需创建 linear() 曲线，请使用线性加/减速生成器。 许多界面包含滚动互动，有时界面需要同步与当前滚动位置相关的信息，或根据当前状态提取数据。在 scrollend 事件之前，您必须使用不准确的超时方法，该方法可以在用户的手指仍在屏幕上时触发。借助 scrollend 事件，您可以实现精确计时的 scrollend 事件，了解用户是否仍在进行手势操作。 这对浏览器拥有非常重要，因为在滚动过程中，JavaScript 无法跟踪手指在屏幕上的存在，而相关信息就是无法获得。现在可以删除大量不准确的滚动结束尝试代码，并将其替换为浏览器拥有的高精确度事件。 滚动条驱动的动画是 Chrome 115 中推出的一项令人兴奋的功能。借助此类动画，您可以提取现有的 CSS 动画或使用 Web Animations API 构建的动画，并将其与滚动条的滚动偏移量相结合。当您上下滚动（或在水平滚动条中左右滚动）时，关联的动画会以直接响应的方式向前和向后拖动。 使用 ScrollTimeline 时，您可以跟踪滚动条的整体进度，如以下演示所示。当您滚动到页面底部时，文本会逐个字符地显示。 借助 ViewTimeline，您可以在元素穿过滚动端口时对其进行跟踪。这与 IntersectionObserver 跟踪元素的方式类似。在下面的演示中，每张图片从进入滚动端口的那一刻开始展示，一直显示到位于中心位置。 由于滚动驱动的动画支持 CSS 动画和 Web Animations API，因此您可以受益于这些 API 带来的所有优势。这包括使这些动画在主线程之外运行的能力。现在，您只需添加几行额外的代码，即可拥有丝滑顺滑的动画、由滚动操作驱动、在主线程之外运行，还有什么不喜欢呢？ 如需详细了解滚动条驱动的动画，请参阅这篇文章及其所有详细信息，或访问 scroll-driven-animations.style，其中包含许多演示。 通过 CSS 应用滚动驱动的动画时，查找控制滚动条的查询机制始终向上遍历 DOM 树，因而仅限于滚动祖先实体。但通常情况下，需要添加动画效果的元素不是滚动条的子元素，而是位于完全不同的子树中的元素。 若要允许动画元素查找非祖先实体的已命名滚动时间轴，请对共享父项使用 timeline-scope 属性。这样一来，就可以将具有该名称的已定义 scroll-timeline 或 view-timeline 附加到其中，从而赋予其更广泛的范围。这样，该共享父级的任何子级都可以使用具有该名称的时间轴。 直观呈现了在共享父项上使用时间轴作用域的 DOM 子树 在共享父级上声明 timeline-scope 后，滚动条上声明的 scroll-timeline 可供使用该滚动条作为 animation-timeline 的元素找到详细了解 timeline-scope。 2023 年的另一个新功能是能够为离散动画添加动画效果，例如在 display: none 之间添加动画效果。从 Chrome 116 开始，您可以在关键帧规则中使用 display 和 content-visibility。您也可以在 50% 点（而不是 0% 点）处转换任何离散属性。这可以通过 transition-behavior 属性（使用 allow-discrete 关键字）来实现，或在 transition 属性中作为一种简写形式来实现。 详细了解如何转换离散动画。 @starting-style CSS 规则以新的 Web 功能为基础，用于在 display: none 之间添加动画效果。此规则可用于为元素指定“before-open”样式，让浏览器在元素打开网页之前可以查询到该样式。这对于进入动画以及为弹出式窗口或对话框等元素添加动画效果非常有用。如果您要创建元素并希望为其提供动画效果，此功能也非常实用。以下示例将 popover 属性（参见下一部分）以动画形式呈现，使其从视口外平滑进入视图并进入顶层。 您可以向转场中添加新的 CSS overlay 属性，让具有顶层样式（例如 popover 和 dialog）的元素顺畅地从顶层呈现动画效果。如果您未使用叠加层过渡，您的元素会立即恢复为经过剪裁、转换和覆盖的状态，并且您将无法看到过渡效果。同样，overlay 可让 ::backdrop 在添加到顶层元素后流畅地呈现动画效果。 详细了解叠加层和其他退出动画。 组件 2023 年是样式和 HTML 组件交汇的重要一年，我们实现了 popover 的落地，围绕锚点定位和样式下拉菜单的未来发展也进行了很多工作。这些组件可让您更轻松地构建通用界面模式，而无需依赖于其他库，也不必每次从头开始构建自己的状态管理系统。 Popover API 可帮助您构建叠加在页面其余部分的元素。这些内容可能包括菜单、选项和提示。若要创建简单的弹出式窗口，您可以向弹出的元素添加 popover 属性和 id，然后使用 popovertarget="my-popover" 将其 id 属性与调用按钮相关联。Popover API 支持： 晋升到顶层。弹出式窗口会显示在网页其余部分之上的单独图层上，因此您无需调整 Z-index。 轻关闭功能。点击弹出窗口区域以外的位置将关闭弹出窗口并返回焦点。 默认焦点管理。打开弹出式窗口会使下一个标签页停止在弹出式窗口内显示。 无障碍键盘绑定。点按 esc 键或双重切换按钮会关闭弹出式窗口并返回焦点。 可访问的组件绑定。从语义上将弹出式窗口元素连接到弹出式窗口触发器。 选择中的水平规则 今年，Chrome 和 Safari 对 HTML 做出了另一项细微更改，即能够在 <select> 元素中添加水平规则元素（<hr> 标记），从而在视觉上拆分您的内容。以前，将 <hr> 标记放入 select 中根本不会呈现。但今年，Safari 和 Chrome 都支持此功能，从而更好地分隔 <select> 元素中的内容。 :user-valid 和 :user-invalid 在所有浏览器中都很稳定，其行为类似于 :valid 和 :invalid 伪类，但仅在用户与输入内容进行明显互动后，才会匹配表单控件。必填且空的表单控件将与 :invalid 匹配，即使用户尚未开始与页面互动也是如此。除非用户更改了输入内容并将其置于无效状态，否则该控件不会匹配 :user-invalid。 有了这些新的选择器，不再需要编写有状态代码来跟踪用户更改的输入。 详细了解如何使用 user-* 表单验证伪元素。 网络上常见的界面模式是手风琴式折叠组件。如需实现此模式，您需要组合一些 <details> 元素，通常会以视觉方式将它们分组，以表明它们属于同一个元素。 Chrome 120 中新增了对 <details> 元素的 name 属性的支持。使用此属性时，具有相同 name 值的多个 <details> 元素会形成语义组。组内最多只能有一个元素同时打开：当您打开组中的某个 <details> 元素时，之前打开的那个元素将自动关闭。这种类型的手风琴称为独占手风琴。 独占手风琴中的 <details> 元素不必是同级元素。它们可能分散在文档中。 总结 CSS 在过去几年内（尤其是在 2023 年）大获成功。如果您是 CSS 新手或只想复习一下基础知识，请查看我们的免费学习 CSS 课程以及 web.dev 上提供的其他免费课程。 祝您节日快乐，同时希望您很快就能在工作中融入部分精彩的新 CSS 和界面功能！