使用新的 if() 函式設定 CSS 條件

Una Kravets

發布日期：2025 年 7 月 1 日

從 Chrome 137 開始，您可以使用 if() 函式試用 CSS 內嵌條件式。if() 可為動態樣式 (例如樣式查詢和媒體查詢) 提供更簡潔的開發人員介面，並提供一些重要差異，您可以在本文中瞭解相關資訊。

CSS if() 函式會使用一系列條件/值組合，結構如下：

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

您可以提供 else 陳述式，如果其他條件均不符合，系統就會使用這個陳述式：

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

目前 if() 支援三種不同類型的查詢：

• style()：樣式查詢
• media()：媒體查詢
• supports()：支援查詢

以下舉例說明：

示範：內嵌媒體查詢

使用 if() 是將內嵌媒體查詢納入樣式的絕佳方式。舉例來說，您可以檢查使用者的主題設定偏好 (淺色或深色)，或針對檢視區寬度執行內嵌媒體查詢。以下範例顯示指標裝置的媒體查詢。在具有精細指標 (例如滑鼠) 的裝置上，按鈕的預設大小為 30 像素，但在具有粗略指標的觸控螢幕裝置上，按鈕的大小則為建議的最低值 44 像素，以便提供適當的觸控間距，方便使用者存取。

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

上述程式碼會產生與下列媒體查詢相同的結果：

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

使用 if() 格式可讓您在內文中加入邏輯，而不需要在兩個不同位置加入樣式邏輯。

示範：內嵌支援查詢

使用 if() 的另一種方式是建立內嵌支援查詢。舉例來說，如要檢查是否支援 OKLCH 等寬色域色彩，您可以使用以下指令碼：

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

使用這個程式碼，如果瀏覽器支援 oklch 色彩空間，使用者就會看到更鮮豔的色彩，並在 ::after 虛擬內容中看到「您的瀏覽器支援 OKLCH」訊息。

如要進一步瞭解 RGB 和更進階的色彩空間的差異，請前往 oklch.com 查看色彩挑選工具和相關資源。

示範：以視覺化方式呈現 UI 狀態

您也可以使用 if() 進行狀態式樣式設定。例如，根據進度卡片的 UI 狀態 (待處理或完成) 設定樣式。直接將狀態儲存在資料屬性或自訂屬性中，然後使用 if() 將樣式內嵌至屬性。

<div class="card" data-status=>"c<ompl>ete"
  ...
/div

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

在 if() 函式中使用 style()，您可以直接為指定的元素設定樣式，而不需要 CSS 樣式查詢所需的上層元素。

本示範將說明基本案例，說明如何使用 if() 支援 CSS 的新架構方法。相較於使用類別，使用 CSS 自訂屬性可讓您輕鬆在 CSS 中更新屬性。舉例來說，您可以使用媒體查詢或 :hover 等虛擬狀態來更新這些元素。

後續步驟

新增 if() 後，CSS 開發人員可利用新的架構。隨著樣式查詢等技術的演進，範圍查詢可能會在 if() 函式中實現，而且在與即將推出的自訂函式提案 (CSS @function) 結合時，也會非常實用。

如要進一步瞭解這些功能，請參閱：

• 3 分鐘的示範 #3 逐步操作影片
• Lea Verou 的文章