---
title: "現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序 - Neil 的作品集"
description: "一份可快速掃描的現代 CSS 與 HTML 特性清單，依版面、選擇器、色彩、文字、動畫等分類，另收錄 `<geolocation>`、`focusgroup`、Invoker Commands 等宣告式 HTML 新特性，逐條整理用途、範例與瀏覽器支援度。"
canonical_url: "https://neillin.com/blog/css-techniques-checklist/"
last_updated: 2026-10-13
meta:
  author: Neil
  keywords: "無障礙網頁, 設計管理, 資料視覺化, UI, UX, 切版"
  "og:description": "一份可快速掃描的現代 CSS 與 HTML 特性清單，依版面、選擇器、色彩、文字、動畫等分類，另收錄 `<geolocation>`、`focusgroup`、Invoker Commands 等宣告式 HTML 新特性，逐條整理用途、範例與瀏覽器支援度。"
  "og:image": "https://neillin.com/_og/s/o_8dc8bf400d9c777f.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序 - Neil 的作品集"
  "twitter:image": "https://neillin.com/_og/s/o_8dc8bf400d9c777f.png"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

# 現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序

2026年7月6日·更新日期 2026年10月13日  

[前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSSHTML前端開發網頁設計響應式設計無障礙瀏覽器支援

  

## 前言

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

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

## 圖例說明

**已實驗**

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

**支援狀態**（截至 2026 年 10 月，🟠 / 🔴 者變動快，上線前請再查 [caniuse](https://caniuse.com "另開新視窗") / 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-order` | flex/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` 這類私有寫法（實測與網站檢查見 [這篇](https://neillin.com/blog/css-stretch/)） | `width: stretch;` | 🟡 | ✅ |
| 單軸捲動容器 | 只在一個方向捲動、另一個方向 `clip`，讓 `position: sticky` 在兩個方向分別受不同的捲動容器限制（例如表頭和第一欄各自固定）；Chrome 156 Beta | `overflow: scroll clip;` | 🟠 | ⬜ |
| 溢位對齊 `safe` / `unsafe` | 置中的內容放不下時，`safe` 會改成靠起點對齊，避免內容被推到看不到、捲不到的地方；Safari 27.2 Beta 補上與 `normal` 搭配及固定定位的支援（放大畫面與鍵盤焦點的實測見 [這篇](https://neillin.com/blog/css-safe-alignment/)） | `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-shown` | placeholder 還在顯示時才套樣式（浮動標籤效果） | `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 27 | `color-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）（各種色彩寫法與對比的實測見 [這篇](https://neillin.com/blog/css-alpha-revert-rule/)） | `color: alpha(from var(--brand) / 50%);` | 🟡 | ✅ |

## D. 文字排版（Typography）

| 屬性 / 功能 | 主要用途與使用時機 | 範例 | 支援 | 已實驗 |
| --- | --- | --- | --- | --- |
| `text-wrap: balance` / `pretty` | `balance` 平衡標題各行寬度；`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 新增；一定要加百分比上限，否則放大頁面時字反而變小，實測見 [這篇](https://neillin.com/blog/css-text-fit/)） | `h1 { text-fit: grow per-line-all 200%; }` | 🟠 | ✅ |
| `text-autospace` | 在中文與英文／數字之間自動加入適當間距，不必再手動打空白；Safari 27 另加入 `insert` 值 | `text-autospace: normal;` | 🟡 | ✅ |
| `font-width` | `font-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-visibility` | 3D 翻轉時是否顯示背面（翻卡效果） | `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>` | 🟠 | ✅ |
| `::backdrop` | `dialog.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 的比較見 [這篇](https://neillin.com/blog/css-alpha-revert-rule/)） | `color: revert-rule;` | 🟡 | ✅ |
| `@scope` | 樣式作用域限制在某區塊、可設下界，類似 CSS Modules 的作用域 | `@scope (.card) to (.content){}` | 🟡 | ✅ |
| `contain` | 宣告內部排版／樣式獨立，隔離重排範圍以提升效能 | `contain: layout style;` | 🟢 | ✅ |
| `contain-intrinsic-size` | 搭配 `content-visibility: auto`，先給預估尺寸避免捲動跳動，有 cache 後轉 auto | `contain-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` 時屬性會退回初始值，焦點外框可能整個消失，見 [這篇](https://neillin.com/blog/css-if-function/)） | `display: if(style(--open: 1): block; else: none);` | 🟠 | ✅ |
| `@function` | 自訂 CSS 函式與 mixin 概念，可帶參數回傳值（用來保證最小點擊區的實測見 [這篇](https://neillin.com/blog/css-if-function/)） | `@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 屬性的實測見 [這篇](https://neillin.com/blog/css-attr/)） | `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 圖示、優惠券、箭頭步驟、切角按鈕實測，見 [這篇](https://neillin.com/blog/css-corner-shape/)） | `corner-shape: squircle; border-radius: 30px;` | 🟠 | ✅ |
| 字型平滑（`-webkit-font-smoothing`） | 深色模式讓文字不刺眼的關鍵：macOS 上淺色文字在深底會因次像素抗鋸齒而變粗發光，改用 grayscale 抗鋸齒後變細、不刺眼；非標準，僅特定平台有效 | `-webkit-font-smoothing: antialiased;`（+ `-moz-osx-font-smoothing: grayscale;`） | 🟡 | ✅ |
| `@when` / `@else` | CSS 的 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"` 會讓按鈕變簡體、開啟後沒有狀態、鍵盤使用者按太快會失敗，見 [這篇](https://neillin.com/blog/html-usermedia/)） | `<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` 沒有效果，見 [實測文章](https://neillin.com/blog/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 皆已支援）（實測與套用到我作品集的結果見 [這篇](https://neillin.com/blog/html-sizes-auto/)） | `<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`，見 [這篇](https://neillin.com/blog/html-sethtml/)） | `el.setHTML(userInput);` | 🟠 | ✅ |
| `shadowrootreferencetarget` | 讓 Shadow DOM 外面的 `<label>`／`aria-*` 能指向內部真正的 input——解決 web component 長年的標籤關聯難題（實測與 UI Kit 的例子見 [這篇](https://neillin.com/blog/shadow-dom-reference-target/)） | `<template shadowrootmode="open" shadowrootreferencetarget="real-input">` | 🟠 | ✅ |
| `<h1>` 巢狀尺寸修正 | UA 樣式表變更：`<h1>` 放在 `<section>` 裡不再被自動縮小，標題階層的視覺呈現終於可預期（實測與我網站的標題調整見 [這篇](https://neillin.com/blog/html-nested-h1/)） | — | 🟢 | ✅ |
| `ariaNotify()` | 直接請螢幕閱讀器念出一段訊息（例如「已加入購物車」），取代在頁面藏一個 `aria-live` 區塊再塞文字的舊做法。它是 DOM API 而不是 HTML 屬性，但它取代的正是那套 HTML 屬性寫法（Chrome 141、Firefox 150 起；Safari 的資料互相矛盾，請以實測為準） | `document.ariaNotify("已加入購物車");` | 🟡 | ✅ |

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

| 功能 | 主要用途 | 支援 | 已實驗 |
| --- | --- | --- | --- |
| Declarative Partial Updates | HTML 串流式的局部更新，不換頁就注入內容；未來可能出現原生的 `<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](https://caniuse.com "另開新視窗") 與 MDN 的最新資料為準，並記得為新特性加 `@supports` fallback。

## 相關連結

- [Can I use（瀏覽器支援度查詢）](https://caniuse.com "另開新視窗")
- [MDN Web Docs — CSS](https://developer.mozilla.org/zh-TW/docs/Web/CSS "另開新視窗")
- [web.dev — Learn CSS](https://web.dev/learn/css "另開新視窗")
- [Chrome for Developers — CSS](https://developer.chrome.com/tag/css "另開新視窗")
- [New in Chrome 150（ `text-fit`、 `background-clip: border-area`、 `focusgroup`）](https://developer.chrome.com/blog/new-in-chrome-150 "另開新視窗")
- [CSS Gap Decorations Now Available（ `row-rule`／ `column-rule`／ `rule`，CSS-Tricks）](https://css-tricks.com/css-gap-decorations-now-available/ "另開新視窗")
- [New Things You Should Know About HTML Here in Mid 2026（本次 K 區新增項目的來源）](https://blog.master.dev/new-things-you-should-know-about-html-here-in-mid-2026 "另開新視窗")
- [Chrome for Developers — `<geolocation>` 元素](https://developer.chrome.com/blog/geolocation-html-element "另開新視窗")
- [Chrome for Developers — `<usermedia>` 元素](https://developer.chrome.com/blog/usermedia-html-element "另開新視窗")
- [Chrome for Developers — `<install>` 元素（origin trial）](https://developer.chrome.com/blog/install-element-ot "另開新視窗")
- [Apple WWDC26 — HTML Model 元素](https://developer.apple.com/videos/play/wwdc2026/215/ "另開新視窗")
- [web.dev — New to the web platform in September 2026（本次 10 月更新的依據）](https://web.dev/blog/web-platform-09-2026 "另開新視窗")
- [Safari 27 Release Notes（Apple，本次燈號更新依據之一）](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes "另開新視窗")
- [Web platform features explorer（Baseline 狀態查詢）](https://web-platform-dx.github.io/web-features-explorer/ "另開新視窗")
- [CSS-Tricks](https://css-tricks.com "另開新視窗")

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/blog/css-techniques-checklist/#webpage","@type":"WebPage","description":"一份可快速掃描的現代 CSS 與 HTML 特性清單，依版面、選擇器、色彩、文字、動畫等分類，另收錄 `\u003Cgeolocation>`、`focusgroup`、Invoker Commands 等宣告式 HTML 新特性，逐條整理用途、範例與瀏覽器支援度。","name":"現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序","url":"https://neillin.com/blog/css-techniques-checklist/","isPartOf":{"@id":"https://neillin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/blog/css-techniques-checklist/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/blog/css-techniques-checklist/#/schema/blog-posting/1","@type":"BlogPosting","dateModified":"2026-10-13","datePublished":"2026-07-06","description":"一份可快速掃描的現代 CSS 與 HTML 特性清單，依版面、選擇器、色彩、文字、動畫等分類，另收錄 `\u003Cgeolocation>`、`focusgroup`、Invoker Commands 等宣告式 HTML 新特性，逐條整理用途、範例與瀏覽器支援度。","headline":"現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序","inLanguage":"zh-Hant-TW","keywords":"CSS, HTML, 前端開發, 網頁設計, 響應式設計, 無障礙, 瀏覽器支援","url":"https://neillin.com/blog/css-techniques-checklist/","author":{"@id":"https://neillin.com/#person"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://neillin.com/blog/css-techniques-checklist/"},"publisher":{"@id":"https://neillin.com/#person"}},{"@id":"https://neillin.com/blog/css-techniques-checklist/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"部落格","item":"https://neillin.com/blog/"},{"@type":"ListItem","position":3,"name":"現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序","item":"https://neillin.com/blog/css-techniques-checklist/"}]}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.