CSS現在能用if/else條件判斷了
作者：web前端開發
Chrome 137瀏覽器帶來一個實用的css新功能：if()函數。現在你可以直接在樣式屬性里寫條件判斷，不用再到處寫@media或@supports規則。這讓樣式代碼更集中，維護起來更簡單。
Chrome 137瀏覽器帶來一個實用的css新功能：if()函數。現在你可以直接在樣式屬性里寫條件判斷，不用再到處寫@media或@supports規則。這讓樣式代碼更集中，維護起來更簡單。
一、CSS if() 是什么？
if()是一個條件函數，用法類似JavaScript的if...else。它根據條件返回不同的樣式值。支持三種條件類型：
- media() - 檢測屏幕尺寸、方向等
- supports() - 檢查瀏覽器是否支持某CSS特性
- style() - 配合CSS變量判斷元素狀態（原文錯誤修正：必須搭配CSS變量使用）
正確語法示例：
屬性: if(
條件1: 值1;
條件2: 值2;
else: 默認值 /* else可選 */
);二、為什么推薦用 if()？
代碼更簡潔以前響應式布局要拆成多個@media塊，現在邏輯和樣式能寫在一起
/* 傳統寫法 */
@media (orientation: landscape) {
.card { flex-direction: row }
}
@media (orientation: portrait) {
.card { flex-direction: column }
}
/* 新寫法一行搞定 */
.card {
flex-direction: if(
media(orientation: landscape): row;
else: column
);
}直接訪問元素狀態用style()可以讀取元素自身的CSS變量或屬性（原文錯誤修正：需配合CSS變量）
<div class="price" >="pro">$99</div>.price {
--tier: attr(>); /* 綁定html屬性 */
color: if(
style(--tier: pro): #ff9800; /* 專業版橙色 */
style(--tier: basic): #03a9f4; /* 基礎版藍色 */
else: #666/* 默認灰色 */
);
}動態樣式更靈活結合CSS變量和數學函數，實現動態效果
三、實際應用場景
場景1：響應式布局（橫屏/豎屏切換）
.container {
display: flex;
flex-direction: if(
media(orientation: landscape): row; /* 橫屏橫向排列 */
else: column /* 豎屏縱向排列 */
);
}場景2：瀏覽器兼容性處理
.header {
/* 支持毛玻璃效果時用半透明背景 */
background: if(
supports(backdrop-filter: blur(10px)): rgba(255,255,255,0.7);
else: white /* 不支持時回退 */
);
/* 避免不支持時報錯 */
backdrop-filter: if(
supports(backdrop-filter: blur(10px)): blur(10px);
else: none
);
}場景3：深色/淺色主題切換
<body >="dark">body {
--theme-mode: attr(>);
background: if(
style(--theme-mode: dark): #222; /* 深色背景 */
style(--theme-mode: light): #f5f5f5; /* 淺色背景 */
else: white /* 默認 */
);
color: if(
style(--theme-mode: dark): #eee; /* 深色模式用淺字 */
else: #333/* 淺色模式用深字 */
);
}四、使用時的注意事項
兼容性警告目前僅Chrome 137+、Edge 117+支持（2024年7月數據），其他瀏覽器需備用方案：
/* 兼容寫法 */
.element {
color: #444; /* 默認值 */
color: if(style(--theme: dark): white); /* 新瀏覽器覆蓋 */
}不要濫用條件判斷復雜邏輯仍建議用@media，避免單行代碼過長
優先使用CSS變量style()必須配合變量使用，直接寫屬性值無效
五、瀏覽器支持情況
瀏覽器 | 最低支持版本 | 支持程度 |
Chrome | 137 | ? |
Edge | 117 | ? |
Firefox | 未支持 | ? |
Safari | 未支持 | ? |
移動端瀏覽器 | 依賴內核版本 | ??部分 |
最新兼容性數據可訪問 [caniuse.com/css-if] 查看
六、該不該用這個新特性？
推薦場景：
- 簡單的響應式斷點
- 漸進式增強設計
- 主題切換功能
暫不建議：
- 關鍵樣式邏輯（等更廣泛支持）
- 復雜媒體查詢（如嵌套條件）
這個功能讓CSS向真正的編程語言靠近了一步。雖然現在兼容性有限，但未來三年內可能成為主流寫法。現在開始嘗試，能讓你提前掌握下一代CSS開發技巧。
責任編輯：龐桂玉
來源：
web前端開發
