css3中有判斷語句,判斷語句為“@supports(運行條件){想要實現(xiàn)的css語句}”;“@supports”是css3新引入的規(guī)則之一,主要用于通過條件判斷當前瀏覽器是否支持某個css屬性,并加載具體的樣式,也就是css特性檢測。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3有判斷語句嗎
css3中有判斷語句。
@supports是CSS3新引入的規(guī)則之一,主要用于檢測當前瀏覽器是否支持某個CSS屬性并加載具體樣式,即css的特性檢測。
CSS特性檢測就是針對不同瀏覽器終端,通過條件判斷當前瀏覽器對某個特性是否支持。運用CSS特性檢測,我們可以在支持當前特性的瀏覽器環(huán)境下使用新的技術,而不支持的則做出某些回退機制。
下面我們就來看看css3@supports是如何使用的,介紹@supports進行css特性檢測的方法。
css3@supports的使用
CSS@supports可以通過CSS語法來實現(xiàn)特性檢測,并在內(nèi)部CSS區(qū)塊中寫入條件判斷語句:如果特性檢測通過則希望實現(xiàn)的CSS語句,如果特性檢測不通過則希望實現(xiàn)的CSS語句。
基本語法:
//如果通過了條件 @supports(運行條件){ /*應用規(guī)則---想要實現(xiàn)的css語句*/ } //如果沒有通過條件 @supportsnot(運行的條件){ /*應用規(guī)則---想要實現(xiàn)的css語句*/ }
我們來看一個簡單的例子:
@supports (display:flex) { section { display: flex } ... }
上面這段代碼的意思是:如果瀏覽器支持“display:flex”屬性,那么在“section”元素上就運用“display:flex”樣式。
@supports還可以根據(jù)不同的邏輯運算符相結合,具有不同的語法規(guī)則,接下來我們一起來細化一下@supports的語法規(guī)則,以及使用細節(jié)。
(學習視頻分享:css視頻教程)