[[441024]]

 大家都知道CSS已經有@media、@support 查詢形式的條件，可以非常靈活地選擇對應的樣式，然而還有一個新的提議叫做 when/else，這語法似乎看起來更加明了方便

在這篇文章完稿前，when[1] 的提議已經被 CSSWG 通過了，而 else[2] 是一個單獨的提案，目前是一個4級規范

讓我們來看看 when/else 是如何使用的吧

when/else 語法

先來看看為了實現頁面響應式是如何做的，這就要用到 CSS媒體查詢 

@media (min-width: 800px) {  
  /* 寬度大于800px時的樣式 */  
}  
@media (max-width: 799px) { 
  /* 寬度小于799px時的樣式 */  
} 

而換成 when/else 后呢？ 

@when media(min-width: 800px) {  
  /* 寬度大于800px時的樣式 */  
}  
@else {  
  /* 寬度不大于800px時的樣式 */  
} 

語義上比 @media 更加好了

when/else 甚至還能支持多條件判斷，跟寫 if/else 似的 

@when media(min-width: 800px) {  
  /* 寬度大于800px時的樣式 */  
}  
@else media(min-width: 600px) {  
  /* 寬度大于600px但不大于800px時的樣式 */  
}  
@else {  
  /* 寬度不大于600px時的樣式 */  
} 

更多用法

一起來看看 when/else 有哪些不錯的用法~

組合使用

再來舉一個 @media 和 @support 共用的例子 

@media (min-width: 800px) {  
    @supports (display: flex) {  
        .flex {  
            flex-direction: column;  
        }  
    }  
} 

這段代碼的意思是當頁面寬度大于 800px 并且瀏覽器支持 display: flex 語法時，給類名為 flex 的元素設置 flex-direction: column 的樣式

其實不難理解，但要是換成 when/else 的語法會是啥樣呢？ 

@when media(min-width: 800px) and supports(display: flex) {  
    .flex {  
        flex-direction: column;  
    } 
 }  

內聯使用

@when 也可以內聯在CSS樣式中使用，例如： 

.button {  
  padding: 2rem;  
  @when element(max-width: 400px) {  
    padding: 1rem;  
  }  
} 

新的媒體查詢寫法

我在初學 @media 這個語法時也覺得有些拗口，min-width 和 max-width 還是需要稍微思考一下才知道是什么意思，然后有一個有意思的媒體查詢寫法也想在這里提一下，它的語法感覺挺有意思的，而且特別易懂，寫法如下： 

@media (width <= 800px) {  
  /* 頁面寬度小于等于800px時的樣式 */  
} 

這樣的語法是不是就特別清晰明了了？不過可惜的是它還是一個4級規范

總結

這些提案進展得相當快，關于使用 @if 還是 @when 的問題也存在一些爭議，怕 @if會與 Sass 沖突，還有一個建議是用 @where 來代替。總之不管叫啥名字，都是為了讓CSS語法更豐富，期待！