發布日期：2026 年 10 月 26 日
瀏覽 Modern Web Guidance 提供的指南 (依類別整理)。
視覺設計
根據高對比偏好設定調整捲軸
為偏好高對比介面的使用者提高捲軸能見度
將 WebGL 著色器套用至 HTML 內容
使用 WebGL 著色器，對 HTML 內容套用自訂視覺效果。
顏色
網頁色彩指南，包括對比度規定、淺色和深色色彩配置、強制色彩模式，以及從基本色產生色調和陰影。
複雜形狀
將元素和內容剪輯成任何任意形式的形狀，例如符號、筆觸或有機紋理，讓設計更具表現力。
自訂文字裝飾
新增底線、頂線、刪除線或完全自訂形狀等文字裝飾，並搭配顯示動畫、自訂偏移和結尾內嵌，以及彈性的墨水略過功能。
自訂捲軸的顏色或粗細
自訂捲軸的顏色或粗細
深色模式
實作深色模式支援時，應遵循使用者的淺色/深色主題偏好設定，並調整瀏覽器 UI (例如捲軸、表單控制項等)
在 3D 場景中啟用互動式 HTML 內容
將互動式 HTML 元素整合至 3D 場景。
使用動態背景顏色，確保文字清晰易讀
選取可讀性高的文字顏色，與動態背景顏色形成足夠的對比。
等寬文字行
多行標題或標誌組合的每一行都應等寬，就像海報風格或堆疊標題的排版。與左右對齊的文字不同，文字本身會根據寬度調整大小，而不是拉長間距
從 Canvas 匯出 HTML 內容
在畫布中擷取動態 HTML 內容，並匯出為圖片或影片影格。
向瀏覽器功能公開畫布內容
將畫布中算繪的內容提供給瀏覽器功能，例如輔助技術、翻譯或閱讀模式。
改善文字版面配置和易讀性
啟用瀏覽器在換行時套用平均分配的換行功能，改善簡短獨立文字內容 (例如不超過幾行的標題) 的版面配置和可讀性。
精準對齊文字
無論文字採用何種字型，都能精準垂直對齊。例如，文字上方和下方的視覺邊框間距完全相同，或文字與相鄰圖示或圖片完全對齊。
剪裁圖片
結合多個形狀，在元素中建立複雜的剪裁或「挖空」效果，例如在元素中加入凹口。
柔邊內容淡出
在內容邊緣套用透明度漸層，表示還有可捲動的區域，或遮蓋付費牆後的文字。
設定瀏覽器生成 UI 的主題
使用 CSS 設定瀏覽器產生的 UI 主題，例如文字選取、捲軸、表單控制項和挑選器，而不是使用自訂元素重新建立。
字體排版
網頁排版最佳做法，包括字型大小單位、行高、文字換行和平衡，以及可隨可視區域縮放的流動字型。
視覺效果
使用 CSS 製作視覺效果，例如分層陰影、混合模式、可預測色彩內插的漸層，以及僅由漸層組成的條紋、棋盤、圓點和圓餅圖等圖案。
視覺化內容穩定的備用字型
定義字型樣式，確保在偏好字型和備用字型之間切換時，文字仍可清楚辨識且視覺效果一致。
視覺穩定的混合字型
定義字型樣式，確保使用多種字型轉譯單一文字區塊時，文字仍清晰易讀且視覺效果一致。
視覺紋理內容
為元素套用逼真的風化和紋理圖案，呈現自然、老舊或實體材質的外觀。
UI Atom
建構捲動進度指標
建立捲動進度列、分段進度追蹤器，或任何視覺化功能，讓使用者瞭解自己捲動網頁或區段的進度。
建構輪轉介面投影片效果
建立含有圖片或其他視覺元素的投影片輪轉介面，每張投影片在進入/置中/離開捲動器時都會有動畫效果。例如，投影片可能會淡入/淡出、旋轉、放大或縮小等。
元件專屬的淺色/深色主題
強制特定元素 (例如程式碼區塊、媒體播放器等) 採用淺色或深色模式，不受網頁色彩配置影響。
位置感知工具提示
建立工具提示和彈出式視窗時，請加上方向箭頭 (或其他視覺樣式)，當元素翻轉至備用位置時，箭頭會自動指向正確方向。
向下拉即可顯示
建構下拉顯示功能，讓使用者能向下拉動螢幕，顯示更多內容 (例如搜尋列)。
回應式表格
建立資料表，以適當的標頭語意呈現表格型資料，並確保在小螢幕上和使用輔助技術時，仍可輕鬆閱讀及瀏覽。
可辨識捲動位置的元素
建構浮動按鈕或小工具 (回到頂端、捲動到底部、即時通訊啟動器等)，並根據使用者是否捲動頁面，顯示或隱藏這些元素。
可捲動性示能提示
建構捲動陰影疊加層、漸層淡出效果或方向箭頭指標，只有在該方向確實有更多內容可捲動時才會顯示。
捲動時縮小標頭
在捲動時流暢地為固定標頭或全頁封面加上動畫，在預先定義的捲動距離內動態縮小、加上陰影及轉換版面配置。
感知狀態的固定標頭
建立固定式區段標題或導覽列，在實際「固定」在頂端時，以視覺方式轉換，變更色彩配置或加上陰影。
使用及管理圖示
顯示及管理可透過 CSS 設定和參數化的圖示，這些圖示載入速度快、在任何解析度下都能清晰顯示，且能正確向輔助技術公開 (或隱藏)。
可視區域感知下拉式選單
將下拉式選單、彈出式選單或關聯動作面板固定在觸發按鈕上，這樣一來，這些元素就會在可視區域邊緣自動翻轉軸，而不是遭到裁剪。
UI 元件
建立資訊卡
建構資訊卡元件，根據可用空間和內容調整呈現方式。
建立下拉式選單
建構選單元件，顯示選項或動作清單，並支援巢狀子選單。
建構 Scrollspy 導覽
在導覽選單中醒目顯示目前顯示的頁面部分
建立樣式進度列
建立樣式進度列，在確定和不確定狀態下，傳達工作或程序完成的訊息。
建構互動式懸浮資訊卡
建構懸浮資訊卡元件，當使用者將滑鼠游標懸停在特定類型的連結 (例如使用者個人資料) 上時，顯示該連結導向頁面的互動式結構化預覽畫面。
建立永久應用程式導覽
使用繫結的原生疊加層，建立持續顯示的新手上路逐步操作說明，在使用者互動期間保持開啟。
建立浮動式通知
建立非侵入式浮動式訊息和疊加通知，用於持續、可堆疊的訊息和狀態通訊。
深色模式切換
建構深色模式切換元件，讓使用者覆寫目前網站的系統色彩配置偏好設定。
對話方塊
建構可存取的強制回應或非強制回應對話方塊元件，妥善管理焦點，並可按照使用者在各平台上的預期方式關閉。
載入旋轉圖示
建構載入旋轉圖示，向所有使用者傳達忙碌狀態、遵循減少動態效果偏好設定，並有效率地播放動畫。
導覽匣
建立導覽匣元件，當使用者輕觸選單按鈕時，導覽匣會從側邊滑入，疊加在現有頁面內容上方，並在關閉時滑出 (透過滑開、輕觸外部或按下 Escape 鍵)。
進度環
建構進度環元件，以視覺化方式呈現工作或程序的完成狀態，並支援中心內容和符合品牌形象的樣式。
堆疊下鑽
建構全螢幕階層式導覽，讓使用者深入查看巢狀檢視畫面，並透過滑動或返回操作回到上一頁，同時保持瀏覽器記錄同步。
設定核取方塊樣式
設定核取方塊樣式，包括自訂圖示、版面配置、顏色、勾選/取消勾選動畫，同時保留原生功能和無障礙功能。
UI 行為
為元素新增進入或離開捲動區塊時的效果
在使用者捲動時，為進入和離開捲動區 (或可視區域) 的元素建立淡入、放大或其他複雜的顯示效果。
錨定定位分頁底線
在兩個目標元素位置之間順暢轉換元素。例如，在先前選取的分頁和目前選取的分頁之間，移動所選分頁底線。
為元素進入和離開建立動畫效果
在 DOM 中新增/移除元素，或切換元素的顯示值時，順暢地隱藏/顯示元素。
為頂層元素設定進場和退場動畫
為對話方塊、彈出式視窗和工具提示等元素加入動畫效果，在這些元素進入/離開頂層時播放。
建構可拖曳元素
支援拖曳，可在頁面上移動浮動元素。
建立捲動視差效果
建立捲動效果 (例如視差)，讓前景和背景圖層以不同速度移動，在使用者捲動時營造深度感。
輪轉介面精選 Snap
在捲動貼齊輪轉介面、圖片庫或全頁滑動體驗中，以視覺方式醒目顯示目前貼齊的非互動式項目。例如在貼齊時展開資訊卡，或顯示隱藏的內容。
一致的跨文件轉場效果
請先確保重要網頁狀態已載入且穩定，再啟動跨文件檢視畫面轉場效果。也就是說，在轉換執行前，系統會載入並套用重要 CSS 樣式、載入並執行重要 JavaScript，以及剖析使用者初次查看網頁時可見的 HTML。
建立交錯動畫
錯開同層元素之間的動畫或轉場時間，讓每個元素在根據其在同層清單中的位置計算出的延遲時間後開始。
跨文件轉場
在全頁網頁瀏覽之間建立流暢、無縫的轉場效果，例如淡出、自訂揭露效果，或從一個頁面變形到下一個頁面。
自訂按鈕動作
使用宣告式按鈕指令、叫用器指令、按鈕指令、自訂指令或宣告式切換動作，以宣告方式將按鈕連結至任何元素，觸發自訂、應用程式專屬動作。
宣告式對話方塊和彈出式視窗控制項
不需編寫 JavaScript，即可透過按鈕切換對話方塊或彈出式視窗的顯示設定。
方向導覽轉換
以動畫呈現視覺狀態變化，反映使用者導覽流程的方向，例如向前移動時從右側滑入新內容，或返回上一個畫面時從左側滑入。
群組元素轉場效果
使用相同的轉場邏輯，同時轉換一組類似的元素，例如從購物車中移除產品，並讓所有其他產品以動畫形式移至新位置。
醒目顯示文字範圍
醒目顯示網頁上的任意文字範圍，例如搜尋結果、拼寫錯誤或協作編輯游標。
互動式內容揭露
建立互動式揭露效果，例如讓聚光燈跟隨使用者的指標，揭露圖片或 UI 區塊中的細節。
預覽興趣觸發動作
當使用者表示感興趣 (例如懸停、聚焦或長按)，但尚未點選按鈕時，即時預覽按鈕的效果。
輕觸關閉對話方塊
建立可透過輕觸關閉 (即點選或輕觸對話方塊外部) 的互動視窗對話方塊
動作
使用 CSS 轉場、動畫、捲動驅動動畫和檢視畫面轉場，為 UI 加上動畫效果，同時在合成器上保留動作，並遵循減少動態效果偏好設定。
移動 DOM 元素而不遺失狀態
移動 DOM 元素或重新設定其父項，同時保留重要的元素狀態，例如互動狀態 (:focus/:active)、
<iframe> 載入狀態、動畫/轉場狀態等永久性頂層 UI
當基礎 DOM 節點在 DOM 中移動或重新設定父項時，保持強制回應對話方塊、全螢幕元素或原生彈出式視窗可見且功能正常。
符合物理原理的加/減速
建立自訂的物理動畫和轉場效果 (例如彈跳和彈簧)，比傳統的緩動曲線更自然、更吸引人。
平台控制項關閉對話方塊
建立可透過標準平台專屬使用者動作關閉的強制回應對話方塊，例如在電腦平台上按下
Esc 鍵，或在行動平台上使用「返回」或「關閉」手勢防止捲動強制回應對話方塊下方的頁面
開啟互動視窗對話方塊時，防止捲動底層頁面。
相同文件轉場效果
在單頁應用程式 (SPA) 中，透過流暢地變換大小、位置或其他樣式屬性，以視覺方式連結不同頁面狀態或導覽中的持續元素 (例如將產品縮圖展開為全出血主頁橫幅)。
限定範圍的元件轉場效果
在單一元件 (資訊卡、清單、面板或其他子樹狀結構) 內為狀態變更加上動畫，同時頁面的其餘部分仍可互動，其他轉場效果也會同時執行。
捲動貼齊即時回饋
使用者捲動對齊貼齊點的內容時，在捲動手勢完成前，於連結的 UI 元素中提供即時視覺回饋。
捲動貼齊狀態同步
將導覽指標、連結的內容面板和數據分析追蹤，與可捲動容器中目前貼齊的項目同步。
捲動式敘事
在目標元素上建立視覺屬性動畫，例如淡出背景、切換背景顏色，或建立捲動敘事體驗，完全由完全不同元素的捲動區位置驅動。
搜尋隱藏的內容
使用摺疊式選單、分頁和「閱讀更多」等模式隱藏內容，同時確保隱藏的文字會在原生「在網頁中尋找」搜尋中顯示、允許搜尋引擎建立索引、支援網址片段深層連結，以及維持 ARIA 無障礙功能。
設定初始算繪的捲動目標
建立可捲動的元素清單 (例如圖片輪轉介面或即時通訊對話串)，在初始算繪時，可捲動至特定元素並顯示。
懸停時顯示工具提示
當使用者將滑鼠游標懸停在互動元素上、將焦點移至該元素或長按該元素時，系統應顯示工具提示或補充資訊，不需點選。
空間導覽 (方向鍵盤焦點)
使用方向鍵實作無障礙空間導覽，在不同的版面配置模式 (網格等) 中正確運作
滑動即可移除
讓使用者透過水平滑動手勢對清單中的項目執行操作 (移除、封存、標示為已讀等)，這樣他們就能快速處理項目，不必輕觸其他控制項。
滑動即可顯示
讓使用者在清單項目或內容窗格上水平滑動，顯示關聯動作按鈕或側邊選單，而不會自動觸發動作。
在程式輔助捲動完成後觸發效果
只有在透過程式輔助方式順暢捲動至目標元素後，才觸發視覺效果、動畫或焦點變更。
雙向平移
允許使用者在兩個方向上自由平移或捲動二維介面 (例如地圖、縮放圖片、無限畫布或大型資料格)，無論是對角線或在手勢中途變更方向，都不會將手勢鎖定在單一水平或垂直軸上。
表單
動畫選取挑選器
建立自訂選取元件，並為下拉式選單加入動畫效果。例如，選單會淡入或滑入檢視畫面，或選項在選取時會顯示動畫。
符合品牌形象的表單
讓核取方塊、圓形按鈕、範圍滑桿和進度列與網站的調色盤相符，不必替換成自訂元件。
符合品牌形象的範圍滑桿
使用自訂軌道、滑桿、填滿和焦點狀態，設定原生範圍滑桿的樣式，同時保留原生功能和無障礙功能。
品牌精選樣式
建立自訂選取元素，讓按鈕、挑選器、箭頭圖示和勾號，都能完美搭配品牌或設計系統的字體排版、顏色、間距和邊框處理方式。
建立符合最佳做法的付款表單
建立付款表單，收集卡片詳細資料，並提供正確的自動完成值和自動填入支援。
建立符合最佳做法的登入表單
建立登入表單，並提供正確的自動完成值和自動填入支援。
建立符合最佳做法的註冊表單
建立註冊表單，並提供正確的自動完成值和自動填入支援。
打造無障礙切換控制項
使用原生 HTML 切換屬性建構無障礙切換鈕，並在不支援時改用樣式核取方塊。
建立符合最佳做法的地址表單
建立地址表單，並設定正確的自動完成屬性和自動填入支援。
自訂選取器版面配置
建立自訂選取挑選器，以獨特或有趣的方式排列選項，而非傳統的堆疊選項清單。
表單欄位自動調整成符合內容大小
允許表單欄位放大或縮小，以配合使用者輸入的內容，例如使用者輸入或選取其他選項時。套用大小上限和下限，建立符合頁面設計的動態和回應式表單欄位。
表單
建構無障礙、安全且容易使用的網路表單的最佳做法。建立或修改表單、輸入內容和提交流程時，請參考本指南。
使用 CSS :autofill 醒目顯示使用者未編輯的瀏覽器自動填入欄位
使用 CSS 醒目顯示瀏覽器自動填入且使用者未編輯的表單欄位。
IME 安全的 Enter 鍵提交
在文字區域和單行輸入欄位 (即時通訊、搜尋、內嵌重新命名) 中，安全地實作「按下 Enter 鍵提交」功能，避免輸入法編輯器 (IME) 使用者提交不完整的文字。
必填欄位意見回饋
只有在使用者互動後，才針對略過或留空的必填表單欄位提供錯誤訊息，避免預先顯示錯誤，並確保能及時提供與使用者流程相關的意見回饋。
互動式多媒體選擇器 (可自訂選取)
建立自訂選取元件，其選項可包含複雜的 HTML 格式 (例如圖片、圖示和其他 RTF 格式)，而不只是純文字。
選取選單互動
只有在使用者與控制項互動後，才驗證是否已在選取選單中選擇非預設選項。
簡訊動態密碼表單驗證
自動擷取驗證碼，並提供無障礙表單輸入功能，驗證使用者電話號碼和透過簡訊傳送的動態密碼。
在互動後驗證輸入內容
使用者完成初步互動後，才顯示表單欄位驗證意見回饋 (例如密碼複雜度或電子郵件格式規定)，避免在載入網頁或使用者輸入時過早顯示錯誤。
HTML
無障礙網頁元件
根據預設，自訂元素應可供存取，透過 ElementInternals ARIA mixin 設定角色和 ARIA 狀態、使用 delegatesFocus 管理焦點，並將 ARIA 關係保留在單一 shadow root 中。
自訂元素
定義、註冊及管理自主自訂元素的生命週期，包括建構函式規則、生命週期回呼、升級時間、屬性/屬性反射，以及命名慣例。
與表單相關聯的自訂元素
使用 formAssociated 和 ElementInternals，讓自訂控制項原生參與表單，提交自己的值、整合限制驗證，並對重設、停用和狀態還原做出反應。
HTML
現代 HTML 架構、語意、原生互動式 API (Dialog、Popover、Details)、焦點管理和資源優先順序的行動導向指南。請參閱本指南，瞭解如何建構網頁文件、導入原生疊加層，或最佳化資源載入順序。
預先算繪自訂元素
伺服器端轉譯自訂元素，然後就地補充，不需重新轉譯或閃爍未套用樣式的內容。
Shadow DOM、範本和版位
使用 Shadow DOM 封裝元件的 DOM 和樣式、透過 HTML 範本有效建構樹狀結構，以及使用版位投射消費者內容。
設定網頁元件樣式
使用 :host 選取器、繼承和自訂屬性 (用於主題設定)、::slotted 和 ::part，以及元件內的層疊層和容器查詢，跨越陰影邊界設定樣式。
網頁元件簡介
編寫及使用網頁元件的入門和跨領域原則，涵蓋自訂元素、Shadow DOM、範本和版位、宣告式 Shadow DOM、跨 Shadow 邊界的樣式、表單關聯自訂元素，以及無障礙功能需求。建構可重複使用的 UI 元件、設計系統或伺服器算繪的自訂元素時，請參閱本指南。
CSS
以動畫方式呈現原始大小
流暢地為互動式元件 (例如摺疊式選單、選單和展開式資訊卡) 加上動畫，讓元件在自然尺寸之間切換。
使用原始大小計算
根據元素的固有大小計算其大小，同時確保符合指定設計限制。
根據子項狀態設定樣式
建構一個元件，根據其中一個子元素的狀態變更樣式。舉例來說，某個元件會根據主題切換鈕是否勾選，以淺色或深色模式顯示。
根據 At 規則支援，有條件地套用 CSS
只有在瀏覽器支援特定 at 規則時，才套用特定 CSS 規則或宣告。
依內容設定樣式
建構元件，根據是否包含特定子項元素，變更版面配置。舉例來說，如果元件包含圖片，請使用多欄版面配置，否則預設為單欄版面配置。
CSS 版面配置和回應式設計
現代 CSS 版面配置，例如 Flexbox、格線、子格線、容器查詢、錨定位置和內建大小。在設計回應式 UI 元件或頁面版面配置時，請運用這項技能。
CSS：現代化架構
現代 CSS 架構的行動導向指南，包括階層、選取器、範圍、巢狀結構和設計符記。編寫樣式或管理設計系統時，請參考本指南。
設計符記反應性
定義高階設計權杖，例如密度模式 (密集、標準、寬鬆) 或主題，並讓子系元件直接以適合元件的方式回應變更。
流暢擴充
根據父項容器的大小，流暢地縮放字型大小、間距和媒體大小等項目，而不是使用固定的中斷點
個別轉換屬性
為個別 CSS 轉換屬性 (例如 translate、rotate、scale) 設定動畫或覆寫，不受單一元素上其他轉換屬性的影響。
溢位裁剪控制項
調整元素的可見裁剪邊界，與內容邊緣、內邊距邊緣或邊框邊緣對齊，或與其中任一邊緣保持指定偏移量，更精細地控制內容裁剪方式。
使用 CSS 函式減少樣式重複
將複雜或動態的樣式邏輯封裝成可重複使用的函式 (例如根據一組輸入參數計算漸層的函式)，減少過度重複的樣式。
回應式設計
建構可配合容器和可視區域大小調整的 UI，包括容器查詢、動態可視區域單位、顯示比例和回應式字體排版。
選取器和 @ 規則組合
根據選取器和條件式 @ 規則的交集或聯集指定元素，同時盡量減少重複。
語意元件調整
使用 CSS 容器樣式查詢，建構可根據語意情境調整視覺邏輯的元件。
依大小設定樣式
建構元件，其樣式可依條件取決於自身寬度或高度，而非可視區域的寬度或高度。例如，資訊卡元件可根據大小變更版面配置，或行動號召按鈕可根據寬度，有條件地顯示輔助文字。
使用 :has() 設定父項樣式
當表單欄位無效時，設定該欄位父項元素 (例如標籤或欄位集) 的樣式。
根據數量和索引設定同層元素樣式
建立動態視覺光譜或版面配置，自動配合群組中的元素數量調整。
JavaScript
使用 Temporal 計算事件差異及設定時間長度格式
使用 Temporal.Duration 和 Intl.DurationFormat，計算日期和時間之間的經過時間或剩餘時間、平衡時間長度單位，以及設定人類可讀的本地化時間長度格式。
使用 Temporal 擷取與位置無關的資料和部分日期
使用 Temporal Plain 類型，建立與位置無關的日曆日期、時鐘時間、部分日期 (週期性生日、信用卡到期日) 和週期性每月間隔，不受時區偏移影響。
使用 Temporal 協調全球事件
安排未來會議或活動時，請明確繫結至地理 IANA 時區，確保活動時間不受日光節約時間 (DST) 轉換、時鐘調整期間「略過」或「重複」小時的影響，保持準確。
使用 Temporal.Instant 排序高精度時間戳記
使用 Temporal.Instant 剖析、排序及測量 ISO 8601 時間戳記 (子毫秒或奈秒) 之間的時間間隔，避免日期截斷衝突。
使用 Temporal 支援全球日曆系統
為國際使用者準確顯示及計算非公曆系統 (例如伊斯蘭曆、希伯來曆或農曆) 的日期。
WebAssembly
效能
拆分長時間任務
拆解繁重的同步處理作業 (複雜的運算和/或長迴圈) 或 DOM 更新，讓瀏覽器處理使用者輸入內容並重新繪製畫面。
計算前景總時間
計算使用者實際瀏覽網頁的總時間，不計入分頁在背景執行的時間。
條件式非同步依附元件
有條件地載入或初始化非同步依附元件 (例如匯入缺少的網頁功能 polyfill)，不需要在網頁的所有指令碼依附元件中進行複雜的協調。
防震和批次處理多個 Analytics 事件
將多個數據分析、遙測和 Core Web Vitals 事件去抖動並批次處理，合併到單一信標中，盡可能減少網路爭用和伺服器負載，同時仍能提供即時更新。
延遲轉譯大型內容
如果網頁內容繁多 (例如有長篇動態消息、大量文章或複雜的資訊主頁)，請延遲轉譯使用者無法立即看到的內容，縮短轉譯時間。
延遲工作，直到捲動結束
延後 DOM 更新、資料擷取、數據分析追蹤或版面配置重新計算等耗費資源的操作，直到捲動完成，以維持順暢捲動效能。
提供最佳化的裝飾圖片
同時提供新一代圖片格式 (例如 AVIF 或 WebP) 和多種像素密度 (例如 1x 和 2x)，提供最佳化的裝飾圖片 (例如背景、UI 圖示或複雜遮罩)，讓瀏覽器能根據使用者裝置的功能，動態協商檔案大小和視覺品質的最佳組合。
降低背景擷取的優先順序
降低使用 Fetch API 擷取背景資料的優先順序，避免與使用者發出的要求發生網路爭用。
偵測初始可見度狀態
即使指令碼是在使用者將網頁移至前景後以非同步方式載入，也能可靠地判斷網頁最初是否在背景載入。
有效率的背景處理
當元件不在螢幕上時，暫停背景 JavaScript 執行 (例如
<canvas> 動畫、WebGL 轉譯或高頻率 WebSocket 資料輪詢)，並在元件捲動回檢視畫面時及時恢復，藉此節省系統資源和電池續航力。透過狀態快取加快 SPA 檢視畫面轉換
在單頁應用程式 (SPA) 中，保留先前造訪過的檢視畫面的結構 DOM 狀態，而不是在每次導覽時刪除並重建，以便更快切換回這些檢視畫面。
無閃爍的用戶端 A/B 測試
使用用戶端 JavaScript 傳送及轉譯 A/B 測試、多變數測試或其他實驗，藉此修改或插入 HTML、CSS 和 JavaScript，而不會先顯示原始內容，然後閃爍或閃現實驗內容。
找出 INP 不佳的原因
找出執行速度緩慢的 JavaScript，以及其他導致 Interaction to Next Paint (INP) 回應速度不佳的原因。
找出執行負載過重的 JavaScript
找出最容易導致長動畫影格的指令碼
改善下一個網頁的載入效能
預先擷取或預先算繪使用者可能造訪的下一個網頁，提升載入網頁效能。
延遲載入影片和音訊
延後下載畫面外的影片和音訊素材資源 (包括影片代表圖片和預先載入的媒體資料)，直到媒體播放器接近可視區域，以節省頻寬並減少初始載入網頁期間的網路爭用。
評估互動和軟導覽繪製時間
評估使用者互動和用戶端導覽在畫面上算繪新內容更新所需的時間。
最佳化圖片優先順序
最佳化 Largest Contentful Paint (LCP) 候選圖片的載入優先順序，並降低非關鍵圖片的優先順序，減少關鍵資源載入延遲。
最佳化預先載入優先順序
最佳化預先載入內容的相對優先順序，減少重要資源載入延遲。
最佳化指令碼優先順序
最佳化指令碼的載入優先順序，提高重要非同步指令碼的優先順序，並降低非必要或內文後段指令碼的優先順序，改善排序並減少延遲。
最佳化複雜版面配置中的互動
避免在複雜的版面配置 (例如資料量龐大的資訊主頁或試算表樣式的格線) 中重新計算版面配置，讓互動更流暢、更靈敏 (降低 Interaction to Next Paint (INP) 分數)。
不按順序 (OOO) HTML 串流
使用宣告式方法，以稍後串流至相同 HTML 文件的內容，或透過 JavaScript API，更新網頁。
效能
提供可行的指南，協助您最佳化現代網頁應用程式。請參閱本指南，瞭解如何稽核效能、最佳化載入指標、修正緩慢互動，以及最佳化 Core Web Vitals (LCP、INP、CLS)
可靠地評估完整工作階段數據分析和遙測資料
在使用者造訪網頁的整個過程中，可靠地追蹤分析、Core Web Vitals、錯誤和遙測資料，並延遲傳送資料，直到使用者離開網頁。
解析度最佳化虛擬元素
在 CSS 虛擬元素 (例如
::before 和 ::after) 中使用解析度最佳化的圖片，減少 DOM 節點數量。依優先順序排定工作
安排不同優先順序的工作，確保優先執行重要工作，並延後背景工作。
無障礙設定
無障礙編碼指南
提供可行的程式碼編寫指南，協助您建構無障礙網頁應用程式，涵蓋語意 HTML、焦點管理、表單、媒體和測試。稽核或實作無障礙功能、鍵盤導覽或 ARIA 時，請使用這項技能。
無障礙錯誤公告
將程式輔助無障礙狀態 (例如 aria-invalid) 與視覺 :user-invalid 狀態同步，確保螢幕閱讀器使用者只有在互動後才會收到錯誤回饋，與視覺體驗一致。
無障礙生成內容
以無障礙方式使用 CSS 產生的內容 (
::before/::after)，包括為裝飾性內容提供替代文字。遵循作業系統文字縮放
遵循作業系統的網頁文字縮放偏好設定，讓字型大小、版面配置和以 rem 為單位的測量值符合使用者的無障礙設定。
安全性
比較及驗證網路來源和網站
安全地比較及驗證跨文件訊息和網址中的網路來源和網站，避免容易出錯的字串剖析。
使用 WebCrypto 加密用戶端資料
使用公開金鑰封裝或金鑰協議 (包括混合式和後量子保護) 建立共用密鑰，並透過經驗證的加密機制，在瀏覽器中加密機密資料。
區域網路存取權
從公開網頁應用程式存取使用者區域網路或回送介面上的資源。
密碼金鑰驗證
使用密碼金鑰驗證回訪者，以便進行主要登入。
密碼金鑰條件式建立 (登入後宣傳)
在現有使用者成功以密碼登入後，自動為其註冊密碼金鑰。
密碼金鑰管理
允許使用者查看及管理帳戶中註冊的密碼金鑰。
密碼金鑰重新驗證
在執行敏感操作前，使用已登入使用者的現有密碼金鑰驗證身分。
密碼金鑰註冊
為現有使用者帳戶註冊密碼金鑰。
密碼金鑰簡介
在網頁應用程式中導入 WebAuthn 和密碼金鑰的完整指南和跨領域原則。處理密碼金鑰註冊、驗證、管理或重新驗證時，請參考本指南。
使用 Trusted Types 防範 DOM 型 XSS 攻擊
定義 Trusted Types 政策來清理不受信任的 HTML、在寫入 innerHTML 等 DOM 接收器時使用該政策，並透過內容安全政策強制執行 Trusted Types，即可防範 DOM 型 XSS 攻擊。
使用立即 UI 模式快速登入
在導向登入頁面或中斷工作流程前，先使用已儲存的密碼金鑰或密碼，驗證回訪者。
使用連線許可清單限制傳出網路連線
限制網頁或 worker 只能與明確許可清單中的網路端點通訊，防止未經授權的第三方要求和用戶端資料竊取。
清理不受信任的 HTML
移除不安全的元素和屬性，安全地剖析及顯示使用者輸入的不信任 HTML 內容。
使用子資源完整性、CORS 和參照網址政策保護外部子資源
驗證從第三方來源載入的外部指令碼、樣式表、字型和圖片的加密完整性，並控管這些要求是否傳送憑證或參照網址。
使用 WebCrypto 簽署及驗證資料
使用傳統或抗量子 (後量子) 非對稱金鑰，在瀏覽器中簽署及驗證訊息、權杖或構件，確保資料完整性和真實性。
驗證電子郵件地址擁有權
在建立、登入或復原帳戶時，驗證使用者是否擁有電子郵件地址，不必傳送動態密碼或魔術連結電子郵件。
網路安全
網頁程式開發人員的預防性安全性指南 (XSS、CSP、Cookie、跨來源隔離)。運用這項技能，引導稽核、測試和部署安全性政策的流程，確保安全無虞。
隱私權
PWA
內建 AI
語言偵測
偵測使用者原創內容或現有網站內容的語言。
語言模型
使用 Prompt API 在瀏覽器中執行裝置端自然語言推論，並支援串流輸出、結構化 JSON 回覆和多輪對話管理。
摘要工具
使用裝置端 Summarizer API 產生文字內容摘要。
譯者
使用裝置端 Translator API 翻譯文字。