目錄
Chrome 推出 loading 属性
ARIA 规范概述
BBC 网站上的 Shadow DOM
其他新闻……
首頁 web前端 css教學 每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom

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

Apr 17, 2025 am 10:55 AM

Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

PHP教程
1582
276
什麼是常見的CSS瀏覽器不一致? 什麼是常見的CSS瀏覽器不一致? Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異,導致顯示效果不一致,主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認樣式處理不一致,解決方法是使用CSSReset或Normalize.css統一初始樣式;2.舊版IE的盒模型計算方式不同,建議統一使用box-sizing:border-box;3.Flexbox和Grid在邊緣情況或舊版本中表現有差異,應多測試並使用Autoprefixer;4.某些CSS屬性行為不一致,需查閱CanIuse並提供降級

什麼是口音色的物業? 什麼是口音色的物業? Jul 26, 2025 am 09:25 AM

accent-color是CSS中用於自定義復選框、單選按鈕和滑塊等表單元素高亮顏色的屬性;1.它直接改變表單控件選中狀態的默認顏色,如將復選框的藍色勾選標記改為紅色;2.支持的元素包括type="checkbox"、type="radio"和type="range"的輸入框;3.使用accent-color可避免複雜的自定義樣式和額外DOM結構,保持原生可訪問性;4.現代瀏覽器普遍支持,舊瀏覽器需降級處理;5.設置accent-col

描述'垂直align”屬性及其典型用例 描述'垂直align”屬性及其典型用例 Jul 26, 2025 am 07:35 AM

1.ItAdjustSelementsLikeImagesRikeImagesOrformInputswithIntExtLineSustLineSlineSlineSlineSlikeLikeLikeBaseline,中間,Super,Super,Super和Sub.2.intablebecells,ItControlScontentalStalteNtalmscontentalMedwithThtop,Middle,Middle,Midder,Midder,經常

如何清除未使用的CSS? 如何清除未使用的CSS? Jul 27, 2025 am 02:47 AM

UseAutomatedToolSlikePurgecsSoruncsStoscanAndRemoveUnusedcss; 2. integratePuratePurgingIntoyourBuildProcessviawebpack,vite,vite,ortailwind ’scontentConfiguration; 3.AuditcsSusageWithChroMedEvtoolScoverAgeTabBeforgeForgingToavoidRemovingNeedEdedStyles; 4.safelistdynamic

如何更改CSS中的文本顏色? 如何更改CSS中的文本顏色? Jul 27, 2025 am 04:25 AM

要改變CSS中文本顏色,需使用color屬性;1.使用color屬性可設置文本前景色,支持顏色名稱(如red)、十六進制碼(如#ff0000)、RGB值(如rgb(255,0,0))、HSL值(如hsl(0,100%,50%))以及帶透明度的RGBA或HSLA(如rgba(255,0,0,0.5));2.可將顏色應用於包含文本的任何元素,如h1至h6標題、段落p、鏈接a(需注意a:link、a:visited、a:hover、a:active不同狀態的顏色設置)、按鈕、div、span等;3.最

CSS暗模式切換示例 CSS暗模式切換示例 Jul 30, 2025 am 05:28 AM

首先通過JavaScript獲取用戶系統偏好和本地存儲的主題設置,初始化頁面主題;1.HTML結構包含一個按鈕用於觸發主題切換;2.CSS使用:root定義亮色主題變量,.dark-mode類定義暗色主題變量,並通過var()應用這些變量;3.JavaScript檢測prefers-color-scheme並讀取localStorage決定初始主題;4.點擊按鈕時切換html元素上的dark-mode類,並將當前狀態保存至localStorage;5.所有顏色變化均帶有0.3秒過渡動畫,提升用戶

如何使用CSS Backdrop-Filter屬性? 如何使用CSS Backdrop-Filter屬性? Aug 02, 2025 pm 12:11 PM

backdrop-filter用於對元素背後的內容應用視覺效果,1.使用backdrop-filter:blur(10px)等語法實現毛玻璃效果;2.支持blur、brightness、contrast等多種濾鏡函數並可疊加;3.常用於玻璃態卡片設計,需確保元素與背景重疊;4.現代瀏覽器支持良好,可用@supports提供降級方案;5.避免過大模糊值和頻繁重繪以優化性能,該屬性僅在元素背後有內容時生效。

什麼是用戶代理樣式表? 什麼是用戶代理樣式表? Jul 31, 2025 am 10:35 AM

用戶代理樣式表是瀏覽器自動應用的默認CSS樣式,用於確保未添加自定義樣式的HTML元素仍具基本可讀性。它們影響頁面初始外觀,但不同瀏覽器存在差異,可能導致不一致顯示。開發者常通過重置或標準化樣式來解決這一問題。使用開發者工具的“計算”或“樣式”面板可查看默認樣式。常見覆蓋操作包括清除內外邊距、修改鏈接下劃線、調整標題大小及統一按鈕樣式。理解用戶代理樣式有助於提升跨瀏覽器一致性並實現精準佈局控制。

See all articles