在CSS中如何使用 when/else

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

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

讓我們來看看 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語法更豐富，期待！

原文來自：