從 Chrome 137 開始，CSS 加入了一個(gè)新功能：內(nèi)聯(lián)條件函數(shù)if()。它可以讓你在樣式中直接寫判斷邏輯。這樣可以少用 @media 和 @supports，讓樣式更集中、更好維護(hù)。

什么是 if()？

if() 是一個(gè) CSS 函數(shù)。它可以根據(jù)條件選擇不同的樣式值。用法和 JavaScript 里的 if...else 類似。

它支持三種條件：

• media()：媒體查詢，用來檢測(cè)屏幕大小、方向等。
• supports()：功能判斷，用來看瀏覽器是否支持某個(gè) CSS 功能。
• style()：樣式值判斷，常配合 CSS 變量使用，用來判斷元素的狀態(tài)。

基本語法：

property: if(
  condition-1: value-1;
  condition-2: value-2;
  /* … */
  else: value-n);

其中 else 是可選的，用于指定默認(rèn)值。

用 if() 有三個(gè)優(yōu)點(diǎn)：

• 更簡(jiǎn)潔：邏輯和樣式寫在一起，不用分成很多塊。
• 更直接：style() 可以用元素自己的屬性，不用依賴父元素。
• 更靈活：能配合變量、函數(shù)等新特性，寫出更動(dòng)態(tài)的樣式。

應(yīng)用場(chǎng)景

內(nèi)聯(lián)媒體查詢

根據(jù)屏幕方向切換卡片布局：

.card-container {
  flex-direction: if(
    media(orientation: landscape): row;
    else: column);
}

橫屏?xí)r用橫向布局，豎屏?xí)r用縱向布局。

內(nèi)聯(lián)兼容查詢

根據(jù)瀏覽器是否支持 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));
}

支持毛玻璃時(shí)用半透明背景，不支持時(shí)用白色。

基于狀態(tài)的樣式

根據(jù)主題模式切換文本顏色：

<div class="text" data-theme="dark">歡迎使用內(nèi)聯(lián) if()</div>

.text {
  --theme: attr(data-theme);
  color: if(
    style(--theme: dark): #f1f1f1;
    style(--theme: light): #222;
    else: #444);
}

深色主題時(shí)用淺文字，淺色主題時(shí)用深文字。

瀏覽器支持

圖片