每周平台新闻：HTML 加载属性、主要 ARIA 规范以及从 IFrame 转移到 Shadow DOM

在本周的平台新闻综述中，Chrome 引入了新的加载属性、面向 Web 开发人员的可访问性规范，以及 BBC 将可视化内容转移到 Shadow DOM。

Chrome 发布加载属性

用于延迟加载图像和 iframes 的 HTML loading 属性现已在 Chrome 中得到支持。您可以将 loading="lazy" 添加到 延迟加载图像 和 iframe，这些图像和 iframe 位于视窗下方，直到用户滚动到附近才会加载。

Google 建议将此功能视为渐进增强，或在您现有的基于 JavaScript 的延迟加载解决方案之上使用它。

此功能尚未添加到 HTML 标准（但有一个 开放的拉取请求），并且 Google 文档的多个链接已列在其 Chrome 状态页面 上。(通过 web.dev)

---

ARIA 规范概述

面向 Web 开发人员的主要可访问性规范

名称	描述
HTML 中的 ARIA	定义哪些 ARIA 角色、状态和属性在哪些 HTML 元素上是允许的（这里定义了隐式 ARIA 语义）
使用 ARIA	提供有关如何在 HTML 中使用 ARIA 的实用建议，重点介绍动态内容和高级 UI 控件（这里定义了“ARIA 使用的五个规则”）
ARIA（可访问的富互联网应用程序）	定义 ARIA 角色、状态和属性
ARIA 创作实践	提供有关如何使用 ARIA 创建可访问应用程序的通用指南（包括用于常见小部件的 ARIA 实现模式）
HTML 可访问性 API 映射	定义浏览器如何将 HTML 元素和属性映射到操作系统的可访问性 API
WCAG（Web 内容可访问性指南）	提供有关如何使 Web 内容更具可访问性的指南（这里定义了 WCAG 符合性的成功标准）

相关： “为 ARIA 创作实践指南做出贡献”，作者是 Simon Pieters 和 Valerie Young

---

BBC 网站上的 Shadow DOM

BBC 已将其网站上的嵌入式交互式可视化内容从 <iframe> 转移到 Shadow DOM。这带来了加载性能的显著提升（“速度提高了 25% 以上”）。

可用的 Shadow DOM polyfill 无法可靠地防止样式在 Shadow DOM 边界泄漏，因此他们决定在不支持 Shadow DOM 的浏览器中回退到 <iframe>。

Shadow DOM […] 可以像 iframe 一样提供内容封装，但没有负面开销 […] 我们希望封装一个元素，该元素的内容将无缝地显示为页面的一部分。Shadow DOM 为我们提供了这一点，而无需任何自定义元素。

这种新方法的一个主要缺点是，CSS 媒体查询不再可用于根据内容宽度有条件地应用样式（因为内容不再在单独的嵌入式文档中加载）。

使用 iframe 时，媒体查询将提供我们的内容宽度；使用 Shadow DOM 时，媒体查询将提供设备本身的宽度。这对我们来说是一个巨大的挑战。我们现在无法知道内容在提供时的大小。

(通过 Toby Cox)

---

其他新闻…

• Chrome 的下一个版本将引入 最大内容绘制 性能指标；此新指标是首次有意义绘制的更准确的替代指标，它测量最大元素在视窗中呈现的时间（通常是最大的图像或文本段落）（通过 Phil Walton）
• Microsoft 创建了一个新的工具原型，用于以 3D 方式查看网页的 DOM；此工具现在已在 Edge 预览版中作为实验功能提供（通过 Edge DevTools）
• 跟踪预防 已在 Edge 预览版中默认启用；它默认设置为平衡，这“会阻止恶意跟踪器和一些第三方跟踪器”（通过 Techdows）

在我的新的每周 星期日版 中阅读更多新闻。访问 webplatform.news 以了解更多信息。