每周平台新聞：HTML加載屬性，主要的ARIA規格以及從iframe轉移到Shadow dom

本周平台新闻综述：Chrome 引入了一种新的加载属性，为 Web 开发人员提供了辅助功能规范，以及 BBC 将可视化效果迁移到 Shadow DOM。

Chrome 推出 loading 属性

Chrome 现在支持用于延迟加载图像和 iframe 的 HTML loading 属性。您可以将 loading="lazy" 添加到 <mark>延迟加载图像</mark> 和 iframe（位于视口下方），直到用户滚动到附近才会加载它们。

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

此功能尚未添加到 HTML 标准（但有一个开放的 pull request），其 Chrome 状态页面上列出了多个指向 Google 文档的链接。(来自 web.dev)

ARIA 规范概述

Web 开发人员的主要辅助功能规范：

相关：Simon Pieters 和 Valerie Young 合著的“参与 ARIA Authoring Practices Guide”

BBC 网站上的 Shadow DOM

BBC 已将其网站上嵌入式交互式可视化的实现方式从 <iframe></iframe> 迁移到 Shadow DOM。这导致加载性能显著提高（“速度提高 25% 以上”）。

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

Shadow DOM [...] 可以以类似于 iframe 的方式提供内容，在封装方面，但没有负面开销 [...] 我们希望封装一个元素，其内容将作为页面的一部分无缝显示。Shadow DOM 为我们提供了这一点，而无需自定义元素。

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

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

(来自 Toby Cox)

其他新闻……

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

在我的新的每周 周日版 中阅读更多新闻。访问 webplatform.news 获取更多信息。

以上是每周平台新聞：HTML加載屬性，主要的ARIA規格以及從iframe轉移到Shadow dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！