發布日期：2026 年 5 月 19 日
這份清單列出新版「現代網頁指南」中提供的所有用途。
accessibility
accessible-error-announcement
將程式輔助無障礙狀態 (例如 aria-invalid) 與視覺 :user-invalid 狀態同步，確保螢幕閱讀器使用者只會在互動後收到錯誤回饋，與視覺體驗一致。
使用功能：
built-in-ai
language-detection
使用功能：
language-model
使用 Prompt API 在瀏覽器中執行裝置端自然語言推論，並提供串流輸出、結構化 JSON 回應和多輪對話管理功能。
使用功能：
summarizer
使用裝置端 Summarizer API 產生文字內容摘要。
使用功能：
translator
使用功能：
css
highlight-text-ranges
醒目顯示網頁上的任意文字範圍，例如搜尋結果、拼字錯誤或共同編輯游標。
使用功能：
forms
animated-select-picker
建立下拉式選單會顯示動畫的自訂選取元件。例如，選單淡入或滑入畫面，或選項在選取時會產生動畫。
使用功能：
autofill-address-form
建立地址表單，並使用正確的自動完成屬性和自動填入支援功能。
使用功能：
autofill-highlight-inputs
使用 CSS 醒目顯示瀏覽器自動填入但使用者未編輯的表單欄位。
使用功能：
autofill-payment-form
建立付款表單，收集卡片資料，並提供正確的自動完成值和自動填入支援。
使用功能：
autofill-sign-in-form
建立登入表單，並提供正確的自動完成值和自動填入支援。
使用功能：
autofill-sign-up-form
建立註冊表單，並提供正確的自動完成值和自動填入支援。
使用功能：
brand-consistent-forms
將核取方塊、圓形按鈕、範圍滑桿和進度列與網站的調色盤相符，而不需以自訂元件取代。
使用功能：
branded-select-styling
建立自訂選取元素，讓按鈕、挑選器、箭頭圖示和勾號都能完美配合品牌或設計系統的排版、顏色、間距和邊框處理方式。
使用功能：
custom-select-picker-layouts
建立自訂選取器，選項會以獨特或有趣的方式排列，而非傳統的堆疊選項清單。
使用功能：
form-fields-automatically-fit-contents
允許表單欄位放大和縮小，以配合使用者輸入的內容，例如使用者輸入文字或選取其他選項時。套用大小上限和下限，建立符合網頁設計的動態回應式表單欄位。
使用功能：
required-field-feedback
使用者互動後才針對略過或留空的必填表單欄位提供錯誤訊息，避免發生搶先錯誤，並確保意見回饋及時且與使用者流程相關。
使用功能：
rich-media-picker
建立自訂選取元件，選項可包含複雜的 HTML 格式 (例如圖片、圖示和其他 RTF 格式)，而不只是純文字。
使用功能：
select-menu-interaction
只有在使用者與控制項互動後，才驗證是否已在選取選單中選擇非預設選項。
使用功能：
validate-input-after-interaction
只在使用者完成初步互動後，才顯示表單欄位驗證意見回饋 (例如密碼複雜度或電子郵件格式規定)，避免在載入網頁時或使用者輸入內容時發生錯誤。
使用功能：
passkeys
passkey-authentication
使用密碼金鑰驗證回訪者，以便進行主要登入。
使用功能：
passkey-conditional-create
在使用者成功登入密碼後，為現有使用者無聲註冊密碼金鑰。
使用功能：
passkey-management
允許使用者查看及管理已註冊到帳戶的密碼金鑰。
使用功能：
passkey-reauthentication
在執行敏感操作前，使用現有密碼金鑰驗證已登入使用者的身分。
使用功能：
passkey-registration
為現有使用者帳戶註冊密碼金鑰。
使用功能：
performance
batch-analytics-events
在單一信標中，將多個數據分析事件去抖動並批次處理，以盡量減少網路爭用和伺服器負載，同時仍提供即時更新。
使用功能：
break-up-long-tasks
請將耗用大量資源的同步處理 (複雜的運算和/或長時間迴圈) 或 DOM 更新作業拆開，讓瀏覽器處理使用者輸入內容並重新繪製畫面。
使用功能：
calculate-total-foreground-time
計算使用者實際瀏覽網頁的總時間，排除分頁在背景執行的時間。
使用功能：
conditional-async-dependencies
有條件地載入或初始化非同步依附元件 (例如匯入缺少的網頁功能適用的 Polyfill)，不必在網頁的所有指令碼依附元件中進行複雜的協調作業。
使用功能：
defer-rendering-heavy-content
如果網頁內容繁多 (例如含有長動態消息、大量文章或複雜資訊主頁)，請延遲轉譯使用者不會立即看到的內容，縮短轉譯時間。
使用功能：
defer-work-until-scroll-ends
將 DOM 更新、資料擷取、Analytics 追蹤或版面配置重新計算等耗用資源的作業延後到捲動完成後再執行，以維持流暢的捲動效能。
使用功能：
deprioritize-background-fetches
使用 Fetch API 擷取背景資料時，請降低優先順序，避免與使用者發出的要求發生網路爭用。
使用功能：
detect-initial-visibility-state
即使在使用者將網頁移至前景後，指令碼是以非同步方式載入，也能可靠地判斷網頁是否最初是在背景載入。
使用功能：
efficient-background-processing
當元件不在畫面上時，暫停執行背景 JavaScript (例如 <canvas> 動畫、WebGL 算繪或高頻率 WebSocket 資料輪詢)，並在元件捲動回畫面時及時恢復執行，藉此節省系統資源和電池續航力。
使用功能：
faster-spa-view-transitions
保留單頁應用程式 (SPA) 中先前造訪檢視區塊的結構化 DOM 狀態，而非在每次導覽時毀損並重建，藉此加快轉換速度。
使用功能：
full-session-analytics
在使用者瀏覽網頁的整個過程中，可靠地追蹤數據分析、錯誤和遙測資料，並延後傳送資料，直到使用者離開網頁為止。
使用功能：
identify-heavy-scripts
找出導致動畫影格時間過長的指令碼
使用功能：
identify-inp-causes
找出影響 INP 指標的緩慢 JavaScript
使用功能：
improve-next-page-load-performance
預先擷取或預先算繪使用者可能造訪的下一個頁面，提升網頁載入效能。
使用功能：
interactions-in-complex-layouts
避免在複雜的版面配置 (例如資料量大的資訊主頁或試算表樣式的格線) 中重新計算版面配置，讓互動更快速且更具回應性 (降低 Interaction to Next Paint (INP) 分數)。
使用功能：
optimize-image-priority
最佳化 Largest Contentful Paint (LCP) 候選圖片的載入優先順序，並降低非重要圖片的優先順序，以減少重要資源載入延遲。
使用功能：
optimize-preload-priority
請調整預先載入內容的相對優先順序，減少重要資源載入延遲。
使用功能：
optimize-script-priority
提高重要非同步指令碼的載入優先順序，並降低非必要或延後主體指令碼的優先順序，藉此改善排序並減少延遲，進而提升指令碼的載入優先順序。
使用功能：
resolution-optimized-pseudo-elements
在 CSS 虛擬元素 (例如 ::before 和 ::after) 中使用經過解析度最佳化的圖片，減少 DOM 節點數量。
使用功能：
schedule-tasks-by-priority
排定不同優先順序的工作，確保重要工作優先執行，背景工作則延後執行。
使用功能：
sequence-distributed-events
以奈秒解析度記錄時間戳記，在分散式微服務或高輸送量追蹤環境中記錄及排序作業。
使用功能：
user-experience
adapt-scrollbar-to-contrast-preferences
為偏好高對比介面的使用者提升捲軸可見度
使用功能：
anchor-positioning-tab-underline
在兩個目標元素位置之間，順暢地轉換元素。舉例來說，在先前選取的分頁和目前選取的分頁之間移動所選分頁的底線。
使用功能：
animate-element-entry-exit
在元素新增/移除 DOM 或顯示值切換時，順暢地隱藏/顯示元素。
使用功能：
animate-to-from-top-layer
在對話方塊、彈出式視窗和工具提示等元素進入/退出頂層時加入動畫效果。
使用功能：
animate-to-intrinsic-sizes
順暢地將互動式元件 (例如手風琴、選單和展開式卡片) 動畫化為自然尺寸，或從自然尺寸動畫化。
使用功能：
apply-webgl-shaders
使用 WebGL 著色器將自訂視覺效果套用至 HTML 內容。
使用功能：
calculate-event-differentials
計算日期和時間之間的剩餘時間和時長。
使用功能：
calculate-with-intrinsic-sizes
根據元素的固有大小計算大小，同時確保元素符合指定的設計限制。
使用功能：
capture-location-agnostic-data
記錄不應根據使用者所在位置變更的依序資料，例如生日、週期性鬧鐘或國定假日。
使用功能：
carousel-slide-effects
建立含有圖片或其他視覺元素的投影片輪播，每張投影片進入/置中/離開捲軸時都會產生動畫。例如，投影片可能會淡入/淡出、旋轉、放大或縮小等。
使用功能：
carousel-snap-highlights
在捲動吸附輪轉介面、藝廊或全頁滑動體驗中，以視覺化方式醒目顯示目前吸附的非互動式項目。例如在資訊卡固定時展開，或顯示隱藏的內容。
使用功能：
child-state-based-styling
建構元件，根據其中一個子項元素的狀態變更樣式。舉例來說，根據主題切換按鈕是否勾選，元件會以淺色或深色模式算繪。
使用功能：
complex-shapes
將元素及其內容剪輯成任意形式的形狀，例如符號、筆觸或有機紋理，打造更具表現力的設計。
使用功能：
component-specific-light-dark-theme
強制特定元素使用淺色或深色模式 (例如程式碼區塊、媒體播放器等)，不受網頁配色影響。
使用功能：
consistent-cross-document-transitions
請先確保重要網頁狀態已載入並穩定，再啟動跨文件檢視畫面轉場效果。也就是說，在轉換執行前，系統會載入並套用重要 CSS 樣式、載入並執行重要 JavaScript，以及剖析使用者初始檢視網頁時可見的 HTML。
使用功能：
content-based-styling
建立元件，根據是否包含特定子項元素來變更版面配置。舉例來說，如果元件包含圖片，請使用多欄版面配置，否則預設為單欄版面配置。
使用功能：
coordinate-global-events
將未來的會議或活動明確繫結至地理位置 IANA 時區，這樣一來，無論日光節約時間 (DST) 轉換、時鐘變更期間「跳過」或「重複」的小時，活動時間都會保持準確。
使用功能：
cross-document-transitions
在全頁面導覽之間建立流暢的無縫轉場效果，例如交叉淡化、自訂顯示效果，或將內容從一個頁面變形到下一個頁面。
使用功能：
customize-scrollbar-color-and-thickness
自訂捲軸的顏色或粗細
使用功能：
dark-mode
實作深色模式支援功能時，請尊重使用者的淺色/深色主題偏好設定，並調整瀏覽器 UI (例如捲軸、表單控制項等)
使用功能：
declarative-button-actions
以宣告方式將按鈕連結至任何元素，使用宣告式按鈕指令、叫用程式指令、按鈕指令、自訂指令或宣告式切換動作，觸發應用程式專屬的自訂動作。
使用功能：
declarative-dialog-popover-control
透過按鈕切換對話方塊或彈出式視窗的顯示狀態，不必編寫 JavaScript。
使用功能：
deliver-optimized-decorative-images
同時提供新一代圖片格式 (例如 AVIF 或 WebP) 和多種像素密度 (例如 1x 和 2x)，讓瀏覽器能根據使用者裝置的功能，動態協商出最佳的檔案大小和影像品質組合，進而提供最佳化的裝飾圖片 (例如背景、UI 圖示或複雜遮罩)。
使用功能：
design-token-reactivity
定義高階設計符記，例如密度模式 (緊湊、舒適、寬敞) 或主題，並讓子項元件直接以適合元件的方式回應變更。
使用功能：
directional-navigation-transitions
將視覺狀態變化設為動畫，反映使用者的導覽流程方向，例如向前時從右側滑入新內容，或返回上一個畫面時從左側滑入。
使用功能：
dynamic-sibling-animations
在同層級元素之間交錯播放動畫或轉場效果，讓每個元素在根據其在同層級清單中的位置計算延遲時間後，再開始播放動畫。
使用功能：
dynamic-sibling-styling
建立動態視覺光譜或版面配置，自動配合群組中的元素數量調整。
使用功能：
export-html-media-from-canvas
在畫布中擷取動態 HTML 內容，並匯出為圖片或影片畫面。
使用功能：
expose-canvas-content-to-browser-features
向輔助技術、翻譯或閱讀模式等瀏覽器功能公開畫布中算繪的內容。
使用功能：
flicker-free-client-side-ab-testing
使用用戶端 JavaScript 放送及轉譯 A/B 測試、多變數測試或其他實驗，以變更或插入 HTML、CSS 和 JavaScript，而不會先顯示原始內容，然後閃爍或閃動，再顯示實驗內容。
使用功能：
fluid-scaling
根據父項容器的大小，平滑縮放字型大小、間距和媒體大小等項目，而不是使用固定中斷點
使用功能：
format-human-readable-durations
以可讀的本地化格式向使用者顯示經過時間或持續時間，並視情況彈性顯示詳細的單位細目 (例如「1 小時 30 分鐘」) 或單位總數 (例如「90 分鐘」)。
使用功能：
group-element-transitions
使用相同的轉場邏輯，同時轉場一組類似元素，例如從購物車中移除產品，並讓所有其他產品動畫轉場至新位置。
使用功能：
improve-text-layout-and-legibility
啟用這項功能後，瀏覽器會在文字換行時套用平均平衡的換行符，改善簡短獨立文字內容 (例如不超過幾行的標題) 的版面配置和可讀性。
使用功能：
individual-transform-properties
為單一元素上的其他轉換屬性設定動畫或覆寫這些屬性，例如平移、旋轉、縮放。
使用功能：
interactive-content-in-3d-scenes
將互動式 HTML 元素整合至 3D 場景。
使用功能：
interactive-content-reveal
建立互動式揭露效果，例如跟隨使用者指標的聚光燈，揭露圖片或 UI 區段中的詳細資料。
使用功能：
interest-triggered-action-previews
在使用者表示有興趣 (例如懸停、聚焦或長按) 但尚未點擊按鈕時，顯示按鈕效果的即時預覽畫面。
使用功能：
interest-triggered-tooltips
使用者只要將游標懸停在互動式元素上、將焦點移至元素上或長按元素，系統就會顯示工具提示或補充資訊，不需要點按。
使用功能：
light-dismiss-a-dialog
建立可使用輕觸關閉 (即點選或輕觸對話方塊外部) 關閉的強制回應對話方塊
使用功能：
manage-recurring-intervals
計算訂閱帳單或薪資週期，並自動調整月底轉換等特殊情況 (例如在 1 月 31 日加上一個月)，確保週期計算準確無誤。
使用功能：
model-partial-time-concepts
建立本質上缺少標準元件 (例如特定年份、日期或日期) 的日期和時間概念，且不使用會導致計算錯誤的任意預留位置值。
使用功能：
move-dom-element-without-losing-state
移動或重新設定 DOM 元素的父項，且不會遺失重要元素狀態，例如互動狀態 (「:focus」/「:active」)、<iframe>載入狀態、動畫/轉場效果狀態等
使用功能：
navigation-drawer
建立導覽匣元件，在從選單按鈕觸發時，從側邊滑入，疊加在現有頁面內容上方，並在關閉時滑出 (透過滑動、輕觸外部或按下 Esc 鍵)。
使用功能：
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
調整元素的顯示裁剪邊界，與內容邊緣、邊框間距邊緣或邊框邊緣對齊，或與上述任一邊緣保持特定偏移量，進一步控管內容的裁剪方式。
使用功能：
parallax-scroll-effects
建立捲動式效果 (例如視差)，讓前景和背景圖層以不同速率移動，在使用者捲動時營造景深感。
使用功能：
persistent-app-tours
使用繫結的原生疊加層建立持續顯示的入門導覽，在使用者互動期間保持開啟。
使用功能：
persistent-toast-notifications
建立不干擾使用者的 Toast 和疊加通知，用於持續性、可堆疊的訊息和狀態通訊。
使用功能：
persistent-top-layer-ui
當基礎 DOM 節點在 DOM 中移動或重新設定父項時，請讓強制回應對話方塊、全螢幕元素或原生快顯視窗保持開啟狀態，並維持功能運作。
使用功能：
physics-based-easing
建立自訂的物理動畫和轉場效果，例如彈跳和彈簧，比傳統的緩和曲線更自然且引人入勝。
使用功能：
platform-controls-dismiss-dialog
建立可使用標準平台專屬使用者動作關閉的強制回應對話方塊，例如在電腦平台按下 Esc 鍵，或在行動平台使用「返回」或「關閉」手勢
使用功能：
position-aware-tooltips
使用方向箭頭 (或其他視覺樣式) 建構工具提示和彈出式視窗，當元素翻轉至備用位置時，這些箭頭會自動指向正確方向。
使用功能：
precise-text-alignment
無論使用哪種字型，都能精確垂直對齊文字。舉例來說，文字上下方的視覺邊框間距完全相等，或是文字與相鄰的圖示或圖片完美對齊。
使用功能：
prevent-text-wrapping
確認瀏覽器不會在文字中插入分行符號，且允許文字溢出容器。
使用功能：
pull-to-reveal
建構「下拉顯示」功能，讓使用者下拉螢幕即可顯示更多內容，例如搜尋列。
使用功能：
reduce-style-repetition
將複雜或動態的樣式邏輯封裝至可重複使用的函式 (例如根據一組輸入參數計算漸層的函式)，減少過多的樣式重複。
使用功能：
resilient-context-menus-and-nested-dropdowns
建構無障礙的彈性選單、工具提示、下拉式選單或情境式重疊畫面，這些項目必須繫結至特定 UI 元素，確保重疊畫面遇到檢視區塊邊緣時會自動重新定位 (例如翻轉軸)，確保不會遭到截斷。
使用功能：
same-document-transitions
在單頁應用程式 (SPA) 中，透過平滑變形大小、位置或其他樣式屬性，以視覺化方式連結不同頁面狀態或導覽中的持續性元素 (例如將產品縮圖展開為全出血的主頁橫幅)。
使用功能：
scroll-entry-exit-effects
在使用者捲動時，針對進入和離開捲動埠 (或檢視區塊) 的元素，建立淡入、放大或其他複雜的顯示類型效果。
使用功能：
scroll-position-aware-elements
根據使用者是否捲動頁面，建構會顯示和消失的浮動按鈕或小工具 (返回頂端、捲動至底部、即時通訊啟動器等)。
使用功能：
scroll-progress-indicator
建立捲動進度列、分段進度追蹤器，或任何視覺功能提示，讓使用者瞭解自己捲動網頁或區段的進度。
使用功能：
scroll-snap-realtime-feedback
使用者捲動與對齊格線的內容時，在捲動手勢完成前，連結的 UI 元素會提供即時視覺回饋。
使用功能：
scroll-snap-state-sync
在可捲動的容器中，將導覽指標、連結的內容面板和 Analytics 追蹤功能，與主動貼齊的項目同步。
使用功能：
scroll-target-on-load
建構可捲動的元素清單 (例如圖片輪播或即時通訊對話串)，在初始算繪時，可顯示捲動至特定元素檢視區塊的清單。
使用功能：
scrollability-affordance-hints
建立捲動陰影疊加層、漸層淡出效果或方向箭頭指標，只有在該方向有更多內容可捲動時才會顯示。
使用功能：
scrollytelling
在目標元素上製作視覺屬性動畫，例如淡化背景、變更背景顏色，或建立捲動說故事體驗，完全由另一個元素的捲動埠位置驅動。
使用功能：
search-hidden-content
使用手風琴、分頁和「閱讀更多」部分等模式隱藏內容，同時確保隱藏的文字會在原生「在網頁上尋找」搜尋期間顯示，允許搜尋引擎建立索引，支援網址片段深層連結，並維持 ARIA 無障礙功能。
使用功能：
shaped-cutouts
結合多個形狀，在元素中建立複雜的剪裁或「去背」效果，例如在元素中新增凹口。
使用功能：
shrinking-header-on-scroll
在捲動時順暢地為固定式頁首或全頁封面製作動畫，在預先定義的捲動距離內動態縮小、加上陰影，並轉換版面配置。
使用功能：
size-aware-styling
建構元件，其樣式可有條件地依附於自身寬度或高度，而非可視區域的寬度或高度。舉例來說，卡片元件可根據大小變更版面配置，或行動號召按鈕可根據寬度有條件地顯示輔助文字。
使用功能：
soft-edge-content-fade
在內容邊緣套用透明度漸層，標示可進一步捲動的區域，或遮蓋付費牆文字。
使用功能：
stabilize-reactive-state
在資料驅動的檢視畫面中管理工作截止日期或時間表，不會因共用的可變動狀態而產生非預期的副作用。
使用功能：
stack-drill-down
建構全螢幕階層式導覽，讓使用者深入瞭解巢狀檢視畫面，並滑動或返回，同時保持瀏覽器記錄同步。
使用功能：
style-parent-with-has
在表單欄位無效時，為表單欄位的父項元素 (例如標籤或欄位集) 設定樣式。
使用功能：
support-global-calendar-systems
為國際使用者準確顯示和計算非公曆系統 (例如伊斯蘭曆、希伯來曆或農曆) 的日期。
使用功能：
swipe-to-remove
讓使用者透過水平滑動手勢對清單中的項目執行動作 (移除、封存、標示為已讀取等)，以便快速處理項目，不必輕觸個別控制項。
使用功能：
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
定義字型樣式，確保偏好字型與其中一個備用字型 (或反之) 之間發生交換時，文字仍可閱讀且視覺上一致。
使用功能：
visually-stable-mixed-fonts
定義字型樣式，確保在多種字型用於算繪單一文字區塊時，文字仍清晰易讀且視覺上一致。
使用功能：
visually-texture-content
為元素套用逼真的風化和紋理模式，呈現有機、老化或實體材質的外觀。
使用功能：
webmcp
agentic-forms
使用 WebMCP 屬性為標準 HTML 表單加上註解，將用戶端功能公開為 AI 代理的工具。
使用功能：
agentic-javascript-tools
使用 WebMCP Imperative API，以程式輔助方式將用戶端 JavaScript 函式註冊為 AI 代理的工具。
使用功能：