每周平台新闻：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中文网其他相关文章！