偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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

開發(fā) 前端
在過去的幾年中出現(xiàn)了大量的CSS新特性。其中一些語句也可以被視為if語句,但這些都可以說只是 if 語句。如果我們想要一個(gè) if/else 語句,我們需要做這樣的事情。

[[431440]]

我在 2011 年開始寫CSS的時(shí)候),從來沒有懷疑過這種語言會(huì)發(fā)生多大的變化。我還記得使用PIE.htc 讓 border-radius 適配所有瀏覽器,我的同事做了一個(gè)PHP腳本,生成一個(gè)PNG來圓角。

[[431441]]

然而,在過去的幾年中出現(xiàn)了大量的CSS新特性。其中一些語句也可以被視為if語句,比如@supports樣式:

  1. @supports (border-radius: 50%) { 
  2.   // don't use PIE.htc! {} 

還有一個(gè)經(jīng)典的媒體查詢,已經(jīng)存在了十多年:

  1. @media (max-width: 1000px) { 
  2.   //maybe a mobile sized device? {} 

還有一個(gè)新的 camp(),有點(diǎn)不同 :

  1. width: clamp(1000px, 50%, 10vw); 

但像這樣的行為:

  1. width: clamp(1000px >= (50% >= 10vw)); 

看得頭疼。

[[431442]]

但這些都可以說只是 if 語句。如果我們想要一個(gè) if/else 語句,我們需要做這樣的事情。

  1. @media (max-width: 1000px) and (prefers-color-scheme: dark) { 
  2.    //maybe a mobile device in dark mode {} 
  3. @media (max-width: 1000px) and (prefers-color-scheme: light) { 
  4.    //maybe a mobile device in light mode {} 

這很煩人。

[[431443]]

但好消息是 在新提議的 @When 特性可以解決我們的煩惱。它這么用:

  1. @when media(max-width: 1000px) { 
  2.    // 做點(diǎn)什么 

這很酷,但更酷的是還有 else:

  1. @when media(max-width: 1000px) { 
  2.    // 移動(dòng) 
  3. } @else { 
  4.    // 平板 

機(jī)智的你可能也想到了,那肯定還有 else if 了,沒錯(cuò)還真有:

  1. @when media(max-width: 1000px) { 
  2.    // 平板 
  3. } @else media(max-width: 700px) { { 
  4.    // 移動(dòng)  
  5. } @else { 
  6.    // PC 
[[431444]]

我們也有可能可以這樣做:

  1. @when media(max-width: 700px) { 
  2.    @when (prefers-color-scheme: dark) { 
  3.       //dark mode on mobile device 
  4.    } @else { 
  5.       //light mode on mobile device  
  6.    } 

我說 "可能" 是因?yàn)樵撎匦赃€在提案中,但我相信最終會(huì)出來的(沒出來我把頭發(fā)染綠)。

目前(20211023),瀏覽器的支持情況是怎樣的?零。少到連 Can I Use 都沒有。但隨著新的CSS樣式不斷推出,我相信我們很快就會(huì)看到它。

[[431445]]

作者:Kenton de Jong 譯者:前端小智

來源:codingnconcept 原文:https://kentondejong.medium.com/css-is-finally-getting-if-else-statements-3fabcec72a1f

 

責(zé)任編輯:姜華 來源: 大遷世界
相關(guān)推薦

2025-07-04 01:55:00

CSS樣式Chrome

2021-12-17 15:05:55

CSSwhenelse

2017-07-03 15:04:41

2021-04-20 08:02:08

業(yè)務(wù)數(shù)據(jù)用戶

2023-06-30 08:01:04

Reactuse關(guān)鍵詞

2025-04-23 08:02:44

2020-09-17 20:19:35

人工智能機(jī)器學(xué)習(xí)技術(shù)

2025-05-28 08:25:00

JavaScript代碼開發(fā)

2010-08-25 09:30:56

marginCSS

2010-09-06 13:59:23

CSS縮寫

2010-09-06 13:15:48

CSS定位

2021-03-26 15:18:11

代碼工具Mockoon

2020-05-18 08:42:23

CSS背景圖像前端開發(fā)

2024-03-13 08:21:53

冒泡排序動(dòng)畫

2022-02-23 14:18:53

If-Else入?yún)?/a>接口

2020-11-23 09:37:22

Python開發(fā)函數(shù)

2021-11-16 07:02:05

函數(shù)Python返回值

2022-09-20 14:30:24

腳本工具SQL數(shù)據(jù)庫

2013-06-20 11:11:00

程序員經(jīng)理

2021-09-26 10:45:27

前端游戲CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)