使用CSS原生的 if() 語法實現動態設計

CSS 的 if() 搭配變數系統或 attr()，讓我們能直接用 CSS 判斷條件或 HTML 屬性自動達成樣式變化，在某些情況下不再需要寫任何 JavaScript。

範例

我們可以用不同 class 搭配變數不同的值，再加上 if 和 else 判斷來自動設定 background-color 的值：

:root {
  --color: #333;
}
.element {
  background-color: if(
    style(--color: #fafafa): black;
    style(--color: #ed5fe8): #000a75;
    else: white);
}
.dark {
  --color: #fafafa;
}
.esport {
  --color: #ed5fe8;
}

你可以注意到，寫複數個判斷條件還可以實現「else if」的效果。

但直接使用的缺點也很明顯，就是直接判斷變數的值太不直觀了，所以我們還可以用上 attr() 來改良。

用 attr() 優化 if() 的判斷條件

這裡我們使用 attr() 搭配 if() 判斷狀態（data-status）來給不同的值，程式寫起來就會直觀很多。

<div class="container">
  <div class="card" data-status="success"></div>
  <div class="card" data-status="warning"></div>
  <div class="card" data-status="success"></div>
  <div class="card" data-status="error"></div>
  <div class="card" data-status="warning"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: min-content;
  gap: 8px;
}
.card {
  --status: attr(data-status type(<custom-ident>));
  box-shadow: 0 0 0 1px #333;
  border-radius: 4px;
  padding: 1rem;
  background-color: if(
    style(--status: success): #7dfaa5;
    style(--status: error): #ff3874;
    else: #fccd81);
  grid-row: if(
    style(--status: error): 1;
    style(--status: warning): 2;
    else: 3);
}

實際應用

我們可以運用 if() 自動分類物件，例如使用在儀表版中，自動給予不同狀態的元素相對應的顏色，甚至可以自動將各種狀態的元素分類排放。

運用 if() 自動給予相對的顏色與位置（在 codepen 查看）

但使用時要注意，目前只有 chrome 137 之後的版本（包含 Edge）支援 if() 的語法，但過不了多久應該所有瀏覽器都會跟上。