Skip to main content

稀有 CSS 功能整理（Rare CSS Features）

文章原作者：Rahul Kaklotar
本文為重點整理與中文筆記。

在 2026 年，CSS 與 JavaScript 之間的界線幾乎被抹平。許多過去需要 JS 來實作的：

  • 條件判斷邏輯
  • 元素定位（特別是 tooltip / dropdown 這類「跟著元素走」的 UI）
  • 捲動觸發動畫

現在越來越多都可以直接交給 CSS 來處理，帶來：

  • 更好的效能：交給瀏覽器渲染引擎處理，比 JS 在 main thread 執行還有效率。
  • 更乾淨的架構：互動樣式邏輯集中在 CSS，JS 專心處理商業邏輯。
  • 更好的可維護性與可存取性。

下面是幾個「少見但非常實用」的現代 CSS 特性。

1. :has() 父選擇器：在 CSS 做「if 判斷」​

:has() 常被稱為「父選擇器」或「家族選擇器」，因為它可以依據子元素的存在或狀態來決定父元素的樣式。
這在以前幾乎都要靠 JS 來做（例如：加上某個 class）。

/* 卡片裡有 img 才套用樣式 */
.card:has(img) {
  display: flex;
  flex-direction: column;
  border: 2px solid gold;
}

/* form-group 裡有 invalid input，就讓 label 變紅變粗 */
.form-group:has(input:invalid) label {
  color: red;
  font-weight: bold;
}

適合用在：

  • 表單驗證狀態（成功 / 失敗樣式）
  • 卡片根據內容有無某元素（如圖片、badge）改變排版
  • Accordion、Tabs 等「狀態控制」邏輯

2. CSS Anchor Positioning：Tooltip / Dropdown 原生錨點定位​

以前要做 tooltip 或 dropdown，通常會：

  • 用 JS 取得觸發元素的座標與尺寸
  • 手動計算 offset，確保 tooltip / dropdown 黏在按鈕旁邊

有了 CSS Anchor Positioning，這些可以直接在 CSS 裡透過 anchor() 完成。

.button {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  /* tooltip 頂部貼在按鈕底部 */
  top: anchor(bottom);
  /* 水平位置對齊按鈕中間 */
  left: anchor(center);
}

適合用在：

  • Tooltip、Popover
  • Dropdown Menu、Context Menu
  • 任意需要「跟著某個元素移動」的浮動 UI

3. Scroll-Driven Animations：以捲動驅動動畫時間軸​

過去要做「畫面捲動到某區塊就觸發動畫」，常見作法是：

  • 使用 scroll 事件監聽
  • 或使用 IntersectionObserver

現在可以直接使用 scroll-driven animations，把動畫綁定到 scroll-timeline。

@keyframes fill-progress {
  from { scale-x: 0; }
  to { scale-x: 1; }
}

.progress-bar {
  animation: fill-progress linear;
  animation-timeline: scroll(); /* 依捲動進度填滿 */
}

適合用在：

  • 頁面捲動進度條
  • Section 進場動畫（fade-in / slide-in）
  • Parallax 滾動視差效果

4. subgrid：子網格繼承父網格軌道​

subgrid 解決的是：多層 grid 容器之間要精準對齊非常痛苦 的問題。

有了 subgrid，子 grid 可以「沿用」父 grid 的列或欄設定，讓整個 layout 的對齊更一致。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* 使用父容器的 row 設定 */
  grid-row: span 3;
}

適合用在：

  • 卡片列表，多張卡片需要標題、圖片、描述在整列中對齊
  • 複雜資訊頁面（例如文章列表 + metadata 排版）

5. if() 函式：把條件邏輯寫進單一屬性​

在 2025–2026 年，CSS 引入了 if() 函式，可以針對：

  • media 條件（例如 prefers-reduced-motion）
  • 樣式變數狀態（例如主題是 dark 或 light）

在單一屬性內做「條件選擇」。

.card {
  /* 若使用者偏好減少動畫，就把 duration 設為 0 */
  transition-duration: if(media(prefers-reduced-motion: reduce): 0ms; else: 200ms);

  /* 依據主題變數決定背景顏色 */
  background: if(style(--theme: dark): #333; else: #fff);
}

適合用在：

  • 暗黑 / 亮色模式切換
  • 使用者偏好設定（減少動畫、字體大小等）
  • 同一組元件在不同狀態下的細微差異（spacing、color、shadow）

6. sibling-count()：依同輩元素數量自動調整樣式​

sibling-count() 可以根據某元素在同一層級中的兄弟元素總數來決定樣式，
最典型的例子就是 寬度平均分配。

.menu-item {
  /* 每一個 item 的寬度 = 總寬度 / 同層兄弟數量 */
  width: calc(100% / sibling-count());
}

適合用在：

  • Bento 風格 / Dashboard block 排版
  • 動態生成的 menu / shortcut 區塊
  • 卡片數量不固定的列表（1～5 個都要長得合理）

為什麼要開始用這些 Rare CSS？​

  • 效能更好
    CSS 由瀏覽器渲染引擎處理，比在 JS 裡不斷監聽事件、操作 DOM 還有效率。

  • 維護性更高
    把「外觀 + 互動邏輯」盡可能放回 CSS，
    讓 JS 專注在資料處理與商業邏輯，程式碼分工更清晰。

  • 內建可存取性支援
    像 anchor / popover 等原生特性，通常會搭配鍵盤導航、焦點管理等可存取性行為，
    比手刻 JS 還不容易出錯。

實作新 UI 時，可以先問自己：這段本來打算用 JS 寫的東西，有沒有機會直接用 CSS 這幾個新功能完成？
若答案是「可以」，那就多半能同時賺到效能與維護性的雙贏。