CSS if() 函數(shù)已經(jīng)來了！
想象一下，能夠直接根據(jù)條件設(shè)置 CSS 屬性——無需 JavaScript，無需預處理器，也無需任何變通方法。而有了 CSS 中新的 if() 函數(shù)，這一切現(xiàn)在都在慢慢變成了現(xiàn)實。CSS if() 函數(shù)已在 Chrome 137 中正式發(fā)布。
多年來，我們一直依賴于各種變通方法：JavaScript 切換類、CSS 預處理器混合宏，或者無休止的媒體查詢塊。if() 函數(shù)徹底解決了這些問題，將條件邏輯直接引入 CSS——優(yōu)雅、高效且聲明式。
工作原理：
property: if(
condition-1: value-1;
condition-2: value-2;
condition-3: value-3;
else: default-value
);該函數(shù)按順序檢查條件并應用第一個匹配的值。如果沒有條件匹配，則使用 else 值——這與編程語言的預期完全一致，但現(xiàn)在是純 CSS 的。
if() 函數(shù)的三大功能
1. 樣式查詢
使用 style()，您可以對 CSS 自定義屬性做出響應：
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
style(--status: error): crimson;
else: gray );}HTML 中一個 data-status 屬性現(xiàn)在即可控制所有樣式——無需再使用其他工具類！
2. 媒體查詢
告別嵌套的媒體查詢塊。使用 media()，您可以內(nèi)聯(lián)定義響應式值：
h1 {
font-size: if(
media(width >= 1200px): 3rem;
media(width >= 768px): 2.5rem;
media(width >= 480px): 2rem;
else: 1.75rem
);3. 功能檢測
那些依靠隨機回退策略并希望一切順利的日子已經(jīng)一去不復返了??。有了supports()，你可以直接在屬性中檢查瀏覽器功能：
.element {
border-color:
if(
supports(color: lch(0 0 0)): lch(50% 100 150);
supports(color: lab(0 0 0)): lab(50 100 -50);
else: rgb(200, 100, 50)
);
}實際用例
三行代碼講解暗黑模式
body {
--theme: "dark"; /* Toggle via JavaScript or User Preference */
background: if(
style(--theme: "dark"): #1a1a1a;
else: white
);
color: if(
style(--theme: "dark"): #e4e4e4;
else: #333
);
}設(shè)計系統(tǒng)狀態(tài)組件
.alert {
--type: attr(data-type type(<custom-ident>));
background: if(
style(--type: success): #d4edda;
style(--type: warning): #fff3cd;
style(--type: danger): #f8d7da;
style(--type: info): #d1ecf1;
else: #f8f9fa
);
border-left: 4px solid if(
style(--type: success): #28a745;
style(--type: warning): #ffc107;
style(--type: danger): #dc3545;
style(--type: info): #17a2b8;
else: #6c757d
);
}無媒體查詢混亂的容器
.container {
width: if(
media(width >= 1400px): 1320px;
media(width >= 1200px): 1140px;
media(width >= 992px): 960px;
media(width >= 768px): 720px;
media(width >= 576px): 540px;
else: 100%
);
padding-inline: if(
media(width >= 768px): 2rem;
else: 1rem
);
}結(jié)合現(xiàn)代 CSS 功能
.element {
/* With the new light-dark() function */
color: if(
style(--high-contrast: true): black;
else: light-dark(#333, #e4e4e4)
);
/* With CSS Custom Functions (@function) */
padding: if(
style(--spacing: loose): --spacing-function(2);
style(--spacing: tight): --spacing-function(0.5);
else: --spacing-function(1)
);
}瀏覽器支持，截至 2025 年 8 月：
- Chrome/Edge：自 137 版起，已經(jīng)支持
- Chrome Android：自 139 版起，已經(jīng)支持
- Firefox：開發(fā)中，目前尚不支持
- Safari：計劃中，目前尚不支持
- Opera：尚不支持
由于支持仍在不斷增加，您可以使用以下模式：
.button {
/* Fallback for all browsers */
padding: 1rem 2rem;
background: #007bff;
/* Modern browsers automatically override */
padding: if(
style(--size: small): 0.5rem 1rem;
style(--size: large): 1.5rem 3rem;
else: 1rem 2rem
);
background: if(
style(--variant: primary): #007bff;
style(--variant: success): #28a745;
style(--variant: danger): #dc3545;
else: #6c757d
);
}未來展望
CSS 工作組已開始開發(fā)以下擴展：
范圍查詢：if(style(--value > 100): ...)
邏輯運算符：if(style(--a: true) and style(--b: false): ...)
容器查詢集成：更強大的上下文感知能力
你覺得 CSS if() 函數(shù)怎么樣？你已經(jīng)在項目中使用過它了嗎？
