您現在的位置是:電腦技術吧?>? 故障問題 ??>??supports,supportsRtl??>??正文詳情

supports,supportsRtl

隆運杰2019-11-24 10:21:08 人圍觀
簡介supports中文您應該熟悉基于瀏覽器的特征檢測,特別是在modernizr.js被推出之后。事實上,W3C也提出了一個規范。你可以做一些基于CSS的功能檢測,也就是@suppomysql中limit用法詳解

基于瀏覽器的特性檢測大家應該已經很熟悉了,特別是modernizr.js推出來之后。

其實w3c也出了規范,可以基于css來做一些特性檢測,也就是@supports,這個特性已經有兩年多了,之前瀏覽器支持度不夠,現在webkit nightly也開始支持了,也就是說safari 9會支持到,這樣的話,Blink webKit gecko都支持了,只剩下IE瀏覽器不支持了,嗯,這樣更方便對IE差異化處理了。

  但是@supports并不能完全替代JS的特性檢測方法,它只支持對CSS屬性的檢測,其它HTML5 api以及webP等技術的檢測還是需要JS來完成。

  用法:  @supports就像media query一樣簡單:  CSS Code復制內容到剪貼板  @supports(prop:value) { /* more styles */ }  @supports也允許你用各種復雜的組合來進行特性檢測。

  基本用法:  CSS Code復制內容到剪貼板  @supports (display: flex) { div { display: flex; } }  你可以用這種方法來檢測各種基本的CSS屬性。

  not關鍵詞  就像這樣:  CSS Code復制內容到剪貼板  @supports not (display: flex) { div { float: left; } /* alternative styles */ }  個人感覺有些雞肋了,支持@supports的瀏覽器會不支持各種CSS屬性么?不過萬事沒有絕對,這種情況以后還是可能會有。

嗯,私有前綴的話可以試試。

  多條件檢測  CSS Code復制內容到剪貼板  @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }  /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }  你也可以將or和and語句放在一起混用。

  CSS Code復制內容到剪貼板  @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }  或者更復雜的:  CSS Code復制內容到剪貼板  @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ /* specific CSS applied to simulate text-align-last:justify */ }  JS方法  同時也可以用javascript來做類似的檢測,方法也很簡單:  CSS Code復制內容到剪貼板  boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);  兩種方法都可以,會返回一個bool值。

比如:  CSS Code復制內容到剪貼板  result = CSS.supports(text-decoration-style, blink);  result = CSS.supports(display, flex);  result = CSS.supports(( transform-origin: 5% 5% ));  result = CSS.supports(( transform-style: preserve ) or ( -moz-transform-style: preserve ) or ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve ) );  用途  最大的用途是做css特性判斷的時候,不用再在js(或者傳統的js方法)了,用過modernizr.js的同學可能會印象很深刻,modernizr會在html標簽上加上各種各樣的class來區分,其它js方法也是類似的實現思路。

現在可以直接用@supports來區分或者做瀏覽器差異化了。

  瀏覽器支持  chrome 28   opera 12.1   firefox22   safari 9

版權聲明:本文由 隆運杰 整理編輯。

原標題:supportassist,supports_masking

轉載注明出處:http://www.dn9ww09s.icu/fault/14150.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 拼多多30元無門檻券,拼多多五元券的規律

    拼多多30元無門檻券,拼多多五元券的規律 相關圖片拼多多淘客軟件叫什么你有沒有發現過極限男人最近推薦的購物軟件。這是正確的。我是平度多。我們怎么能買到平度多的優惠券?接下來,超人軟件編輯將為您介紹品多多的優惠拼多...

  • HTML5常用的標簽,HTML常用標簽

    HTML5常用的標簽,HTML常用標簽 相關圖片css常用標簽HTML/HTML需要LabeHead /頭需要的標題/標題集:文檔標題H1/H1的最大標題。標題1預先對文本進行預格式化,保留文本的原始樣式,如代碼。U/U下css3常用的標簽...

  • win7所有程序無法打開,win7無法打開exe

    win7所有程序無法打開,win7無法打開exe 相關圖片無法加載win7安裝程序ODT文件是OpenOffice存儲在計算機中的文件。近日,不少小伙伴反映遇到了雙擊ODT文件打開的問題。那么如果win7不能打開ODT文件呢?現在,超人軟件編win7exe打不開...

  • 升級,qq等級怎么升級

    升級,qq等級怎么升級 相關圖片b站等級怎么升級視頻條是一個非常好的實時軟件。在這個軟件中,用戶可以得到更好的服務,如果他們升級他們的帳戶為皇冠或太陽。那么,直播如何才能晉級皇冠呢?接下來,超人軟...

  • 桌面圖標不見了怎么辦,桌面不顯示圖標怎么辦

    桌面圖標不見了怎么辦,桌面不顯示圖標怎么辦 相關圖片手機桌面圖標最近,很多小伙伴報告說,他們的電腦被流氓圖標盯著看,不管怎樣都不能刪除。那么如何刪除win7廣告圖標呢?接下來,超人軟件編輯器將介紹如何刪除win7桌面廣告圖標顯...

  • 氣泡,好看的氣泡

    氣泡,好看的氣泡 相關圖片免費氣泡Flash CS4在制作美麗泡泡動畫時,是考題,本文將flashcs4在制作美麗泡泡動畫教程中進行閱讀。請仔細閱讀以下內容!詳細代碼:function ballQQ絕版氣泡...

  • 17世紀對班級授課制,19世紀對班級組織的發展產生

    17世紀對班級授課制,19世紀對班級組織的發展產生 相關圖片小學每個班級有多少人世紀衛報是一個學習平臺,致力于為學生和學校之間提供一個橋梁。在這個軟件中,用戶可以通過加入班級來查看學校和班級的最新情況。世紀衛報怎么能加入這...

  • 關閉迅雷9瀏覽器,怎么關閉迅雷9的瀏覽器

    關閉迅雷9瀏覽器,怎么關閉迅雷9的瀏覽器 相關圖片迅雷10關閉右側瀏覽器在迅雷的眾多版本中,除了迅雷7.9的早期版本外,最受歡迎的版本是迅雷9。迅雷9的特點是界面豐富,總能找到你需要的功能,但有些用戶覺得太臃腫了,尤其是右...

  • 拼多多怎樣取消待拼團,拼多多賣家如何取消訂單

    拼多多怎樣取消待拼團,拼多多賣家如何取消訂單 相關圖片拼多多隨意取消訂單品多多是一款非常好的購物軟件。最近,許多小伙伴報告說,他們買了一些商品,但不想要。他們可以取消訂單。平度多如何取消訂單?接下來,超人軟件編輯將為...

  • 怎么制作網頁教程,怎么制作網頁

    怎么制作網頁教程,怎么制作網頁 相關圖片制作網頁步驟在制作網頁之前,我們應該首先了解網頁中需要哪些元素。今天的編輯將介紹網頁的元素網站的基本元素是網頁。每個網頁構成一個完整的網站。網頁也是可分離的。網頁...

熱評文章

  • 美團完成以后怎么補發票,美團電子發票在哪里看

    美團完成以后怎么補發票,美團電子發票在哪里看 相關圖片美團發票哪里查看我相信很多人購物時都喜歡用美團付款。近日,美團推出了為您權益開發票的功能。如何開具美團發票?接下來,超人軟件將為您介紹美團Android版的一些發票應用方法...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛士是一款致力于幫助孩子健康成長的教育軟件。在這個軟件中,用戶不僅可以和父母一起了解孩子的最新情況,還可以學習到最全面的教育信息。如何使用世...

  • 定投怎么取出來,定投什么時候可以取

    定投怎么取出來,定投什么時候可以取 相關圖片定投可以隨時取出來嗎近日,支付寶推出了一款名為輕定投資的理財產品,只要用戶每天投資10元即可獲得獎勵。然而,許多歐洲合作伙伴發現,他們不知道如何拿回這筆錢。那我怎么才...

  • vertical-align,verticalalign怎么用

    vertical-align,verticalalign怎么用 相關圖片chialign把input和img放在同一行,img標簽總是比input高一個頭,這很難看。我以前嘗試過很多方法,但我做不到。后來,我在網站上發現最多的方法是在img中添加atext align...

  • 路由器mtu值在哪設置,怎么設置路由器的mtu值

    路由器mtu值在哪設置,怎么設置路由器的mtu值 相關圖片路由器的mtu值MTU指的是可以通過通信協議的某一層傳遞的最大分組大小。在windows中,默認的MTU是1500,但是不同的網絡接入方式、不同地區的網絡運營商,甚至不同的路由光纖接入路由器...

  • icloud云儲存空間不可用,icloud云空間不可用怎么回事

    icloud云儲存空間不可用,icloud云空間不可用怎么回事 相關圖片蘋果6云存儲空間不可用Icloud是蘋果公司2011年推出的云存儲服務,用戶可以免費存儲5GB數據。由于iPhone的不可擴展內存,這種額外的云存儲非常實用。但我的一些朋友icloud云端信息不可用...

  • win7頻繁出現默認網關不可用,win7默認網關不可用怎么修復

    win7頻繁出現默認網關不可用,win7默認網關不可用怎么修復 相關圖片默認網關為空 上不了網我相信許多win7用戶都遇到了默認網關不可用的情況。那么,如果win7默認網關不可用呢?現在,超人軟件編輯器將介紹如何在這種情況下設置win7默認網關。讓我們...

  • 實例卡,實例

    實例卡,實例 相關圖片實例文本使用CSS3 HSL聲明也用于設置顏色。下一個?HSLA?是的,這與RGBA H s L聲明相同,它使用色調(H)、飽和度(s)和亮度(L)來設置從顏色盤派生的什么是示例圖...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛報是一個很好的教育軟件。在這個軟件中,用戶不僅可以了解孩子在學校的情況,還可以查詢他們的學習成績。如何質疑世紀衛報的表現?現在,超人軟件編...

  • 動態網頁制作技術哪些,動態網頁教程

    動態網頁制作技術哪些,動態網頁教程 相關圖片php制作動態網頁SWF動畫文件中的圖像、聲音、文本和動畫都固化在其中,如何實現動態數據在SWF文件中的顯示,這是一個新的問題?可以使用flash中的Fscommand。下面是如asp動態網頁設計教...

關注微信

变脸官网查询