前言

這是我自己在追蹤的現代 CSS 特性清單——用來快速掃描、決定接下來要補實驗哪些技巧。依用途分成版面、選擇器、色彩、文字排版、動畫、表單、響應式、封裝效能、函式數學等類別，每一條列出用途、範例與瀏覽器支援度，並標記我是否已經實驗過。

最後一區（K）收的是 HTML 而不是 CSS。之所以放在同一份清單裡，是因為它們在做同一件事：把過去得寫一堆 JS 才做得到的效果，變成宣告式的一行——而且不少項目根本是配套的（appearance: base-select 與 <selectedcontent>、anchor positioning 與 popover、reading-flow 與 focusgroup），拆開反而不好用。

圖例說明

已實驗

  • ✅ = 我已實驗過
  • ⬜ = 尚未實驗

支援狀態（截至 2026 年 10 月，🟠 / 🔴 者變動快，上線前請再查 caniuse / MDN）

  • 🟢 穩定 — 主流瀏覽器普遍可用，可放心進 production
  • 🟡 較新 — 多數瀏覽器已支援，建議加 fallback
  • 🟠 實驗性 — 僅部分瀏覽器 / 需開旗標 / 剛上 Chrome
  • 🔴 提案中 — 規格仍在提案階段，目前無法在瀏覽器使用

A. 版面配置（Layout）

屬性 / 功能主要用途與使用時機範例支援已實驗
grid-template-rows: masonry磚牆式（瀑布流）排版，不用 JS。WebKit 的對案 display: grid-lanes 已在 Safari 實作（Safari 27.2 Beta 把 flow-tolerance 改名為 fit-tolerance），兩種寫法仍在收斂grid-template-rows: masonry;🟠✅
subgrid讓子網格繼承外層 grid 的軌道與 gap，對齊點變成外層基準；卡片內元素跨卡對齊超好用grid-template-columns: subgrid;🟢✅
Container Queries依「容器」大小做 RWD（而非螢幕），元件化的關鍵container-type: inline-size; + @container (width > 400px){}🟢✅
Anchor Positioning讓元素錨定到另一元素定位（tooltip / popover / 選單），取代大量 JS 計算anchor-name: --a; + top: anchor(--a bottom);🟠✅
@position-try錨定定位的 fallback：空間不足時自動翻面position-try-fallbacks: flip-block;🟠✅
reading-flow / reading-orderflex/grid 視覺順序被反轉時，修正鍵盤與報讀的閱讀順序（無障礙關鍵）reading-flow: flex-visual; / reading-order: 1;🟠✅
Gap Decorations（row-rule / column-rule / rule）直接在 grid/flex 的 gap 畫分隔線、控制樣式，不用再插 divider 元素；另有 rule-inset／rule-overlap／rule-visibility-items 等微調（Chrome/Edge 149 起，其他瀏覽器尚未）column-rule: 1px solid; row-rule: 1px solid; 或簡寫 rule: 1px solid;🟠✅
margin-inline邏輯屬性，一次設定行向左右邊距（常用 auto 置中）margin-inline: auto;🟢✅
多值 display（雙值語法）拆開寫「外部 × 內部」顯示：display: block flex 等；flex＝block flex、inline-flex＝inline flex。理解 display 的雙層本質，日常仍可續用單值縮寫display: inline flex;🟡✅
stretch 尺寸關鍵字讓元素撐滿容器可用空間（會算進 margin），取代 -webkit-fill-available 這類私有寫法（實測與網站檢查見這篇）width: stretch;🟡✅
單軸捲動容器只在一個方向捲動、另一個方向 clip，讓 position: sticky 在兩個方向分別受不同的捲動容器限制（例如表頭和第一欄各自固定）；Chrome 156 Betaoverflow: scroll clip;🟠⬜
溢位對齊 safe / unsafe置中的內容放不下時，safe 會改成靠起點對齊，避免內容被推到看不到、捲不到的地方；Safari 27.2 Beta 補上與 normal 搭配及固定定位的支援（放大畫面與鍵盤焦點的實測見這篇）align-items: safe center;🟡✅

B. 選擇器（Selectors）

屬性 / 功能主要用途與使用時機範例支援已實驗
:has()「父選擇器」／依後代或相鄰狀態選取，邏輯判斷神器.card:has(img){}🟢✅
::part()從外部樣式化 Web Component 內部指定元素（需懂 Shadow DOM）my-el::part(label){}🟢✅
:is() / :where()群組化選擇器；:where() 權重為 0（比 inline 還低），:is() 取最高權重成員:is(h1,h2) :where(.x){}🟢✅
nth-of 語法:nth-child(An+B of S)，在符合條件的子集內數第幾個:nth-child(2 of .active){}🟢✅
:placeholder-shownplaceholder 還在顯示時才套樣式（浮動標籤效果）input:placeholder-shown{}🟢✅
:in-range / :out-of-range表單數值在 min/max 範圍內外時的樣式input:out-of-range{}🟢✅
:user-valid / :user-invalid「使用者互動後」才顯示驗證狀態，不會一載入就爆紅input:user-invalid{}🟡✅
sibling-index() / sibling-count()取得元素在同層中的索引與總數，可做交錯動畫、動態寬度（Baseline 2026）--i: sibling-index();🟡✅
:heading一次選取所有標題；Safari 27 起支援，其他瀏覽器尚未:heading{}🟠⬜
Carousel 選擇器組::scroll-marker / scroll-marker-group / :target-current 做原生輪播與 Scrollspy；Chrome 154 新增 scroll-marker-group 的 links（預設）／tabs 模式，改變導覽點的焦點順序與 ARIA 語意:target-current{}🟠✅
媒體狀態偽類（:playing / :paused / :muted 等）依 <video>／<audio> 播放、暫停、靜音、緩衝的狀態直接套樣式，自訂播放器不必再用 JS 切 class（Safari 先支援，Chrome 156 Beta 加入，Firefox 尚未）video:paused + .play-btn{}🟠⬜
image-animation / :animated-image控制 GIF、APNG 這類動畫圖片要不要播放，並能選取動畫圖片；動畫 GIF 一直很難符合 WCAG 2.2.2「暫停、停止、隱藏」，無障礙價值高（Chrome 156 Beta）img:animated-image { image-animation: paused; }🟠⬜

C. 色彩（Color）

屬性 / 功能主要用途與使用時機範例支援已實驗
新色彩函式（oklch 為主）hwb/lab/lch/color() 等更廣色域；我已選定 oklch，支援 oklch(from …) 相對語法color: oklch(0.7 0.15 200 / 50%);🟢✅
color-mix()混合兩種以上的顏色（建議在 oklch 空間混），做 hover 變體、透明疊色；一次混三色以上目前是 Firefox 150、Safari 27color-mix(in oklch, red 40%, blue);🟢✅
contrast-color()依背景自動產生可讀的前景色（Baseline 2026）。只會回傳黑或白；我在 Chromium 153 實測它用 WCAG 2 公式挑對比較高的那個，數學上一定至少 4.58:1，保證 AA 但不保證 AAA，也不能選品牌色color: contrast-color(var(--bg));🟡✅
accent-color一行改掉 checkbox/radio/range 等系統元件主題色accent-color: rebeccapurple;🟢✅
light-dark()同一屬性同時給亮／暗兩值，搭配 color-scheme 免寫 media query；也可以放圖片（三大瀏覽器皆支援）color: light-dark(#000, #fff);🟢✅
font-palette / @font-palette-values彩色字型（COLR）可自訂調色盤@font-palette-values --p{...} + font-palette: --p;🟡✅
漸層指定內插色彩空間linear-gradient(in oklch …) 讓漸層過渡更均勻不灰濁background: linear-gradient(in oklch, #4ba3f7, #9d2398);🟢✅
alpha()相對色彩函式，只調整既有顏色的透明度，不必拆開重寫整個色值（Baseline 2026：Chrome 151、Firefox 155、Safari 27）（各種色彩寫法與對比的實測見這篇）color: alpha(from var(--brand) / 50%);🟡✅

D. 文字排版（Typography）

屬性 / 功能主要用途與使用時機範例支援已實驗
text-wrap: balance / prettybalance 平衡標題各行寬度；pretty 避免內文孤字（pretty 較新）text-wrap: balance;🟡✅
text-decoration-skip-ink底線遇到字母下伸部（g、y）時斷開，更好看；Chrome 155 Beta 另加入 text-decoration-skip-spaces，控制底線要不要略過空白text-decoration-skip-ink: auto;🟢✅
text-decoration-inset縮短或延長底線等裝飾線，正值內縮、負值外延，做底線動畫不必多包元素（Chrome 154）text-decoration-inset: 0.5em;🟠⬜
text-combine-upright直排文中把數字／英文橫置（「縱中橫」），中日文長文常用text-combine-upright: all;🟡✅
text-emphasis文字強調點／圈（跟著字中心），中日文標註常用text-emphasis: dot;🟢✅
ruby-align注音／拼音等 ruby 註記的對齊方式ruby-align: center;🟡✅
paint-order控制文字填色與外框繪製順序（做描邊字）paint-order: stroke fill;🟢✅
box-decoration-break: clone斷行／換頁時每段各自套用邊框圓角背景，連結 focus 特別有感box-decoration-break: clone;🟡✅
text-box-trim裁掉字體上下的多餘留白，做精準垂直對齊（Chrome、Safari 支援，Firefox 尚未）text-box: trim-both cap alphabetic;🟡✅
line-clamp（-webkit-line-clamp）限制幾行後顯示「…」；新標準 line-clamp 逐步取代 webkit 寫法-webkit-line-clamp: 3;（需 -webkit-box）🟢✅
hanging-punctuation行首／行尾標點懸掛到邊界外，對齊更整齊（Safari 為主）hanging-punctuation: first last;🟠⬜
font-variant-numeric: tabular-nums等寬數字，計時器／價格／百分比等會跳動的數字必備（字型需支援）font-variant-numeric: tabular-nums;🟢✅
lh 單位以行高為單位設 margin／間距，跟著字級縮放margin-bottom: 1.5lh;🟡✅
margin-trim剪掉容器內首尾子元素的外距，免除 :first/:last-child 歸零（Safari 為主，Chrome 155 Beta 加入）margin-trim: block;🟠⬜
text-fit自動縮放文字大小以填滿容器寬度，做響應式大標題不必再手算或靠 JS（Chrome 150 新增；一定要加百分比上限，否則放大頁面時字反而變小，實測見這篇）h1 { text-fit: grow per-line-all 200%; }🟠✅
text-autospace在中文與英文／數字之間自動加入適當間距，不必再手動打空白；Safari 27 另加入 insert 值text-autospace: normal;🟡✅
font-widthfont-stretch 的正式新名稱，選取窄體、寬體字型；舊名稱保留為別名（Baseline 2026）font-width: 75%;🟡⬜

E. 動畫與過渡（Animation & Transition）

屬性 / 功能主要用途與使用時機範例支援已實驗
捲動驅動動畫（原「@scroll-timeline」）以捲動進度而非時間驅動動畫；規格已改為 animation-timeline: scroll()/view()animation-timeline: scroll();🟠✅
@view-transition / transition-behavior頁面／狀態切換的過場動畫；allow-discrete 讓 display 等離散屬性可過渡transition-behavior: allow-discrete;🟡✅
@starting-style定義元素「首次出現」的起始樣式，可做 display:none → 顯示 的進場動畫@starting-style{ opacity:0; }🟡✅
backface-visibility3D 翻轉時是否顯示背面（翻卡效果）backface-visibility: hidden;🟢✅
prefers-reduced-motion偵測「減少動態」偏好，無障礙必備；可搭配 prefers-color-scheme 偵測深淺色@media (prefers-reduced-motion: reduce){}🟢✅

F. 表單與元件（Forms & Components）

屬性 / 功能主要用途與使用時機範例支援已實驗
field-sizing: content讓 input／textarea 依內容自動增長（Baseline 2026）field-sizing: content;🟡✅
可自訂 <select>（appearance: base-select）原生下拉可完全自訂樣式，選項可放圖示／HTML；搭配 ::picker(select)、::picker-icon 控制彈出層，並可用 <selectedcontent> 複製選中項目的內容。終於不必為了改樣式用 div 重刻 select——而重刻正是無障礙災難的常見來源（Chrome 135、Safari 27 支援，Firefox 尚未）select{ appearance: base-select; }🟡✅
<selectlist>（原 <selectmenu>）可高度自訂的下拉元件；已改名並整併進「可自訂 select」路線<selectlist>…</selectlist>🟠✅
::backdropdialog.showModal() 或全螢幕時的背後遮罩層樣式dialog::backdrop{}🟢✅

G. 響應式與使用者偏好（Responsive & Preferences）

屬性 / 功能主要用途與使用時機範例支援已實驗
Media Query 範圍語法用 <=／>= 寫斷點，免去 min-width 要配 320.01px 的痛@media (width >= 320px){}🟢✅
prefers-color-scheme偵測深／淺色主題偏好@media (prefers-color-scheme: dark){}🟢✅
prefers-contrast偵測使用者要更高／更低對比@media (prefers-contrast: more){}🟡✅
forced-colors高對比／強制色彩模式（Windows 高對比）下的調整@media (forced-colors: active){}🟢✅
resolution media依輸出裝置像素密度切換（如 Retina）@media (resolution >= 2dppx){}🟢✅
Style Queries @container style()依容器的自訂屬性值套樣式（如主題），元件變體超好用@container style(--theme: dark){}🟡✅
Scroll-State Queries依容器捲動狀態（如 stuck、snapped）套樣式；可偵測 sticky 是否黏住@container scroll-state(stuck: top){}🟠✅

H. 封裝與效能（Encapsulation & Performance）

屬性 / 功能主要用途與使用時機範例支援已實驗
Cascade Layers @layer用圖層管理權重優先序，馴服大型專案的 specificity@layer base, components, utilities;🟢✅
revert-rule把屬性退回到「如果這條規則不存在」時的值；和 revert（退回瀏覽器預設）、revert-layer（退回上一層 @layer）是同一家族（Baseline 2026）（和 revert、revert-layer 的比較見這篇）color: revert-rule;🟡✅
@scope樣式作用域限制在某區塊、可設下界，類似 CSS Modules 的作用域@scope (.card) to (.content){}🟡✅
contain宣告內部排版／樣式獨立，隔離重排範圍以提升效能contain: layout style;🟢✅
contain-intrinsic-size搭配 content-visibility: auto，先給預估尺寸避免捲動跳動，有 cache 後轉 autocontain-intrinsic-size: auto 100px;🟢✅
scrollbar-gutter: stable預留捲軸槽，避免捲軸出現時內容位移scrollbar-gutter: stable;🟡✅
scrollbar-color / scrollbar-width自訂捲軸顏色與粗細scrollbar-color: #888 #eee;🟡✅
@supports特性偵測，做漸進增強與 fallback@supports (display: grid){}🟢✅
at-rule()在 @supports 裡偵測某個 at-rule 支不支援，例如 @scope、@position-try，終於不用靠間接寫法猜（Firefox 157 起）@supports at-rule(@scope){}🟠⬜

I. 函式與數學（Functions & Math）

屬性 / 功能主要用途與使用時機範例支援已實驗
round() / mod() / rem()CSS 內做進位取整、取餘，對齊網格／節奏width: round(down, 15.5px, 4px);🟡✅
三角函式 sin/cos/tan圓形排列、波形、角度計算width: calc(sin(30deg) * 100px);🟢✅
calc-size() / interpolate-size對 auto／min-content 等關鍵字做動畫過渡，如未知高度的 accordion 展開；也可以搭配 round()，讓高度剛好是背景圖案的倍數，圖案不會被切掉（height: calc-size(auto, round(up, size, 48px))）interpolate-size: allow-keywords;🟠✅
random()CSS 原生隨機值（散布、抖動效果）rotate: random(-5deg, 5deg);🟠✅
if()在屬性值中做條件判斷（沒寫 else 時屬性會退回初始值，焦點外框可能整個消失，見這篇）display: if(style(--open: 1): block; else: none);🟠✅
@function自訂 CSS 函式與 mixin 概念，可帶參數回傳值（用來保證最小點擊區的實測見這篇）@function --double(--x){ result: calc(var(--x)*2); }🟠✅
progress()算出一個值落在兩個值之間的比例（0–1），做隨尺寸連續變化的樣式（Baseline 2026；Firefox 155、Safari 27 另支援 no-clamp，讓結果可以超出 0–1）（已套用在本站 h1、h2 的流體字級，讓畫面放大 200% 時標題也能放大 2 倍）opacity: progress(100cqw, 300px, 900px);🟡✅
attr() 用在任何屬性以前 attr() 只能用在 content，現在可以帶型別讀取 HTML 屬性，直接當作寬度、顏色等任何屬性的值（Chrome 先支援，Firefox 155 加入；用它讀 ARIA 屬性的實測見這篇）width: attr(data-w type(<length>));🟠✅
symbols()在 CSS 裡直接定義清單符號，不必另寫 @counter-style（Chrome 155 Beta）list-style: symbols(cyclic "◆" "◇");🟠⬜

J. 其他實用屬性（Misc）

屬性 / 功能主要用途與使用時機範例支援已實驗
原生巢狀（Native Nesting）類 Sass/SCSS 的巢狀寫法，免預處理器.card{ & .title{} }🟢✅
<img loading="lazy">圖片延遲載入，改善首屏效能<img loading="lazy">🟢✅
overscroll-behavior: contain區塊捲到底不再帶動外層捲軸（彈窗／側欄常用）overscroll-behavior: contain;🟢✅
object-view-box直接在 CSS 擷取圖片的局部區域，免另存裁切檔object-view-box: inset(10% 10% 10% 10%);🟠✅
響應式 iframe（frame-sizing）iframe 高度自動依內嵌內容調整，不必再用 postMessage 傳高度；內嵌頁面要加 <meta name="responsive-embedded-sizing"> 同意（Chrome 154）iframe { frame-sizing: content-height; }🟠⬜
scroll-snap-type: pair捲動吸附的新模式（Chrome 156 Beta），細節待正式版推出後再實測scroll-snap-type: pair;🟠⬜
JPEG XL（image/jxl）壓縮率比 JPEG 好、可無損轉換舊 JPEG 的新圖片格式；Safari 已支援，Chrome 155 Beta 加入解碼<source type="image/jxl" srcset="a.jxl">🟠⬜
獨立 transform 屬性translate／rotate／scale 各自成屬性，好分開做動畫rotate: 45deg; scale: 1.2;🟢✅
border-image用切片圖做複雜邊框，省去傳統切版煩惱border-image: url(frame.png) 30 round;🟢✅
background-clip: border-area把背景裁切到「邊框筆畫所在的區域」（會依 border-width／border-style 計算、忽略 border-color 的透明度），可直接用漸層做邊框，免去 border-image 的迂迴（Chrome 150 新增）（實測：強制色彩模式下漸層會被拿掉，但瀏覽器會把透明邊框換成文字色，邊框形狀不會消失）border: 3px solid transparent; background: linear-gradient(45deg, red, blue); background-clip: border-area;🟠✅
corner-shape超越 border-radius 的圓角形狀（squircle／切角等），搭配 border-radius 使用；Chrome 156 Beta 另加入簡寫 corner（用 App 圖示、優惠券、箭頭步驟、切角按鈕實測，見這篇）corner-shape: squircle; border-radius: 30px;🟠✅
字型平滑（-webkit-font-smoothing）深色模式讓文字不刺眼的關鍵：macOS 上淺色文字在深底會因次像素抗鋸齒而變粗發光，改用 grayscale 抗鋸齒後變細、不刺眼；非標準，僅特定平台有效-webkit-font-smoothing: antialiased;（+ -moz-osx-font-smoothing: grayscale;）🟡✅
@when / @elseCSS 的 if/else 條件塊；仍為提案，瀏覽器皆不可用@when supports(...){} @else{}🔴✅
Scroll anchoring（overflow-anchor）上方內容載入或插入時，瀏覽器自動維持目前的閱讀位置、畫面不跳動；預設開啟，個別元素可用 none 關閉。畫面跳動對認知或動作障礙者特別困擾（Safari 27 補上後，三大引擎到齊）overflow-anchor: none;🟡✅

K. HTML 元素與屬性（非 CSS，但同屬「宣告式取代 JS」的趨勢）

這一區嚴格說不是 CSS，但它們和現代 CSS 是同一個方向：把過去得寫一堆 JS 才做得到的事，改成宣告式寫法——而且多半直接影響無障礙品質，所以一併記在同一份清單裡。

K-1. 新的 HTML 元素

元素主要用途與使用時機範例支援已實驗
<geolocation>宣告式的定位請求按鈕，授權流程交給瀏覽器處理，並提供「使用者先前拒絕過」的恢復路徑（過去一旦被拒就沒救了）。不支援的瀏覽器會降級成 <span>，可漸進增強（實測：瀏覽器只比對按鈕自己的文字色與背景色，低於 3:1 就失效，但背景圖片、模糊、拿掉焦點框都擋不住）<geolocation onlocation="fn(event)">🟠✅
<usermedia>相機／麥克風的宣告式存取，直接把 MediaStream 交給頁面，不必自己呼叫 getUserMedia()，使用者封鎖過也能在頁面上直接恢復。只要影像或只要聲音的 <camera>／<microphone> 已在 Chrome 153 推出（實測：lang="zh-Hant-TW" 會讓按鈕變簡體、開啟後沒有狀態、鍵盤使用者按太快會失敗，見這篇）<usermedia lang="zh-TW">🟠✅
<install>PWA 安裝按鈕，文案與外觀由瀏覽器控制（使用者看到「安裝」就知道會發生什麼）。指定 installurl 可安裝其他網域的 app，能做成 app 目錄頁<install installurl="…" manifestid="…">🟠⬜
<model>像 <img> 一樣嵌入可互動的 3D 模型（USDZ 格式），可用 <source> 提供多格式、用 environmentmap 指定環境光<model src="a.usdz">🟠⬜

K-2. 新的 HTML 屬性與行為

屬性 / 功能主要用途與使用時機範例支援已實驗
focusgroup讓複合元件（工具列、頁籤列、選單等）用宣告式就具備方向鍵導覽、保證的 Tab 停留點，以及「記住上次焦點」的行為——這正是 WAI-ARIA 鍵盤模式要求的做法，過去得自己手刻 roving tabindex（Chrome 150 新增；要寫行為類型，只寫 focusgroup 沒有效果，見實測文章）<div focusgroup="toolbar">…</div>🟠✅
Invoker Commands（command / commandfor）用宣告式 HTML 按鈕控制 popover／dialog，免寫 JS。已 stable 的指令：show-modal、close、request-close、toggle-popover、show-popover、hide-popover（Baseline 2025，未來會擴充到媒體控制、複製文字等）<button command="show-modal" commandfor="dlg">開啟</button>🟡✅
Interest Invokers同一套 command 機制，但改用「hover／focus 表達興趣」觸發而非點擊——可以做出不寫 JS 的原生 tooltip<button interestfor="tip">🟠✅
hidden="until-found"內容摺疊起來，但仍能被瀏覽器的頁內搜尋命中，命中時自動展開。長文的摺疊段落、FAQ 用這個才不會讓內容變成搜不到<div hidden="until-found">🟡✅
popover="hint"專給 tooltip 類的 popover：保有 light-dismiss，但只會關掉其他 hint，不會把主要的 popover 一起關掉<div popover="hint">🟡✅
sizes="auto"響應式圖片不用再自己算 sizes，交給瀏覽器；搭配 srcset 與 loading="lazy" 使用（Chrome、Firefox、Safari 27 皆已支援）（實測與套用到我作品集的結果見這篇）<img srcset="…" sizes="auto">🟡✅
宣告式 Shadow DOM不寫 JS 就能建立 Shadow DOM，SSR 輸出可以直接帶著走<template shadowrootmode="open">🟢✅
Element.setHTML()安全版的 innerHTML：插入時自動清掉 <script>、事件屬性等危險標記（Sanitizer API），和宣告式 Shadow DOM 文章提到的 setHTMLUnsafe() 是一組；Firefox 157 改為解析時就清理，其他瀏覽器請以 caniuse 為準（實測預設設定會清掉所有 aria-*、role，見這篇）el.setHTML(userInput);🟠✅
shadowrootreferencetarget讓 Shadow DOM 外面的 <label>／aria-* 能指向內部真正的 input——解決 web component 長年的標籤關聯難題（實測與 UI Kit 的例子見這篇）<template shadowrootmode="open" shadowrootreferencetarget="real-input">🟠✅
<h1> 巢狀尺寸修正UA 樣式表變更：<h1> 放在 <section> 裡不再被自動縮小，標題階層的視覺呈現終於可預期（實測與我網站的標題調整見這篇）—🟢✅
ariaNotify()直接請螢幕閱讀器念出一段訊息（例如「已加入購物車」），取代在頁面藏一個 aria-live 區塊再塞文字的舊做法。它是 DOM API 而不是 HTML 屬性，但它取代的正是那套 HTML 屬性寫法（Chrome 141、Firefox 150 起；Safari 的資料互相矛盾，請以實測為準）document.ariaNotify("已加入購物車");🟡✅

K-3. 提案／原型階段（先知道有這回事就好）

功能主要用途支援已實驗
Declarative Partial UpdatesHTML 串流式的局部更新，不換頁就注入內容；未來可能出現原生的 <include> 元素🔴⬜
<persistentwidget>同源頁面之間導覽時仍持續存在的嵌入內容（例如播放器不中斷）🔴⬜
HTML-in-Canvas（layoutsubtree）在 canvas 上渲染可互動的 HTML🔴⬜

建議優先補實驗的清單

原本列在這裡的幾項都已經打勾了。以下是還沒打勾的項目中，我接下來想先做的：這兩項都要等 Chrome 156 正式版才測得到（我測的 153 裡，overflow: scroll clip 的 clip 還會被改成 hidden），其中動畫圖片那一項的無障礙價值其實最高。

  1. 單軸捲動容器（overflow: scroll clip）——資料表的表頭和第一欄同時固定，鍵盤能不能捲動。
  2. image-animation／:animated-image——讓動畫 GIF 可以暫停，直接對應 WCAG 2.2.2。

提醒：標為 🟠 / 🔴 的多為 2025–2026 才進 Chrome 或仍在提案的特性，支援度每季都在變。實際導入 production 前，請以 caniuse.com 與 MDN 的最新資料為準，並記得為新特性加 @supports fallback。

相關連結