揭秘 Google I/O Web 新动态，看这一篇就够了！

大家好，我是童欧巴，本文将会和大家一起回顾 2024 Google I/O 的一篇主题演讲 “Web 新动态”。

回顾原则是挑干的讲，感兴趣大家可以去看完整版视频，链接在文末。

本次主题演讲的演讲者是 Rachel Andrew，Chrome 开发者关系团队的内容负责人，演讲的主题是近期跨浏览器可用的功能新动态。

Baseline

浏览器中的新功能是非常令人兴奋的，开发者喜欢了解正在被浏览器开发的新功能。但使用它们之前，有很多挑战需要面对：

• 由于浏览器支持的差异，使用这些新功能并不总是那么容易。
• 即使这些功能在所有浏览器中全部可用，跟踪进展并知道哪些功能可以开始使用也是不容易的。

Google 的研究和 State of CSS 的调查结果显示：

• 21% 的开发者表示，跟进 Web 标准的新功能是他们面临的主要挑战之一。这一挑战仅次于排名第一的挑战，即测试端到端用户流程。
• 同样，有 21% 的开发者认为，跟上 web 标准的变化是一大挑战。

向现有 API 添加新功能时，我们不得不考虑如下问题：

• 如何知道这个功能变化已经发生？
• 如何了解这个功能变化？
• 这个功能是否可以生产使用？

还有一个主要挑战是如何让设计或用户体验在不同浏览器中表现一致。

这些挑战在每次调查结果中都会出现，它们始终是 web 开发者面临的主要问题。

为了解决这些问题，去年 Google I/O 上推出了 Baseline[1]，作为一种快捷方式来明确告知开发者新功能何时可以使用。

过去一年里，Rachel Andrew 团队一直在与 WebDX 社区小组[2]合作，发展和推广这个概念：

• 需要强调的是，这不仅仅是 Google 的项目，这是与其他浏览器厂商的代表以及社区广泛合作的成果。
• 工作组作为 Baseline 的治理小组，确保在决策中反映出广泛的意见和经验，主打一个听劝。

Baseline Newly Available

基准新功能(Baseline Newly Available)意味着在如下核心浏览器中是可以互操作(兼容)的：

• Chrome(Desktop 和 Android)
• Edge(Desktop)
• Firefox(Desktop 和 Android)
• Safari(macOS 和 iOS)

基准新功能（Baseline Newly Available）用如下蓝色标志代表。

目前已经可以在 Can I Use[3] 和 MDN[4] 上看到这个标志。

当某个功能成为基准新功能（Baseline Newly Available）时，它可能刚刚跨浏览器可用，甚至可能在本周发布的浏览器中可用。但请你放心：

它在各个浏览器的工作方式是相同的，并且它是 web 平台的明确组成部分。

属于基准新功能（Baseline Newly Available）组的功能可以作为增强功能使用，记得提供 fallback 或 polyfill。

如果你想使用 Newly Available 的功能：

你需要考虑如何支持那些还没有使用这些功能的用户，因为他们可能使用的是旧版本的浏览器。

Baseline Widely Available

这些功能终将会达到一个阶段，我们无须再担心它们是否可用，(基准广泛可用) Baseline Widely Available 表示此阶段。

如果某个功能是 Baseline Widely Available，你可以闭眼入，无需多虑浏览器不兼容的情况。

Baseline Widely Available 用如下绿色标志表示。

一个功能在成为 Newly Available 之后，经过 30 个月（即 2 年半）会成为 Widely Available。

这个时间线是 web 小组共识的，除非你有非常具体的支持要求之外，你都可以放心使用 Widely Available 的功能。

Baseline Havelimited Availability

橙色标志表示有限的可用性(havelimited availability)，可能只有一个或两个浏览器支持，并不是所有浏览器都支持。

接下来让我们来看一些 Newly Available 的功能。

Size container queries

尺寸容器查询[5]允许你基于容器的宽度或内联尺寸来调整设计，而不仅是像媒体查询那样只能针对视口尺寸。

容器查询的行为与媒体查询类似，但它们查询的是容器而非视口尺寸。使用姿势如下：

• 首先需要使用 container-type 属性并设置值为 inline-size 来定义容器元素。
• 然后，像使用 @media 一样使用 @container 来设置最小或最大尺寸。
• 当这些条件满足时，你可以应用相应的 CSS。

在该示例中，当容器宽度超过 500 像素时，卡片将会转换为两列网格布局。

想了解更多关于容器查询的案例请移步：容器查询案例[6]

容器查询是开发者长期以来一直期望的功能，早在 2011 年就有人提出了类似的想法，那是在 Ethan Marcotte[7] 引入响应式设计理念的一年后。

在很长的时间里，人们认为容器查询是无法高效实现的。不过，基于 CSS containment[8] 属性，CSS 工作组开发出了一个解决方案。

开发者通过像 State of CSS 这样的调查，向浏览器厂商传达了希望该功能跨浏览器互操作的强烈诉求，这也是它被纳入 Interop 2023 的重要原因之一。

Interop

提到 Interop[9]，该项目已经进入第三年了，这是一个年度基准，所有主要的浏览器厂商会通力合作，解决开发者在 web 平台上面临的一些最受关注的互操作性问题。

今天将要谈到的许多功能，正是由于被纳入 Interop 2023 和 2024，而成为 Baseline Newly Available，目前有许多功能是 Interop 2024 的一部分，希望能在今年内顺利完成交付。

Interop Dashboard[10] 可以帮助你了解 Interop 的现状，得分基于功能通过的 web 平台测试用例数量。

尺寸容器查询在 2023 年 2 月变得兼容，并成为 Baseline Newly Available 的一部分。

你可以在 MDN[11] 和 Can I Use[12] 上查看它们的状态以及支持它们的浏览器版本，用来帮助你判断是否可以开始使用它们。

尺寸容器查询将在 2025 年 8 月成为 Widely Available。

这代表从那时起，大多数开发者可以放心使用这个功能，而不必担心浏览器兼容性的问题。

:has()

等了 24 年！:has() 父选择器终于来了，这是一种基于内部内容选择元素的方法，你可以创建一个能够根据其内容自适应的组件。

如下示例，一个简单的卡片组件，设置了如果组件中有 figure+.content，则将其显示为两列的网格布局。

结果如下，通过检查组件是否包含 figure，如果有，就使用两列布局；如果没有，就不预留 figure 空间。

把 :has() 说成是父选择器有些简化了它的功能。实际上，它可以做更多事情，请移步 :has() mdn[13] 了解更多。

在 2023 年的 State of CSS 调查中，:has() 位于因浏览器不兼容而无法使用的功能列表首位。

因此，它也被纳入了 Interop 2023。

• 在 2023 年 12 月成为 Baseline Newly Available。
• 将在 2026 年 6 月成为 Widely Available。

subgrid

CSS 网格布局规范的第一级在 2017 年实现了互操作性，网格布局本身是 Baseline Widely Available 的一部分，现在你可以非常放心地使用它。

早期的网格布局规范中有一个部分被移除，以便实现其余的规范，那就是 subgrid 子网格的概念，即嵌套网格布局能够继承其父网格的轨道。

关于 subgrid 的示例请移步：CSS subgrid[14]

在 2023 年的 State of CSS 调查中，subgrid 在关于浏览器不兼容性问题的回答中排名第四，因此它也被添加到 Interop 2023 中。

CSS subgrid 在 2023 年 9 月，成为 Baseline Newly Available，将在 2026 年 3 月成为 Baseline Widely Available。

CSS nesting

原生 CSS 面对大型项目时有很多天然缺点，这也是 CSS 工程化正在解决的问题。

近年来，CSS 从预处理器（如 SASS）中汲取了灵感，引入了一些新的功能。

如 CSS 自定义属性（也称为 CSS 变量）是一种 Widely Available 功能，允许你在一个地方设置变量（如颜色），并在整个 CSS 中使用。

这在以前只有使用预处理器才能实现，预处理器的另一个重要功能是嵌套。

嵌套是开发者们经常向 CSS 工作组请求的功能，因为它能避免选择器的重复，使 CSS 更容易阅读，你可以将相关的样式规则组合在一起。

在没有嵌套的情况下，每个选择器都要单独声明：

• 这可能导致相关的选择器在样式表中分散，令编写体验更加糟糕。
• 无法确认某些选择器已经存在，而重复添加相同的内容。

使用嵌套，我们可以将样式规则组合在一起，这样查看 CSS 时很清楚哪些内容是相关的，嵌套是预处理器中非常受欢迎的功能。

因此当它成为 CSS 规范的一部分，就很快通过了 CSS 工作组，并在 2023 年被所有浏览器支持。

它在 2023 年 8 月在 Firefox 中实现时成为 Baseline Newly Available。

虽然它被归类为 Newly Available，但它也是 Interop 2024 的一部分，以确保浏览器间的某些小问题完全解决。截至 2024 年 4 月，嵌套的 Interop 得分为 74.4%。

大多数未通过的测试是嵌套 CSS 和通过 host 与 Shadow DOM 之间的交互。

CSS 嵌套将在 2026 年 2 月成为 Widely Available。

HTML <search> element

搜索几乎无处不在，大多数网站和应用程序都有某种形式的搜索功能。但一直也没有一个元素专门用于标记页面上的搜索或过滤功能。

<search> 元素应运而生，它用于包含搜索表单或任何用于过滤结果的其他元素。

关于 <search> 想要了解更多请移步search MDN[15]

search 被添加到 HTML 规范后，在 2023 年迅速被所有浏览器支持。

• 在 9 月，它在 Firefox 和 Safari 中实现。
• 在 10 月，它在 Chrome 和 Edge 中实现，并成为 Baseline Newly Available。

在第一个浏览器支持后的一个月内成为 Baseline Newly Available，这非常令人印象深刻。

它将在 2026 年 4 月成为 Widely Available。

Responsive video

很长一段时间以来，我们都使用 picture 元素来标记图像，通过添加不同的源文件，并使用 media 属性来指示哪个图像文件最适合当前设备，但无法对视频做同样的处理。

响应式视频也被重新捡起来进行开发，用法和 picture 相同。

• 响应式视频在 2023 年 11 月成为 Baseline Newly Available
• 将在 2026 年 5 月成为 Widely Available。

你现在就可以开始使用这个功能，因为不支持响应式视频的浏览器将选择第一个指定的视频，这与不使用 media 属性时的情况基本相同。

The inert attribute

当一个元素是 inert 时，它无法被交互，你会在使用 dialog 元素时看到这一点，页面上在对话框后面的元素无法被点击或通过 Tab 键选中。

如果你将 inert 属性应用于某个元素，点击该元素时将不会触发点击事件。该元素无法获得焦点，该元素及其内容将对辅助技术隐藏，因为它已从无障碍树中排除。

关于 inert 想要了解更多请移步inert MDN[16]。

inert 属性在 2023 年 4 月成为 Baseline Newly Available，并将在 2025 年 10 月成为 Widely Available。

New CSS Color

2023 年是 CSS Color 的里程碑之年，新的颜色模型和颜色函数来了。

New color models

新的颜色模型，它们基本上实现了网页上的高清颜色，有一系列的新模型，可以帮我们摆脱单一的 RGB 颜色。

可以前往 Adam Argyle 构建的 gradient.style[17]，尝试这些新颜色的使用方式。

color-mix() funtion

除此之外，还有新的函数，其中之一是 color-mix，这个函数让你可以在任何颜色空间中将一种颜色混合到另一种颜色中。

在这个例子中，会将 25% 的蓝色混合到白色，并在 sRGB 颜色空间中混合。

你可以在任何新的颜色空间中进行混合，并直接在你的 CSS 中进行操作。

这些功能在 2023 年 4 月成为 Baseline Newly Available，将在 2025 年 10 月成为 Widely Available。

:user-valid、:user-invalid

长期以来，我们一直有伪类 :valid 和 :invalid。它们在浏览器中广泛可用，用于指示表单元素是否根据任何约束规则有效或无效。

问题在于：它们在用户与表单字段交互之前就已经应用。

:user-valid 和 :user-invalid 的行为与 :valid 和 :invalid 基本相同，但它们只有在用户与字段交互后才会起作用。对于一个必填字段，用户需要点击或使用 Tab 键进入该字段，然后离开，才能显示无效状态，带给用户更好的体验。

关于 :user-valid 和 :user-invalid 想要了解更多请移步：

• :user-valid MDN[18]
• :user-invalid MDN[19]

这些新的伪类在 2023 年 10 月成为 Baseline Newly Available，并将在 2026 年 4 月成为 Widely Available。

Compression Streams

大多数 web 应用程序都需要为用户提供下载功能，可能需要下载一个压缩的 zip 文件。

过去，如果你想实现这个功能，就必须包含一个压缩库，这会增加应用程序的体积，即使用户不需要使用下载功能，而 CompressionStreams 提供了一种内置的数据流压缩方式。

CompressionStreams 在 2023 年 5 月成为 Baseline Newly Available，将在 2025 年 11 月成为 Widely Available。

这是一个非常适合添加 polyfill 的功能，当 CompressionStreams 可用时使用它即可，如果不支持，则使用第三方库。

Declarative Shadow DOM

一种从 HTML 创建 shadow 树的方法，以前只能通过 JavaScript 使用 attachShadow 创建。

从 HTML 创建 shadow 树，在 JavaScript 可能不运行的环境中非常有用，这对于服务器端渲染组件也非常重要。

以下是通过 JavaScript 创建 Shadow DOM 的旧方法。

使用声明式 Shadow DOM，可以通过使用带有 shadowrootmode 属性的 template 来创建 Shadow DOM 整个树，包括 shadow root。

Declarative Shadow DOM 现在是 HTML 标准的一部分。它首次出现在 Chrome 111 中，并迅速被其他浏览器实现，并作为 Interop 2024 的一部分。

在 2024 年 2 月成为 Baseline Newly Available，将在 2026 年 8 月成为 Widely Available。

Popover

Popover 最近刚刚成为 Newly Available，它和另一个相对较新的功能 dialog 元素之间有一些相似之处。

Dialog 是 Baseline Newly Available 的一部分，并在 Interop 2022 作为重点领域后实现互操作，将在今年 9 月成为 Baseline Widely Available。

Dialog 允许你创建带有 inert 背景的模态对话框，但还有另一种弹出窗口不会使页面的其余部分变得 inert。这些非模态弹出窗口用于菜单、自定义提示通知和内容选择器。

关于 Popover 想要了解更多请移步Popover MDN[20]、Popover 案例[21]

Popover 在 2024 年 4 月成为 Baseline Newly Available，将在 2026 年 10 月成为 Widely Available。

Web Platform Dashboard

在 Web Platform Dashboard[22] 中，你能够看到整个 web 平台映射为一组功能及其 Interop 状态，这种平台发展过程的可见性是前所未有的。

它可以帮助你了解 Baseline 2023 中的所有内容，这将是一个极佳的学习列表，看看它们是否对你正在进行的项目有帮助，你可能会发现一个之前没有注意到的功能。

当你准备写一篇关于新功能的文章，并希望了解过去三个月中哪些功能成为了 Newly Available 时，你可以使用过滤视图来查看这些内容。

如果有一个关键的 web 平台功能让你非常感兴趣，你希望看到它成为 Baseline Newly Available 的一部分，那就使用具有分数变化时间线的功能来跟踪其进展。

Baseline tooling

随着 Web Platform Dashboard 的加入，我们有了许多新的方式来了解功能的可用性。

如果你认为你的用户可能会使用包含 Baseline 2022 功能的浏览器，你可以查看那一组功能，以确保它们属于 Baseline 2022 或更早版本。

但为整个代码库执行此操作则需要大量工作，这最好由工具来完成。

首先是决定你需要针对哪个基线版本，其他平台也面临同样的问题。

但平台所有者可以提供一些关于用户在各个版本之间分布的指导，这样开发者就可以进行权衡取舍，但在 web 上并没有类似的指导。

Akamai 的 RUM Archive[23] 已经在解决这个问题，并向开发者提供了一个新的工具 RUM Archive Insights[24]。

你可以并排查看 Baseline 版本的全球用户份额及其解锁的功能，这解决了新项目选择基线版本的问题。

但如果你在现有网站上有一个特定的受众群体，你可能希望了解使用新功能对现有用户群的影响。因此，我们正在与 RUMvision 合作解决这个问题，并将在今年晚些时候宣布更多信息。

如果你采用 Baseline 2023 作为基准，以下就是所有成为 Newly Available 并可供你使用的功能。

如果你想了解 2024 年即将推出的令人兴奋的功能，如下列出了我们已知的 Baseline 2024 的所有功能。

Web 正在肉眼可见的变得越来越好，希望阅读完本文你能有所收获。

“视频：https://www.youtube.com/watch?v=W8bokbLn1G8 文章：https://web.dev/blog/new-in-the-web-io2024 ”

参考资料

[1]

Baseline: https://web.dev/baseline

[2]

WebDX 社区小组: https://www.w3.org/community/webdx/

[3]

Can I Use: https://caniuse.com/

[4]

MDN: https://developer.mozilla.org/en-US/

[5]

尺寸容器查询: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_containment/Container_queries

[6]

容器查询案例: https://developer.chrome.com/blog/css-ui-ecommerce-cq

[7]

Ethan Marcotte: https://ethanmarcotte.com/

[8]

CSS containment: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment

[9]

Interop: https://web.dev/blog/interop-2024

[10]

Interop Dashboard: https://wpt.fyi/interop-2024

[11]

MDN: https://developer.mozilla.org/en-US/

[12]

Can I Use: https://caniuse.com/

[13]

:has() mdn: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has

[14]

CSS subgrid: https://web.dev/articles/css-subgrid

[15]

search MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search

[16]

inert MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

[17]

gradient.style: https://gradient.style/

[18]

:user-valid MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid

[19]

:user-invalid MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid

[20]

Popover MDN: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

[21]

Popover 案例: https://developer.chrome.com/blog/css-ui-ecommerce-popover

[22]

Web Platform Dashboard: https://web.dev/blog/web-platform-dashboard

[23]

RUM Archive: https://rumarchive.com/

[24]

RUM Archive Insights: https://rumarchive.com/insights/