CSS，我可以寫 if/else 語法了？

前端小智發表於2021-11-04
CSS
作者：Kenton de Jong
譯者：前端小智
來源：codingnconcept

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

我在 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樣式不斷推出，我相信我們很快就會看到它。

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://kentondejong.medium.c...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章