CSS支持 if / else 了
作者：CUGGZ
從 Chrome 137 開始，CSS 加入了一個新功能：內聯條件函數??if()??。它可以讓你在樣式中直接寫判斷邏輯。這樣可以少用 ??@media?? 和 ??@supports??，讓樣式更集中、更好維護。
從 Chrome 137 開始，CSS 加入了一個新功能：內聯條件函數if()。它可以讓你在樣式中直接寫判斷邏輯。這樣可以少用 @media 和 @supports，讓樣式更集中、更好維護。
什么是 if()？
if() 是一個 CSS 函數。它可以根據條件選擇不同的樣式值。用法和 JavaScript 里的 if...else 類似。
它支持三種條件：
media()：媒體查詢，用來檢測屏幕大小、方向等。supports()：功能判斷，用來看瀏覽器是否支持某個 CSS 功能。style()：樣式值判斷，常配合 CSS 變量使用，用來判斷元素的狀態。
基本語法：
property: if(
condition-1: value-1;
condition-2: value-2;
/* … */
else: value-n);其中 else 是可選的，用于指定默認值。
用 if() 有三個優點：
- 更簡潔：邏輯和樣式寫在一起，不用分成很多塊。
- 更直接：
style()可以用元素自己的屬性，不用依賴父元素。 - 更靈活：能配合變量、函數等新特性，寫出更動態的樣式。
應用場景
內聯媒體查詢
根據屏幕方向切換卡片布局：
.card-container {
flex-direction: if(
media(orientation: landscape): row;
else: column);
}橫屏時用橫向布局，豎屏時用縱向布局。
內聯兼容查詢
根據瀏覽器是否支持 backdrop-filter 添加毛玻璃效果：
.modal {
background: if(
supports(backdrop-filter: blur(10px)):
rgba(255, 255, 255, 0.6);
else:
#ffffff);
backdrop-filter: if(
supports(backdrop-filter: blur(10px)):
blur(10px));
}支持毛玻璃時用半透明背景，不支持時用白色。
基于狀態的樣式
根據主題模式切換文本顏色：
<div class="text" data-theme="dark">歡迎使用內聯 if()</div>.text {
--theme: attr(data-theme);
color: if(
style(--theme: dark): #f1f1f1;
style(--theme: light): #222;
else: #444);
}深色主題時用淺文字，淺色主題時用深文字。
瀏覽器支持
圖片
責任編輯：武曉燕
來源：
前端充電寶
