css3中有判斷語句,判斷語句為「@supports(運行條件){想要實現的css語句}」;「@supports」是css3新引入的規則之一,主要用於通過條件判斷目前瀏覽器是否支援某個css屬性,並載入特定的樣式,也就是css特性偵測。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
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中文網其他相關文章!