CSS 原生 if() 條件邏輯完整教學：終於可以少寫一堆 JavaScript 了

寫了快十年的 CSS，第一次看到 CSS if() 提案的時候，我差點從椅子上跳起來。CSS 終於可以做條件判斷了！不用再為了一個小小的樣式切換就寫 JavaScript 了。2026 年這個功能已經進入主流瀏覽器，今天來好好聊聊怎麼用它。

CSS 的進化：從樣式工具到介面工程

回顧最近幾年 CSS 的發展，真的是一波接一波：Container Queries 讓元件可以根據容器大小調整、Scroll-Driven Animations 讓滾動動畫不需要 JavaScript、Anchor Positioning 讓 tooltip 定位變成純 CSS、原生 Masonry 不再需要 Masonry.js。

而 CSS if() 的加入，可以說是這個進化過程中最具代表性的一步。它意味著 CSS 從「被動的樣式描述」升級成了「可以做邏輯判斷的介面語言」。

2025-2026 年的 CSS 已經強大到可以處理以往需要自訂腳本的複雜動畫和使用者互動。CSS 負責設計，JavaScript 負責互動——這條分界線正在模糊化。

CSS if() 基礎語法：三分鐘上手

CSS if() 的語法其實很直覺，跟大部分程式語言的三元運算子很像：

/* 基本語法 */
property: if(condition, value-if-true, value-if-false);

/* 實際範例 */
.card {
  background-color: if(
    style(--theme: dark),
    #1a1a2e,
    #ffffff
  );
}

目前 CSS if() 支援的條件類型主要有：

style() 條件：檢查 CSS Custom Property 的值。這是最常用的，可以根據主題變數、狀態變數來切換樣式。

media() 條件：內嵌 media query 判斷。比如根據螢幕寬度決定用什麼值。

supports() 條件：檢查瀏覽器是否支援某個 CSS 功能。這對漸進增強非常有用。

/* 根據自訂屬性切換 */
.button {
  padding: if(style(--size: large), 16px 32px, 8px 16px);
  font-size: if(style(--size: large), 18px, 14px);
}

/* 根據 media query 切換 */
.sidebar {
  width: if(media(min-width: 768px), 300px, 100%);
}

/* 根據功能支援切換 */
.grid {
  display: if(supports(display: grid), grid, flex);
}

五個實戰範例：取代 JavaScript 的真實場景

1. 深色模式切換

以前要做深色模式，要嘛用 JavaScript 切換 class，要嘛用 media query。現在用 if() + CSS Custom Property 更優雅：

:root {
  --mode: light;
}

.card {
  background: if(style(--mode: dark), #1e1e2e, #ffffff);
  color: if(style(--mode: dark), #cdd6f4, #1e1e2e);
  border-color: if(style(--mode: dark), #45475a, #e0e0e0);
}

只要改變 --mode 的值，整個頁面的樣式就跟著切換。

2. 元件尺寸變體

.btn {
  --variant: medium;
  padding: if(style(--variant: small), 4px 12px,
           if(style(--variant: large), 12px 24px, 8px 16px));
  font-size: if(style(--variant: small), 12px,
             if(style(--variant: large), 18px, 14px));
}

這完全取代了以前需要用 .btn-sm、.btn-lg 等多個 class 的做法。

3. 表單驗證狀態

.input {
  --state: default;
  border-color: if(style(--state: error), #ef4444,
                if(style(--state: success), #22c55e, #d1d5db));
  box-shadow: if(style(--state: error), 0 0 0 3px rgba(239,68,68,0.2), none);
}

4. 響應式間距

.section {
  padding: if(media(min-width: 1024px), 80px 40px,
           if(media(min-width: 768px), 60px 24px, 40px 16px));
}

5. 根據語言方向調整佈局

.nav {
  --dir: ltr;
  flex-direction: if(style(--dir: rtl), row-reverse, row);
  text-align: if(style(--dir: rtl), right, left);
}

搭配 CSS Custom Properties 的進階用法

CSS if() 跟 Custom Properties 的組合是真正強大的地方。你可以在 JavaScript 中只改變一個變數的值，CSS 自動處理所有的視覺變化：

/* CSS */
:root {
  --layout: grid;
  --density: comfortable;
}

.product-list {
  display: if(style(--layout: grid), grid, flex);
  flex-direction: if(style(--layout: list), column, unset);
  grid-template-columns: if(style(--layout: grid),
    repeat(auto-fill, minmax(250px, 1fr)), unset);
  gap: if(style(--density: compact), 8px,
       if(style(--density: comfortable), 16px, 24px));
}

// JavaScript - 只需要改變量的值
document.documentElement.style.setProperty('--layout', 'list');
document.documentElement.style.setProperty('--density', 'compact');

這個模式的威力在於：CSS 處理所有樣式邏輯，JavaScript 只負責改變狀態。關注點分離做到極致。

瀏覽器支援度與漸進增強策略

截至 2026 年 3 月，CSS if() 的瀏覽器支援情況：

Chrome / Edge：126+ 完整支援（style() 條件）

Firefox：130+ 完整支援

Safari：19+ 部分支援（media() 和 supports() 條件，style() 還在開發中）

因為 Safari 的支援度還不完整，建議使用漸進增強策略：

/* Fallback for browsers without if() support */
.card {
  background-color: #ffffff; /* 預設值 */
}

/* 使用 @supports 檢測 */
@supports (background: if(style(--x: 1), red, blue)) {
  .card {
    background-color: if(style(--mode: dark), #1e1e2e, #ffffff);
  }
}

在 Tailwind CSS v4 中，也已經開始支援 if() 相關的 utility class。

跟 Container Queries、Mixins 的搭配

CSS if() 不是獨立存在的功能，它跟 2026 年其他的 CSS 新功能可以完美搭配：

if() + Container Queries：根據容器狀態做條件判斷，實現真正的元件級響應式。

if() + CSS Mixins：在 Mixin 中使用 if() 做條件分支，就像 Sass 的 @if 但完全原生。

if() + @property：搭配 CSS @property 定義型別化的自訂屬性，讓 if() 的條件判斷更精確。

這些功能組合在一起，CSS 已經可以處理以前只有 Sass 才能做到的複雜邏輯。

最佳實踐與常見陷阱

用了幾個月之後，整理出幾條實用的最佳實踐：

不要巢狀太深。if() 可以巢狀使用（if 裡面再 if），但超過兩層就很難讀了。如果邏輯太複雜，考慮用多個 Custom Properties 拆分。

命名要有意義。--theme: dark 比 --t: 1 好讀太多了。CSS 變數的命名品質直接影響 if() 條件的可讀性。

小心效能。每個 if() 都是一次條件運算。在大量元素上使用複雜的 if() 巢狀可能影響渲染效能。跟 Container Queries 一樣，避免不必要的重算。

做好 fallback。在 if() 不支援的瀏覽器上，元素會直接使用 property 的初始值或繼承值。確保這個 fallback 行為是可接受的。

跟團隊溝通。如果團隊成員還不熟悉 if()，在程式碼中加適當的註解。新語法的採用需要時間。

CSS if() 是讓 CSS 從「樣式語言」進化為「介面邏輯語言」的關鍵一步。學會了它，你的前端開發效率和程式碼品質都會明顯提升。這是 2026 年每個前端工程師都該掌握的技能。