使用新的 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() 時，如何增加按鈕的字型大小。

示範：內嵌支援查詢

使用 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」訊息。

使用 if() 函式的支援查詢。

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

示範：將 UI 狀態視覺化

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

<div class="card" data-status="complete">
  ...
</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() 函式，將有狀態的標籤內嵌至屬性。

在 if() 函式中使用 style()，即可直接設定目標元素的樣式，不需要 CSS 樣式查詢所需的父項元素。

本示範說明如何使用 if() 支援 CSS 的新架構方法。相較於類別，使用 CSS 自訂屬性的一大優點，在於可輕鬆在 CSS 中更新屬性。舉例來說，可以使用媒體查詢或虛擬狀態 (例如 :hover) 更新。

後續步驟

新增 if() 為 CSS 開發人員帶來新的架構機會。隨著樣式查詢等技術不斷演進，範圍查詢功能可能也會在 if() 函式中推出，並與即將推出的自訂函式提案 (CSS @function) 搭配使用。

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