新 CSS if() 函數將如何徹底改變你的樣式設計方式
就在最近，CSS的全新內置函數 if() 在 Chrome 137 中正式上線。
仔細想想：每一次CSS的更新都在變得更加強大，逐漸模糊了CSS與編程語言之間的界限，讓不少過去只能依賴JavaScript完成的任務，現在有了CSS原生的解決方案。
以前，我們要想根據元素的顏色、類名或屬性狀態來決定樣式，通常不得不借助JavaScript進行條件判斷，再動態賦值樣式。
那些一直強調「CSS并不是編程語言」的人們，現在或許需要重新審視自己的觀點了——看看這個令人震撼的新功能，它絕對值得你重新思考。
接下來，讓我們直奔主題！
CSS if() 函數到底帶來了什么？
首先值得一提的是：它是一個原生的CSS函數，無需任何額外的JavaScript參與。
if() 可以讓你像JavaScript中的if-else語句一樣，根據特定條件動態地改變元素的樣式。
為了更清晰地理解，我們詳細看看它的語法結構：
property: if(
style(<條件>): <值>;
style(<另一個條件>): <另一個值>;
else: <默認值>
);- **property**：你想要改變的CSS屬性，比如背景顏色、寬度或字體顏色等。
- **if()**：開始條件判斷，告訴CSS根據設定的條件動態賦值。
- **style**：當對應條件成立時所應用的樣式值，可為任何有效的CSS值。
- **condition**：要判斷的條件，可以是CSS變量或HTML元素的屬性（如data-*）。
- **else**：如果所有條件都不滿足，則使用此默認樣式。
或許這些理論講起來不夠直觀，下面我們用幾個實際例子來感受一下這個函數的強大：
示例1：用CSS變量實現明暗主題切換
僅僅通過CSS，即可實現簡單的明暗模式切換：
HTML代碼：
<div class="dark">暗色模式</div>
<div class="light">亮色模式</div>CSS代碼：
div {
--color: inherit;
color: var(--color);
background-color: if(
style(--color: white): black;
else: pink;
);
}
.dark {
--color: black;
}
.light {
--color: white;
}- 首先檢查變量 --color 是否為白色。
- 若為白色，則背景變成黑色，否則默認為粉色。
示例2：根據HTML屬性 (data-status) 動態樣式
根據元素狀態值實現動態樣式，無需額外JavaScript：
HTML代碼：
<div class="card" data-status="pending"></div>
<div class="card" data-status="complete"></div>
<div class="card" data-status="inactive"></div>CSS代碼：
.card {
--status: attr(data-status type(<custom-ident>));
border: 1px solid;
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;
);
grid-column: if(
style(--status: pending): 1;
style(--status: complete): 2;
else: 3;
);
}- 通過 attr() 獲取 data-status 的值賦給CSS變量 --status。
- 再分別檢查元素狀態，根據條件應用對應的樣式。
- 實現狀態驅動樣式變化，無需引入額外類名或JS代碼。
缺點和局限性
盡管這個新功能激動人心，但實際使用時我們仍需注意以下幾點，以防止過度使用帶來的問題：
?? 目前僅 Chrome 137 以上版本（實驗階段）支持；
?? 暫不支持數字比較（如>或<）；
?? 只能比較明確指定的值，而無法判斷動態計算后的值；
?? 若過度使用，可能降低CSS代碼的維護性；
?? 并非完全替代JavaScript，僅在特定情境減少JS依賴。
順帶一提，用紅色的小圓點代替普通的符號是不是更醒目？
總結
我們會立刻在項目中使用這個新功能嗎？可能不會。
畢竟它剛剛發布，目前僅限Chrome實驗版本。但它的潛力已清晰可見。
if() 函數為CSS加入了真正意義上的邏輯判斷——而這種能力過去一直是JavaScript或預處理器（如SASS）的專屬領域。
這絕對稱得上CSS發展的一次飛躍，讓原生CSS變得更為智能，逐步向預處理器多年來提供的高級功能靠攏。
盡管目前還不能完全取代JS和預處理器，但無疑是朝著這個方向邁出了重要一步。
