首頁  >  文章  >  web前端  >  css3有判斷語句嗎

css3有判斷語句嗎

WBOY
WBOY原創
2022-03-29 16:34:573839瀏覽

css3中有判斷語句,判斷語句為「@supports(運行條件){想要實現的css語句}」;「@supports」是css3新引入的規則之一,主要用於通過條件判斷目前瀏覽器是否支援某個css屬性,並載入特定的樣式,也就是css特性偵測。

css3有判斷語句嗎

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3有判斷語句嗎

css3中有判斷語句。

@supports是CSS3新引入的規則之一,主要用於偵測目前瀏覽器是否支援某個CSS屬性並載入特定樣式,即css的特性偵測。

CSS特性偵測就是針對不同瀏覽器終端,透過條件判斷目前瀏覽器對某個特性是否支援。運用CSS特性檢測,我們可以在支援目前特性的瀏覽器環境下使用新的技術,而不支援的則做出某些回退機制。

  下面我們就來看看css3@supports是如何使用的,介紹@supports進行css特性偵測的方法。

css3@supports的使用

  CSS@supports可以透過CSS語法來實現特性檢測,並在內部CSS區塊中寫入條件判斷語句:如果特性偵測通過則希望實現的CSS語句,如果特性偵測不通過則希望實現的CSS語句。

  基本語法:

  //如果通过了条件
 
  @supports(运行条件){
 
  /*应用规则---想要实现的css语句*/
 
  }
 
  //如果没有通过条件
 
  @supportsnot(运行的条件){
 
  /*应用规则---想要实现的css语句*/
 
  }

我們來看一個簡單的範例:

@supports (display:flex) {
  section { display: flex }
  ...
}

上面這段程式碼的意思是:如果瀏覽器支援「display:flex」屬性,那麼在「section」元素上就運用「display:flex」樣式。

@supports還可以根據不同的邏輯運算子結合,有不同的語法規則,接下來我們一起來細化@supports的語法規則,以及使用細節。

(學習影片分享:css影片教學

以上是css3有判斷語句嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn