在 Google I/O 大会上，我分享了自我们去年 I/O 大会上公布以来 Baseline 是如何发展的。我还宣布了 Web 平台信息中心、与 RUM Archive 的集成以及即将与 RUMvision 的集成。本博文将演讲中的所有资源集中到一处。
Web 平台信息中心是一种激动人心的新方式，可让您查看整个 Web 平台、各个功能到互操作性的历程，并将成为 Baseline 的一部分。如需了解详情，请参阅全新推出 Web 平台信息中心。
将 Baseline 与您日常使用的工具集成一直是此项目的愿景的一部分。我们希望处理浏览器兼容性，而您不必花费太多时间。详细了解 RUM Archive 集成，并观看此空间以了解有关更多工具提供商的新闻。
刚开始接触 Baseline
在 I/O 大会上，我分享了 12 项 Web 平台功能，这些功能最近已成为“基准新功能”的一部分。Chrome、Edge、Firefox 和 Safari 现已提供这些功能，其中既有可简化开发的小增补项，也有开发者最需要的一些功能，包括容器查询和 :has()。
大小容器查询
借助尺寸容器查询，您可以根据容器的宽度或内嵌尺寸更改设计，而不是只能使用媒体查询定位视口的尺寸。这样可以实现更多可重用的组件，这些组件在放置到布局中时，可以根据可用空间自行修改。在自适应设计的概念存在期间，这些功能几乎一直是他们最想使用的功能列表之一。
- 2023 年 2 月新推出。
- 已于 2025 年 8 月广泛提供。
如需详细了解 MDN 上的容器查询，请参阅容器查询登陆稳定版浏览器；另外，请参阅容器查询案例研究，了解其他开发团队如何受益于这些查询。
:has()选择器
多年来，:has() 选择器一直是我们开发者的另一个首要需求，它是一种父选择器，它能够根据元素中的内容选择元素。不过，:has() 的功能远不止于此。
与容器查询一样，这在创建可重复使用的组件时非常有用，因为您可以创建单个组件来适应它包含的内容。
- 此功能于 2023 年 12 月推出。
- 已于 2026 年 6 月广泛提供。
如需详细了解 MDN 上的 :has()、:has() 系列选择器和 :has() 案例研究。
CSS 网格布局 subgrid
借助 subgrid，嵌套网格布局能够从其父级继承轨迹。使用此参数可以更好地对齐嵌套网格中的项。
- 此功能于 2023 年 12 月推出。
- 已于 2026 年 6 月广泛提供。
详细了解 MDN 上的 subgrid 和 CSS subgrid（链接到大量其他资源）。
CSS 嵌套
近年来，CSS 从开发者在预处理器（如 Sass）中使用的功能中汲取了灵感。例如，CSS 自定义属性（通常称为 CSS 变量）是一种广泛提供的功能，它允许您在一个位置设置颜色等变量并在整个 CSS 中使用，而这之前只有在使用预处理器时才可用。
预处理器的另一个功能是嵌套。嵌套有助于避免选择器重复，并提高 CSS 的可读性，因为可以更轻松地将相关内容组合在一起。
- 2023 年 8 月新推出
- 于 2026 年 2 月广泛提供
详细了解 MDN 上的 CSS 嵌套和 CSS 嵌套。
HTML <search> 元素
搜索是指许多网站和应用中会出现的功能，但直到最近，还没有任何元素可用于标记用于在网页上搜索或过滤的功能。<search> 元素就是为此而设计的。它以元素的形式存在，您可以在其中放置搜索表单或用于过滤结果的其他元素。
- 2023 年 10 月新推出
- 于 2026 年 4 月广泛发布
详细了解 MDN 上的 <search> 元素。
自适应视频广告
此功能是指能够使用 <video> 元素内的 <source> 元素，向不同设备提供适当尺寸的视频，具体方式与提供不同尺寸的图片相同。
- 2023 年 11 月新推出
- 于 2026 年 5 月广泛发布
如需详细了解 MDN，请参阅媒体或图片来源元素以及如何使用自适应视频。
inert 属性
如果某个元素处于闲置状态，就无法再与其交互。例如，在打开对话框窗口元素时，位于对话框后面页面上的元素无法被点击或按 Tab 键转到。借助 inert 属性，您可以控制界面任何部分的惯性。
将 inert 属性应用于某个元素后，点击该元素时将不会触发点击事件，该元素无法获得焦点，该元素及其内容会从无障碍树中排除，因此不会向辅助技术显示。
- 2023 年 4 月新推出
- 于 2025 年 10 月广泛提供
color-mix() 函数
借助 color-mix() 函数，您可以在任何可用的颜色空间中，将一种颜色混合到另一种颜色中，这包括最近成为“新推出 Baseline”的所有新颜色模型 - LCH、Lab、OKLCH 和 OKLab。
- 2023 年 4 月新推出
- 于 2025 年 10 月广泛提供
详细了解 MDN 上的 color-mix() 和 CSS color-mix()。我们还提供了大量的高清 CSS 颜色指南，其中介绍了 CSS 中提供的所有新颜色模型。此外，您还可以查看 gradient.style，尝试这些新颜色并打造精美的渐变效果。
“:user-valid”和“:user-invalid”
伪类 :valid 和 :invalid 在浏览器中广泛使用，它们会根据对某个表单元素设置的任何约束规则，指示该元素当前是否有效。因此，如果您有一个包含 email 类型的字段，并且该字段包含名称，:invalid 伪类会选择该字段，您可以添加颜色或图标，以表明该字段需要更正。
:valid 和 :invalid 伪类的问题在于，它们会在用户与表单互动之前应用。因此，如果需要某个表单元素，而用户尚未填写该元素，则会显示无效的样式。通常，仅当用户输错了某些内容或跳过某个字段并将其留空时，您才希望显示无效样式。
若要在这种情况下改善用户体验，请使用 :user-valid 和 :user-invalid 伪类。这些字段的行为方式几乎相同，不过它们仅在用户与字段互动后才匹配。因此，在必填字段示例中，用户需要按 Tab 键点击该字段或点击进入该字段，然后在未填写完该字段的情况下将其移走，该字段才会显示无效状态。
- 2023 年 10 月新推出
- 于 2026 年 4 月广泛发布
详细了解 MDN 上的 :user-valid 和 :user-invalid。
压缩流
许多 Web 应用需要以压缩格式（例如 ZIP 文件）向用户提供下载内容。过去，这要求应用包含一个压缩库，该压缩库会对所有用户的应用大小增大。压缩流 API 为您提供了压缩数据流的内置方法。
- 2023 年 5 月新推出
- 于 2025 年 11 月广泛发布
详细了解 MDN 上的 Compression Streams API 和现在所有浏览器都支持压缩数据流。
声明式 Shadow DOM
声明式 Shadow DOM 是一种通过 HTML 创建影子树的新方法。在这种模式之前，您只能使用 attachShadow() 通过 JavaScript 创建影子树。在可能无法运行 JavaScript 的环境（例如电子邮件客户端）中，能够通过 HTML 执行此操作特别有用。这对于服务器端渲染的网络组件也很重要。
- 2024 年 2 月新推出
- 于 2026 年 8 月广泛提供
详细了解声明式 Shadow DOM。
Popover API
在我们的 Web 应用中，弹出式窗口用于执行许多不同的任务。例如菜单、自定义消息框通知和内容选择器。现在有一种内置方法，可以使用 Popover API 以装饰性方式创建这些弹出式窗口。
- 2024 年 4 月新推出
- 于 2026 年 10 月广泛提供
详细了解 MDN 上的 Popover API、Popover API 已纳入基准阶段，以及 Popover 案例研究。
这 12 项功能只是“基准新推出”功能的一部分，您可以在此网站上探索更多内容。探索已纳入 2023 年基准的所有功能，以及 2024 年基准中不断增加的功能集合。