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