您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“什么是CSS特性檢測”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“什么是CSS特性檢測”吧!
什么是 CSS 特性檢測?我們知道,前端技術(shù)日新月異的今天,各種新技術(shù)新屬性層出不窮。在 CSS 層面亦不例外。
一些新屬性能極大提升用戶體驗以及減少工程師的工作量,并且在當下的前端氛圍下:
很多實驗性功能未成為標準卻被大量使用;
需要兼容多終端,多瀏覽器,而各瀏覽器對某一新功能的實現(xiàn)表現(xiàn)的天差地別;
所以有了優(yōu)雅降級和漸進增強的說法,在這種背景下,又想使用新的技術(shù)給用戶提供更好的體驗,又想做好回退機制保證低版本終端用戶的基本體驗,CSS 特性檢測就應運而生了。
CSS 特性檢測就是針對不同瀏覽器終端,判斷當前瀏覽器對某個特性是否支持。運用 CSS 特性檢測,我們可以在支持當前特性的瀏覽器環(huán)境下使用新的技術(shù),而不支持的則做出某些回退機制。
本文將主要介紹兩種 CSS 特性檢測的方式:
@supports
modernizr
傳統(tǒng)的 CSS 特性檢測都是通過 javascript 實現(xiàn)的,但是未來,原生 CSS 即可實現(xiàn)。
CSS @supports 通過 CSS 語法來實現(xiàn)特性檢測,并在內(nèi)部 CSS 區(qū)塊中寫入如果特性檢測通過希望實現(xiàn)的 CSS 語句。
@supports <supports_condition> { /* specific rules */ }
舉個例子:
div { position: fixed; } @supports (position:sticky) { div { position:sticky; } }
上面的例子中,position: sticky 是 position 的一個新屬性,用于實現(xiàn)黏性布局,可以輕松實現(xiàn)一些以往需要 javascript 才能實現(xiàn)的布局(戳我了解詳情[1]),但是目前只有在 -webkit- 內(nèi)核下才得到支持。
上面的寫法,首先定義了 div 的 position: fixed ,緊接著下面一句 @supports (position:sticky) 則是特性檢測括號內(nèi)的內(nèi)容,如果當前瀏覽器支持 @supports 語法,并且支持 position:sticky 語法,那么 div 的 則會被設(shè)置為 position:sticky 。
我們可以看到,@supports 語法的核心就在于這一句:@supports (...) { } ,括號內(nèi)是一個 CSS 表達式,如果瀏覽器判斷括號內(nèi)的表達式合法,那么接下來就會去渲染括號內(nèi)的 CSS 表達式。除了這種最常規(guī)的用法,還可以配合其他幾個關(guān)鍵字:
not 操作符可以放在任何表達式的前面來產(chǎn)生一個新的表達式,新的表達式為原表達式的值的否定??磦€例子:
@supports not (background: linear-gradient(90deg, red, yellow)) { div { background: red; } }
因為添加了 not 關(guān)鍵字,所以與上面第一個例子相反,這里如果檢測到瀏覽器不支持線性漸變 background: linear-gradient(90deg, red, yellow) 的語法,則將 div 的顏色設(shè)置為紅色 background: red 。
這個也好理解,多重判斷,類似 javascript 的 && 運算符符。用 and 操作符連接兩個原始的表達式。只有兩個原始表達式的值都為真,生成的表達式才為真,反之為假。
當然,and 可以連接任意多個表達式看個例子:
p { overflow: hidden; text-overflow: ellipsis; } @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) { p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
上面同時,檢測 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了三個語法,如果同時支持,則設(shè)定三個 CSS 規(guī)則。這三個語法必須同時得到瀏覽器的支持,如果表達式為真,則可以用于實現(xiàn)多行省略效果:
Code Demo - @supportAnd[2]
理解了 @supports and,就很好理解 @supports or 了,與 javascript 的 || 運算符類似,表達式中只要有一個為真,則生成表達式表達式為真。
看例子:
@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){ div { background:-webkit-linear-gradient(0deg, yellow, red); background:linear-gradient(90deg, yellow, red) } }
上面的例子中,只有檢測到瀏覽器支持 background:-webkit-linear-gradient(0deg, yellow, red) 或者(or) background:linear-gradient(90deg, yellow, red) 其中一個,則給 div 元素添加漸變。
CodePen Demo -- @supports or[3]
當然,關(guān)鍵字 not 還可以和 and 或者 or 混合使用。感興趣的可以嘗試一下。
兼容性來看,先看看 Can i use(更新至 2021/05/13)[4] 吧:
大部分瀏覽器都已經(jīng)支持了,主要需要使用 polyfill 來兼容的是安卓 4.4 以下版本。
我們已經(jīng)可以開始使用起來了,使用 @supports 實現(xiàn)漸進增強的效果。
漸進增強(progressive enhancement):針對低版本瀏覽器進行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗:
談到了 @supports,就有必要再說說 CSS.supports() 。
它是作為 @supports 的另一種形式出現(xiàn)的,我們可以使用 javascript 的方式來獲得 CSS 屬性的支持情況。
可以打開控制臺,輸入 CSS.supports 試試:
如果沒有自己實現(xiàn) CSS.supports 這個方法,輸出上述信息,表示瀏覽器是支持 @supports 語法的,使用如下:
CSS.supports('display', 'flex') // true CSS.supports('position', 'sticky') // true
那它有什么用呢?如果你的頁面需要動態(tài)添加一些你不確定哪些瀏覽器支持的新的屬性,那它也許會派上用場。以及,它可以配合我們下文即將要講的 modernizr 。
上面介紹了 CSS 方式的特性檢測,在以前,通常是使用 javascript 來進行特性檢測的,其中 modernizr 就是其中最為出色的佼佼者。
modernizr(戳我查看 Github[5] )是一個開源的 javascript 庫。有著將近 2W 的 star ,其優(yōu)秀程度可見一斑。
簡單看看使用方法,假設(shè)頁面已經(jīng)引用了 modernizr ,語法如下:
// Listen to a test, give it a callback Modernizr.on('testname', function( result ) { if (result) { console.log('The test passed!'); } else { console.log('The test failed!'); } }); // 或者是類似 CSS.supports() Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)'); // true
舉個實際的例子,假設(shè)我們希望對是否支持漸變這個樣式瀏覽器下的一個 div 區(qū)別對待,有如下 CSS:
div { background: #aaa; } .linear-gradient div{ background: linear-gradient(90deg, #888, #ccc); }
使用 Modernizr 進行判斷,如果支持漸變,則在根元素添加一個 .linear-gradient 樣式,方便示例,使用了 jquery 語法:
if (Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)')) { $('html').addClass('linear-gradient'); }
Demo - modernizr[6]
當然,Modernizr 還有很多其他的功能,可以去翻翻它的 API 。
如果嫌引入整一個 Modernizr 庫太大,頁面又不支持 @supports ,其實我們自己用簡單的 javascript 實現(xiàn)也非常方便簡單。
想要知道瀏覽器支持多少 CSS 屬性,可以在調(diào)試窗口試試:
var root = document.documentElement; //HTML for(var key in root.style) { console.log(key); }
上面圖片截取的只是打印出來的一小部分。如果我們要檢測某個屬性樣式是否被支持,在任意的 element.style 檢測它是否存在即可,即上面代碼示例的 root 可以替換成任意元素。
當然,元素可能有 background 屬性,但是不支持具體的 linear-gradinet() 屬性值。這個時候該如何檢測呢?只需要將具體的值賦值給某一元素,再查詢這個屬性值能否被讀取。
var root = document.documentElement; root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)'; if(root.style.backgroundImage) { // 支持 } else { // 不支持 }
所以上面 Modernizr 的例子里,javascript 代碼可以改成:
var root = document.documentElement; root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)'; if(root.style.backgroundImage) { $('html').addClass('linear-gradient'); }
當然,做這種特定屬性值判斷的時候由于有個 CSS 賦值操作,所以我們選取用于判斷的元素應該是一個隱藏在頁面上的元素。
原生的 @supports 的性能肯定是最好的,而且無需引入外部 javascript ,首推這個,但是無奈兼容問題,目前來看不是最好的選擇。
Modernizr 功能強大,兼容性好,但是需要引入外部 javascript,多一個 http 請求,如果只是進行幾個特性檢測,有點殺雞用牛刀的感覺。
針對需要的特性檢測,使用 javascript 實現(xiàn)一個簡單的函數(shù),再把上面用到的方法封裝一下:
/** * 用于簡單的 CSS 特性檢測 * @param [String] property 需要檢測的 CSS 屬性名 * @param [String] value 樣式的具體屬性值 * @return [Boolean] 是否通過檢查 */ function cssTest(property, value) { // 用于測試的元素,隱藏在頁面上 var ele = document.getElementById('test-display-none'); // 只有一個參數(shù)的情況 if(arguments.length === 1) { if(property in ele.style) { return true; } // 兩個參數(shù)的情況 }else if(arguments.length === 2){ ele.style[property] = value; if(ele.style[property]) { return true; } } return false; }
軟件工程沒有銀彈,所以無論哪種方式,都有適合的場景,我們要做的就是掌握了解它們的原理,根據(jù)不同的場景靈活運用即可。
到此,相信大家對“什么是CSS特性檢測”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。