[[431440]]

我在 2011 年開始寫CSS的時候)，從來沒有懷疑過這種語言會發生多大的變化。我還記得使用PIE.htc 讓 border-radius 適配所有瀏覽器，我的同事做了一個PHP腳本，生成一個PNG來圓角。

然而，在過去的幾年中出現了大量的CSS新特性。其中一些語句也可以被視為if語句，比如@supports樣式:

@supports (border-radius: 50%) { 
  // don't use PIE.htc! {} 
} 

還有一個經典的媒體查詢，已經存在了十多年:

@media (max-width: 1000px) { 
  //maybe a mobile sized device? {} 
} 

還有一個新的 camp()，有點不同 :

width: clamp(1000px, 50%, 10vw); 

但像這樣的行為:

width: clamp(1000px >= (50% >= 10vw)); 

看得頭疼。

但這些都可以說只是 if 語句。如果我們想要一個 if/else 語句，我們需要做這樣的事情。

@media (max-width: 1000px) and (prefers-color-scheme: dark) { 
   //maybe a mobile device in dark mode {} 
} 
@media (max-width: 1000px) and (prefers-color-scheme: light) { 
   //maybe a mobile device in light mode {} 
} 

這很煩人。

但好消息是 在新提議的 @When 特性可以解決我們的煩惱。它這么用：

@when media(max-width: 1000px) { 
   // 做點什么 
} 

這很酷，但更酷的是還有 else:

@when media(max-width: 1000px) { 
   // 移動 
} @else { 
   // 平板 
} 

機智的你可能也想到了，那肯定還有 else if 了，沒錯還真有：

@when media(max-width: 1000px) { 
   // 平板 
} @else media(max-width: 700px) { { 
   // 移動  
} @else { 
   // PC 
} 

我們也有可能可以這樣做:

@when media(max-width: 700px) { 
   @when (prefers-color-scheme: dark) { 
      //dark mode on mobile device 
   } @else { 
      //light mode on mobile device  
   } 
} 

我說 "可能" 是因為該特性還在提案中，但我相信最終會出來的(沒出來我把頭發染綠)。

目前(20211023),瀏覽器的支持情況是怎樣的?零。少到連 Can I Use 都沒有。但隨著新的CSS樣式不斷推出，我相信我們很快就會看到它。

作者：Kenton de Jong 譯者：前端小智

來源：codingnconcept 原文：https://kentondejong.medium.com/css-is-finally-getting-if-else-statements-3fabcec72a1f