Interop 2026 CSS 新特性全景：瀏覽器戰爭結束，CSS 黃金時代來臨

2026 年，CSS 領域有一個被多數人忽略的重大消息：Interop 專案的分數從 25 分提升到 95 分。瀏覽器之間的戰爭結束了。本文整理 Interop 2026 最值得關注的 CSS 新特性，幫你判斷哪些現在就可以用，哪些值得觀望。

---

為什麼前端工程師要關心 Interop 2026

過去十年間，前端開發者做響應式元件必須用 JavaScript 庫（ Bootstrap 的 Grid、Respond.js、PostCSS 插件），因為 pure CSS 在跨瀏覽器支援上有太多不一致。Container Queries 討論了五年，View Transitions 討論了三年，Anchor Positioning 討論了四年——但 Safari 一直不支援、Firefox 一直落後，開發者只好繼續用 JS 庫來抹平差異。

Interop 2026 改變了這件事。三大引擎（Blink、WebKit、Gecko）的協作，讓過去五年內討論的新語法，現在可以「直接用」而不需要 polyfill 或 workaround。

這對前端工程師的意義是：你可以開始逐步淘汰一些 JavaScript 依賴，用原生 CSS 取而代之。不是全部，但有幾個場景——Container Queries、View Transitions、Scroll-Driven——現在就已經是 Production-ready 的標準答案。

---

1. Container Queries：元件級響應式的標準答案

問題背景

傳統的 Media Queries（@media）是針對 viewport（視窗）寫的，但當同一個元件放在不同容器時，容器寬度不同，你要的是「容器查詢」而不是「視窗查詢」。

<!-- 一個卡片元件，放在不同地方，需要不同的寬度樣式 -->
<aside class="sidebar">
  <article class="card"><!-- 這裡只需要 100% 寬 --></article>
</aside>

<main class="content">
  <article class="card"><!-- 這裡需要多欄排列 --></article>
  <article class="card"><!-- 這裡需要多欄排列 --></article>
</main>

用 Media Queries 做不到——@media (max-width: 600px) 只能看 viewport，不能看父容器。

Container Queries 的語法

/* 第一步：建立 containment context */
.card-container {
  container-type: inline-size;
  container-name: card;  /* 命名可選 */
}

/* 第二步：查詢容器大小，而不是 viewport */
@container card (max-width: 400px) {
  .card {
    flex-direction: column;
  }

  .card__image {
    width: 100%;
    height: 200px;
  }
}

@container card (min-width: 401px) {
  .card {
    flex-direction: row;
  }
}

<div class="card-container">
  <article class="card">
    <img class="card__image" src="..." alt="...">
    <div class="card__content">
      <h2>標題</h2>
      <p>內容文字...</p>
    </div>
  </article>
</div>

關鍵語法：container-type

值	意義
inline-size	只 containment 水平尺寸（最常用）
size	containment 水平和垂直尺寸
normal	只建立新的 containing block，不做尺寸 containment

Container Queries 在所有主流瀏覽器都已經穩定支援（Chrome 105+、Safari 16+、Firefox 110+），可以現在就全面使用。

---

2. View Transitions：零 JavaScript 的頁面過渡動畫

View Transitions API 讓瀏覽器原生處理頁面過渡動畫，不需要 Framer Motion 或 GSAP 等 JavaScript 動畫庫。它支援兩種模式：Same-document（SPA 路由切換）和 Cross-document（MPA 頁面間過渡）。

同文件 View Transitions 在 Chrome 111+、Safari 18+、Firefox 133+ 已穩定支援。跨文件模式在 Chrome 126+、Safari 18.2+ 穩定，Firefox 仍在開發中。

實用建議：先用於同文件 SPA 的路由過渡（覆蓋率最高）。跨文件 MPA 要注意 Firefox 尚未支援，需加上 feature detection。

完整的 View Transitions 語法教學、SPA/MPA 實作範例、與 Framer Motion/GSAP 的比較，請參考 CSS View Transitions：原生頁面過渡動畫，2026 年生產就緒。

---

3. Scroll-Driven Animations：原生滾動動畫，告別 JS

這個特性在前面 FRO-66 文章已有詳細介紹，這裡補充一個實際整合到 View Transitions 的應用場景：

/* 滾動驅動的 reveal 動畫 */
.reveal-item {
  animation: fadeSlideIn linear;
  animation-timeline: view();

  /* 動畫關鍵幀 */
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<main>
  <section class="reveal-section">
    <div class="reveal-item">Content 1</div>
    <div class="reveal-item">Content 2</div>
    <div class="reveal-item">Content 3</div>
  </section>
</main>

animation-timeline: view() 讓元素在進入視口範圍時自動播放動畫，不需要任何 IntersectionObserver 或 scroll listener。

---

4. Anchor Positioning：取代 Popper.js 的原生方案

問題背景

Tooltip（工具提示）、Dropdown（下拉選單）、Popover（彈出框）——這些 UI pattern 都需要一個共同能力：讓浮層元素參照另一個元素（anchor）來定位。過去只能靠 JavaScript 庫（Popper.js、Tippy.js）計算位置。

Anchor Positioning 語法

/* 第一步：宣告 anchor */
.button-with-tooltip {
  anchor-name: --my-button;  /* 將元素命名為 anchor */
}

/* 第二步：浮層參照 anchor 定位 */
.tooltip {
  position-anchor: --my-button;  /* 綁定到哪個 anchor */

  /* 使用 position-* 定位 */
  position: absolute;
  top: anchor(bottom);  /* anchor 的底部 */
  left: anchor(center); /* anchor 的中心 */

  /* 避免溢出的策略 */
  position-try-fallbacks: flip-inline, flip-block;
}

<button class="button-with-tooltip">
  Hover me
  <span class="tooltip">這是一個 Tooltip</span>
</button>

position-try-fallbacks：自動翻轉策略

當浮層靠近視窗邊緣時，自動翻轉方向：

.tooltip {
  /* 當空間不夠時，自動翻轉方向 */
  position-try-fallbacks: flip-block;

  /* 自定義翻轉順序 */
  position-try-fallbacks:
    flip-block,
    flip-inline,
    --my-custom-position;
}

瀏覽器支援：Chrome/Edge 125+、Firefox 134+（已穩定），Safari 尚未支援。覆蓋率約 78%。

實務建議：現在可以在 Chrome/Edge 為主的產品中全面使用。對於需要 Safari/Firefox 支援的產品，建議用 @supports 做 feature detection：

/* Feature Detection */
@supports (anchor-name: --my-anchor) {
  .tooltip {
    position-anchor: --my-button;
    /* 原生 anchor 定位 */
  }
}

/* Fallback for Safari/Firefox */
@supports not (anchor-name: --my-anchor) {
  .tooltip {
    /* 繼續用 Popper.js 或其他 JS 庫 */
  }
}

---

5. Dialog 元素與 Popover API：原生 Modal 的時代

HTML <dialog> 元素加上 CSS 的 ::backdrop 偽元素，現在是原生 Modal 的最佳選擇：

<!-- 語意化 Modal -->
<dialog id="settings-modal">
  <form method="dialog">
    <h2>設定</h2>
    <p>選擇你的偏好</p>
    <button type="submit" value="cancel">取消</button>
    <button type="submit" value="confirm">確認</button>
  </form>
</dialog>

<button onclick="settings-modal.showModal()">開啟設定</button>

/* Modal 背景覆蓋層 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* 動畫：打開時淡入 */
dialog[open] {
  animation: modalFadeIn 200ms ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

為什麼比 react-modal 等 JS 庫更好：

1. 內建無障礙（a11y）：dialog 元素自動管理 focus trap（焦點鎖定）、ESC 關閉、背景滾動鎖定
2. 語意化：HTML 原生語意，螢幕閱讀器原生支援
3. 沒有額外依賴

---

6. @scope：CSS 作用域的正確方式

@scope 讓你可以精確控制樣式應用的範圍，不再需要 BEM 命名規範或 CSS Modules：

/* 建立一個 scope：只在 .article 內生效 */
@scope (.article) {
  /* 巢狀結構：h2 在 .article 內的樣式 */
  h2 {
    font-size: 1.8rem;
    color: #222;
  }

  /* 可以排除特定範圍 */
  @scope (.article__footer) to (.article__footer *) {
    /* .article__footer 內的 h2 不套用上面的規則 */
    /* 只有 .article__footer 自己的 h2 */
  }
}

/* 沒有被 @scope 包住的 h2 */
h2 {
  font-size: 2.5rem;  /* 全域預設 */
}

與 CSS Modules 的比較：@scope 不需要建構工具，是瀏覽器原生的作用域隔離。

---

實戰應用清單

以下是目前（2026 年 3 月）可以全面使用的 CSS 新特性：

特性	支援度	建議使用場景
Container Queries	✅ 全面支援	所有響應式元件
@scope	✅ 全面支援	樣式隔離、大型 Codebase
Dialog ::backdrop	✅ 全面支援	所有 Modal 場景
Scroll-Driven Animations	✅ ~83%	滾動 reveal、進度條
View Transitions（同文件）	✅ Chrome/Safari/Firefox	SPA 路由過渡
Anchor Positioning	⚠️ ~78%（缺 Safari）	Chrome/Edge 優先的產品
跨文件 View Transitions	⚠️ ~75%（缺 Firefox）	MPA 且 Firefox 用戶少

---

結語：CSS 的黃金時代來了，但仍然需要判斷力

Interop 2026 讓很多過去「看起來很美但用不了」的 CSS 特性，變成了「現在就可以用」的實際選擇。

但瀏覽器支援的地圖仍然不完整——Anchor Positioning 缺 Safari，跨文件 View Transitions 缺 Firefox。在全面採用前，請記得：

1. Container Queries 和 @scope：可以全面用，所有瀏覽器都支援了
2. Dialog、Scroll-Driven、SPA View Transitions：可以漸進使用，當作 Progressive Enhancement
3. **Anchor Positioning：Chrome/Edge 先上，S Safari 用 fallback
4. 跨文件 View Transitions：等到 Firefox 支援

CSS 的能力邊界在 2026 年已經大幅擴展。你的團隊可以開始重新評估哪些 JS 依賴已經可以用原生 CSS 取代。

---

延伸閱讀

• CSS Container Queries 實戰入門 — 元件級響應式的完整教學
• CSS Scroll-Driven Animations 實戰 — 滾動動畫的原生 CSS 實現

---

本文是「2026 前端工具選擇」系列文章之一。如果你對某個特性的瀏覽器支援細節有疑問，歡迎留言。