[[431440]]

我在 2011 年開(kāi)始寫(xiě)CSS的時(shí)候)，從來(lái)沒(méi)有懷疑過(guò)這種語(yǔ)言會(huì)發(fā)生多大的變化。我還記得使用PIE.htc 讓 border-radius 適配所有瀏覽器，我的同事做了一個(gè)PHP腳本，生成一個(gè)PNG來(lái)圓角。

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

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

還有一個(gè)經(jīng)典的媒體查詢，已經(jīng)存在了十多年:

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

還有一個(gè)新的 camp()，有點(diǎn)不同 :

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

但像這樣的行為:

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

看得頭疼。

但這些都可以說(shuō)只是 if 語(yǔ)句。如果我們想要一個(gè) if/else 語(yǔ)句，我們需要做這樣的事情。

@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) { 
   // 做點(diǎn)什么 
} 

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

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

機(jī)智的你可能也想到了，那肯定還有 else if 了，沒(méi)錯(cuò)還真有：

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

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

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

我說(shuō) "可能" 是因?yàn)樵撎匦赃€在提案中，但我相信最終會(huì)出來(lái)的(沒(méi)出來(lái)我把頭發(fā)染綠)。

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

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

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