Interop 2026：瀏覽器大一統時代來臨

過去，前端工程師在寫 CSS 時，心裡總是要記住「這個屬性在 Safari 支援嗎」、「那個功能在 Firefox 裡有沒有 Bug」。每一個 CSS 新功能的背後，都有瀏覽器相容性的開發成本。Interop 2026 的出現，正在改變這個現實。分數從一開始的 25 分，到 2024 年的 76 分，再到 2026 年的 95 分——瀏覽器之間的 CSS 差異正在快速縮小。Firefox 140 作為這次 Interop 2026 的重要參與者，帶來了 Anchor Positioning 和 @scope 等重要功能。

---

Interop 2026 分數 95：這意味著什麼

分數的意義

Interop 的分數是根據 BrowserStack 上數百個設備和瀏覽器組合，測試 CSS、JavaScript 和 Web API 的跨瀏覽器相容性：

年份	分數	進步
Interop 2022	25	—
Interop 2023	61	+36
Interop 2024	76	+15
Interop 2025	89	+13
Interop 2026	95	+6

95 分的意義是：市場上 95% 的網頁使用場景，在所有主要瀏覽器上都有一致的功能表現。

對前端工程師的實際影響

// 過去：需要這樣寫
.element {
  /* Chrome */
  -webkit-backdrop-filter: blur(10px);
  /* Firefox */
  backdrop-filter: blur(10px);
  /* Fallback */
  background: rgba(255, 255, 255, 0.8);
}

// 現在：大多數 CSS 功能不需要前綴
.element {
  backdrop-filter: blur(10px);
  /* 2026 年，幾乎所有瀏覽器都支援 */
}

這個變化意味著：過去花在「處理瀏覽器前綴」和「寫 fallback」上的時間，可以用在更有價值的地方。

---

Firefox 140 的重要新功能

Anchor Positioning：浮層定位的標準解決方案

過去十年，浮層（如 Tooltip、Popover、Dropdown）定位是前端開發的痛點。你需要用 JavaScript 計算位置，或者依賴函式庫如 Popper.js。Anchor Positioning 讓這一切可以用純 CSS 完成：

/* 定義 anchor（錨點）*/
.button {
  anchor-name: --my-button;  /* 命名這個元素為錨點 */
}

/* 定義浮層，並將其「錨定」到按鈕 */
.popover {
  position-anchor: --my-button;  /* 綁定到指定錨點 */

  /* 浮層位於錨點的哪個位置 */
  position: absolute;
  top: anchor(bottom);  /* 緊貼錨點底部 */
  left: anchor(center); /* 水平居中於錨點 */
}

/* 當錨點在邊緣時，浮層自動調整方向 */
@position-try-options flip-block;

<!-- 使用方式 -->
<button class="button">
  Open Menu
  <div class="popover" role="dialog">
    <p>Menu content here</p>
  </div>
</button>

與 Popper.js 的比較

功能	Anchor Positioning	Popper.js
語言	純 CSS	JavaScript
Bundle 體積	0KB	~15KB
效能	瀏覽器原生	需重新計算
複雜定位	有限制	強大
瀏覽器支援	Chrome/Edge 125+, Firefox 129+	所有瀏覽器

@scope：樣式範圍控制

過去 CSS 的作用域是「全局」的，所有的 class 名稱都可能發生衝突。@scope 讓你可以明確定義樣式的作用範圍：

/* 基本語法：限制在 .card 內 */
@scope (.card) {
  .title {
    font-size: 1.5rem;
  }

  .body {
    color: #666;
  }
}

/* 巢狀 scope */
@scope (.card) {
  @scope (.featured) {
    .title {
      font-size: 2rem;
      color: gold;
    }
  }
}

@scope 與 CSS Layers 的比較

/* @layer：控制優先級 */
@layer base, components, utilities;

/* @scope：控制應用範圍 */
@scope (.card) {
  .title { /* 只在 .card 內生效 */ }
}

兩者可以一起使用：

@layer components {
  @scope (.card) {
    .title { /* 明確的作用範圍 + 明確的優先級 */ }
  }
}

display: grid-lanes（Masonry）

Firefox 140 正在實現 display: grid-lains，這是一個讓 CSS Grid 支持「瀑布流」布局的方式：

.masonry-grid {
  display: grid;
  grid-lanes: 3;  /* 指定行/列數量 */
  grid-auto-flow: masonry;  /* 讓項目像砌磚一樣排列 */
}

.masonry-grid > * {
  /* 每個項目的行/列跨越 */
  grid-lane-span: auto;
}

這個功能類似於 Masonry.js 或 CSS 的 column-count，但更加強大和靈活。

---

CSS attr() 擴展

傳統上，attr() 只能用於 ::before 和 ::after 的 content 屬性。Interop 2026 擴展了這個函數，讓它可以在幾乎所有 CSS 屬性中使用：

<!-- 資料屬性控制樣式 -->
<div data-width="200px" data-opacity="0.5">
  Dynamic styling
</div>

/* 新的 attr() 用法 */
div {
  width: attr(data-width type(px), 100px);  /* 帶類型和默認值 */
  opacity: attr(data-opacity type(number), 1);
  color: attr(data-color, #333);  /* 帶默認值 */
}

這個功能讓你不需 JavaScript 就可以實現「資料驅動的樣式」：

<!-- 基於資料屬性改變樣式 -->
<div data-variant="primary" data-size="large">
  Button
</div>

/* 讀取資料屬性並應用對應樣式 */
[data-variant="primary"] {
  --bg: blue;
}

[data-size="large"] {
  --padding: 16px 32px;
}

div {
  background: var(--bg);
  padding: var(--padding);
}

---

瀏覽器戰爭的結束

三個引擎的合作

Interop 不是某一個瀏覽器的勝利，而是三個主要瀏覽器引擎（Blink/Chrome、WebKit/Safari、Gecko/Firefox）之間的合作：

// Interop 的工作方式
/*
1. Google、Mozilla、Apple 三方共同定義"哪些功能需要優先實現"
2. 各自在自家引擎中實現這些功能
3. 共同使用相同的測試套件
4. 分數公開透明，任何人可以驗證
*/

這個合作模式的結果是：瀏覽器相容性問題正在快速減少。

對前端工程師的實際意義

// 過去：需要漫長的等待
/*
- Safari 先支援新功能
- Chrome 一年後跟進
- Firefox 再一年後
- 最終才能在專案中使用
*/

// 現在：
/*
- Interop 2026 覆蓋 95% 的功能
- 新 CSS 功能通常在 6-12 個月內所有瀏覽器都支援
- 可以更早地使用新技術
*/

---

CSS 的能力邊界正在擴大

Interop 2026 不只是讓現有功能在瀏覽器間更加一致——它也在推動 CSS 能力邊界的擴大：

過去需要 JS 的場景	現在可以用 CSS 實現
Tooltip 定位	Anchor Positioning
響應式布局	Container Queries
滾動觸發動畫	Scroll-driven Animations
頁面過渡	View Transitions API
主題切換	Style Queries
瀑布流布局	grid-lanes

---

結語：享受平臺紅利

Interop 2026 分數 95，是前端社群多年努力的結果。這個變化對前端工程師的影響是實實在在的：

• 更少的瀏覽器前綴：節省開發時間
• 更少的 polyfill：减少 bundle 體積
• 更早使用新技術：以前需要等待 2-3 年的功能，現在可能只需要 6-12 個月
• 更一致的用戶體驗：所有用戶都能獲得相同的功能

Firefox 140 的 Anchor Positioning、@scope、grid-lanes，與 CSS attr() 的擴展，代表了 CSS 正在接管越來越多過去需要 JavaScript 的場景。

---

延伸閱讀

• CSS :has() 父選擇器 — 另一個重要的 CSS 選擇器
• CSS @layer 完整指南 — CSS Cascade 分層管理

本文是「2026 CSS 實用技術」系列文章之一。