[[441024]]

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

在這篇文章完稿前，when[1] 的提議已經(jīng)被 CSSWG 通過了，而 else[2] 是一個(gè)單獨(dú)的提案，目前是一個(gè)4級(jí)規(guī)范

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

when/else 語法

先來看看為了實(shí)現(xiàn)頁(yè)面響應(yīng)式是如何做的，這就要用到 CSS媒體查詢 

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

而換成 when/else 后呢？ 

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

語義上比 @media 更加好了

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

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

更多用法

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

組合使用

再來舉一個(gè) @media 和 @support 共用的例子 

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

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

其實(shí)不難理解，但要是換成 when/else 的語法會(huì)是啥樣呢？ 

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

內(nèi)聯(lián)使用

@when 也可以內(nèi)聯(lián)在CSS樣式中使用，例如： 

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

新的媒體查詢寫法

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

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

這樣的語法是不是就特別清晰明了了？不過可惜的是它還是一個(gè)4級(jí)規(guī)范

總結(jié)

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