CSS,我可以寫 if/else 語法了?

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

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

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

我在 2011 年開始寫CSS的時候),從來沒有懷疑過這種語言會發生多大的變化。我還記得使用PIE.htcborder-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 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章