處理瀏覽器兼容問題的超好用工具盤點(diǎn)

html5shiv.js

HTML5 Shiv可以在舊版Internet Explorer中使用HTML5部分元素隘庄,并為Internet Explorer 6-9分扎,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5樣式。

這些文件做什么咕幻?

html5shiv.js

這包括基本的createElement()shiv技術(shù)闽巩,以及用于IE6-8的document.createElement和document.createDocumentFragment的monkeypatches。它還適用于IE6-9禁熏,Safari 4.x和FF 3.x的HTML5元素的基本樣式。

html5shiv-printshiv.js

這包括以上所有內(nèi)容烫沙,以及允許HTML5元素被風(fēng)格化并在IE 6-8中打印時(shí)包含子元素的機(jī)制匹层。

它也與Modernizr一起發(fā)行。

安裝?

1.使用Bower

bower install html5shiv --save-dev

這將克隆最新版本的HTML5 shiv bower_components目錄锌蓄,并創(chuàng)建或更新文件bower.json升筏。它指定了您的項(xiàng)目依賴關(guān)系。

2.也可以在HTML5中包含HTML5 shiv <head>您的頁面在條件注釋和任何樣式表之后瘸爽。

<您访! - [if lt IE 9]>

<script src =“bower_components / html5shiv / dist / html5shiv.js”></script>

<![endif]-->

手動安裝

從這個(gè)存儲庫中下載并提取最新的zip包,并將兩個(gè)文件dist / html5shiv.js和dist / html5shiv-printshiv.js復(fù)制到您的項(xiàng)目中剪决。然后將其中一個(gè)包含在您的<head>中灵汪,如上所述。

HTML5 Shiv API

HTML5 Shiv作為一個(gè)簡單的插件解決方案柑潦。在大多數(shù)情況下享言,無需配置HTML5 Shiv或使用HTML5 Shiv提供的方法。

html5.elements

elements選項(xiàng)是一個(gè)空格分隔的字符串或數(shù)組渗鬼,它描述了shiv元素的完整列表览露。

在html5shiv.js之前配置元素

//create a global html5 options object

window.html5 = {

? ? ? ? ?'elements':'mark section customelement'

};

在html5shiv.js之后配置元素。

//change the html5shiv options object

window.html5.elements='mark section customelement';

//and re-invoke the `shivDocument` method

html5.shivDocument(document);

html5.shivCSS

如果將shivCSS設(shè)置為true譬胎,則HTML5 Shiv將添加基本樣式(主要顯示:塊)到切片元素(如章節(jié)差牛,文章)。在大多數(shù)情況下堰乔,網(wǎng)頁作者應(yīng)該在他的普通樣式表中包含這些基本樣式偏化,以確保沒有JavaScript的舊版瀏覽器支持(即Firefox 3.6)。

shivCSS默認(rèn)為true镐侯,并且可以設(shè)置為false侦讨,僅在包含html5shiv.js之前:


//create a global html5 options object

window.html5={'shivCSS':false};


html5.shivMethods

如果shivMethods選項(xiàng)設(shè)置為true(默認(rèn)情況下),HTML5 Shiv將在Internet Explorer 6-8中覆蓋document.createElement / document.createDocumentFragment苟翻,以允許HTML5元素的動態(tài)DOM創(chuàng)建韵卤。

關(guān)于方法這里不過多介紹--傳送門===>HTML5 Shiv method


respond.js

適用于最小/最大寬度CSS3 Media Queries(適用于IE 6-8及更多),快速和輕便袜瞬。

使用說明

1.使用最小/最大寬度的媒體查詢來制作CSS怜俐,以使您的布局從移動端一直到網(wǎng)頁端

@media screen and (min-width:480px) {

? ? ?/** ...styles for 480px and up go here **

/}

2.參考所有CSS之后的response.min.js腳本(1kb分鐘/ gzip壓縮)(運(yùn)行的時(shí)間越早,IE用戶將看不到非媒體內(nèi)容的閃存越大)

3.破解打開Internet Explorer的樂趣

怎么工作邓尤?

基本上拍鲤,腳本循環(huán)遍歷頁面中引用的CSS贴谎,并在其內(nèi)容上運(yùn)行正則表達(dá)式,以查找媒體查詢及其相關(guān)的CSS塊季稳。

傳送門===>Respond.js API


css reset

講的非常好的一篇擅这!==>關(guān)于CSS Reset 那些事(一)之 歷史演變與Normalize.css


normalize.css

npm : ? ? ? ? npm install --save normalize.css

bower: ? ? ? ?bower install --save normalize-css?

cdn:? ? ? ? ? ? https://cdnjs.com/libraries/normalize

它有什么作用?

1.保留有用的默認(rèn)值景鼠,與許多CSS重置不同仲翎。

2.規(guī)范各種元素的樣式。

3.更正錯(cuò)誤和常見的瀏覽器不一致铛漓。

4.通過微妙修改提高可用性溯香。

5.說明什么代碼使用詳細(xì)。

瀏覽器支持

Chrome (last two)

Edge (last two)

Firefox (last two)

Firefox ESR

Internet Explorer 8+

iOS Safari (last two)

Opera (last two)

Safari 6+

Normalize.css v1 provides legacy browser support(IE 6+, Safari 4+), 但不再積極開發(fā)浓恶。

更多了解請戳==>normalize.css API


Modernizr

Modernizr是一個(gè)JavaScript庫玫坛,可以檢測用戶瀏覽器中的HTML5和CSS3功能。

Modernizr測試當(dāng)前UA中可用的本機(jī)CSS3和HTML5功能包晰,并通過兩種方式將結(jié)果提供給您:作為全局的屬性Modernizr對象湿镀,以及作為元素上的類。此信息允許您逐漸增強(qiáng)您的頁面伐憾,同時(shí)對這些體驗(yàn)進(jìn)行細(xì)致的控制勉痴。

新的異步事件偵聽器

//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!');? }

})

更多使用請戳-->Modernizr


postCSS

PostCSS 是一個(gè)允許使用 JS 插件轉(zhuǎn)換樣式的工具。 這些插件可以檢查(lint)你的 CSS树肃,支持 CSS Variables 和 Mixins蒸矛, 編譯尚未被瀏覽器廣泛支持的先進(jìn)的 CSS 語法,內(nèi)聯(lián)圖片扫外,以及其它很多優(yōu)秀的功能莉钙。

PostCSS 在工業(yè)界被廣泛地應(yīng)用廓脆,其中不乏很多有名的行業(yè)領(lǐng)導(dǎo)者筛谚,如:維基百科,Twitter停忿,阿里巴巴驾讲, JetBrains。PostCSS 的Autoprefixer插件是最流行的 CSS 處理工具之一席赂。

截止到目前吮铭,PostCSS 有 200 多個(gè)插件。你可以在插件列表搜索目錄找到它們颅停。 下方的列表是我們最喜歡的插件 - 它們很好地演示了我們可以用 PostCSS 做些什么谓晌。

如果你有任何新的想法,開發(fā) PostCSS 插件非常簡單易上手癞揉。

解決全局 CSS 的問題

postcss-use允許你在 CSS 里明確地設(shè)置 PostCSS 插件纸肉,并且只在當(dāng)前文件執(zhí)行它們溺欧。

postcss-modulesreact-css-modules可以自動以組件為單位隔絕 CSS 選擇器。

postcss-autoreset是全局樣式重置的又一個(gè)選擇柏肪,它更適用于分離的組件姐刁。

postcss-initial添加了all: initial的支持,重置了所有繼承的樣式烦味。

cq-prolyfill添加了容器查詢的支持聂使,允許添加響應(yīng)于父元素寬度的樣式.

提前使用先進(jìn)的 CSS 特性

autoprefixer添加了 vendor 瀏覽器前綴,它使用 Can I Use 上面的數(shù)據(jù)谬俄。

postcss-cssnext允許你使用未來的 CSS 特性(包括autoprefixer)柏靶。

postcss-image-set-polyfill為所有瀏覽器模擬了image-set函數(shù)邏輯。

更佳的 CSS 可讀性

precss囊括了許多插件來支持類似 Sass 的特性溃论,比如 CSS 變量宿礁,套嵌,mixins 等蔬芥。

postcss-sorting給規(guī)則的內(nèi)容以及@規(guī)則排序梆靖。

postcss-utilities囊括了最常用的簡寫方式和書寫幫助。

short添加并拓展了大量的縮寫屬性笔诵。

圖片和字體

postcss-assets可以插入圖片尺寸和內(nèi)聯(lián)文件返吻。

postcss-sprites能生成雪碧圖。

font-magician生成所有在 CSS 里需要的@font-face規(guī)則乎婿。

postcss-inline-svg允許你內(nèi)聯(lián) SVG 并定制它的樣式测僵。

postcss-write-svg允許你在 CSS 里寫簡單的 SVG。

提示器(Linters)

stylelint是一個(gè)模塊化的樣式提示器谢翎。

stylefmt是一個(gè)能根據(jù)stylelint規(guī)則自動優(yōu)化 CSS 格式的工具捍靠。

doiuse提示 CSS 的瀏覽器支持性,使用的數(shù)據(jù)來自于 Can I Use森逮。

colorguard幫助你保持一個(gè)始終如一的調(diào)色板榨婆。

其它

postcss-rtl在單個(gè) CSS 文件里組合了兩個(gè)方向(左到右,右到左)的樣式褒侧。

cssnano是一個(gè)模塊化的 CSS 壓縮器良风。

lost是一個(gè)功能強(qiáng)大的calc()柵格系統(tǒng)。

rtlcss鏡像翻轉(zhuǎn) CSS 樣式闷供,適用于 right-to-left 的應(yīng)用場景烟央。

語法

PostCSS 可以轉(zhuǎn)化樣式到任意語法,不僅僅是 CSS歪脏。 如果還沒有支持你最喜歡的語法疑俭,你可以編寫一個(gè)解釋器以及(或者)一個(gè) stringifier 來拓展 PostCSS。

sugarss是一個(gè)以縮進(jìn)為基礎(chǔ)的語法婿失,類似于 Sass 和 Stylus钞艇。

postcss-html允許你在 HTML /Markdown/Vue component里編寫樣式鬼贱。

postcss-scss允許你使用 SCSS(但并沒有將 SCSS 編譯到 CSS)

postcss-sass允許你使用 Sass(但并沒有將 Sass 編譯到 CSS)香璃。

postcss-less允許你使用 Less(但并沒有將 LESS 編譯到 CSS)这难。

postcss-less-engine允許你使用 Less(并且使用真正的 Less.js 把 LESS 編譯到 CSS)

postcss-js允許你在 JS 里編寫樣式葡秒,或者轉(zhuǎn)換成 React 的內(nèi)聯(lián)樣式/Radium/JSS姻乓。

postcss-safe-parser查找并修復(fù) CSS 語法錯(cuò)誤。

midas將 CSS 字符串轉(zhuǎn)化成高亮的 HTML眯牧。


請戳這里使用-->postcss

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蹋岩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子学少,更是在濱河造成了極大的恐慌剪个,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件版确,死亡現(xiàn)場離奇詭異扣囊,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)绒疗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門侵歇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人吓蘑,你說我怎么就攤上這事惕虑。” “怎么了磨镶?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵溃蔫,是天一觀的道長。 經(jīng)常有香客問我琳猫,道長伟叛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任沸移,我火速辦了婚禮痪伦,結(jié)果婚禮上侄榴,老公的妹妹穿的比我還像新娘雹锣。我一直安慰自己,他們只是感情好癞蚕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布蕊爵。 她就那樣靜靜地躺著,像睡著了一般桦山。 火紅的嫁衣襯著肌膚如雪攒射。 梳的紋絲不亂的頭發(fā)上醋旦,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機(jī)與錄音会放,去河邊找鬼饲齐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛咧最,可吹牛的內(nèi)容都是我干的捂人。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼矢沿,長吁一口氣:“原來是場噩夢啊……” “哼滥搭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起捣鲸,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤瑟匆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后栽惶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體愁溜,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年外厂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了祝谚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡酣衷,死狀恐怖交惯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情穿仪,我是刑警寧澤席爽,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站啊片,受9級特大地震影響只锻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜紫谷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一齐饮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧笤昨,春花似錦祖驱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春匕坯,著一層夾襖步出監(jiān)牢的瞬間束昵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工葛峻, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锹雏,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓术奖,卻偏偏與公主長得像逼侦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子腰耙,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1.什么是 CSS hack榛丢? 以下是引自百度文庫的定義: 簡單地講,css hack指各版本及各品牌瀏覽器之間對...
    饑人谷_Young丶K閱讀 387評論 0 6
  • 什么是 CSS hack挺庞? 基礎(chǔ)概念 由于不同廠商的瀏覽器晰赞,比如Internet Explorer,Safari,...
    Sketch閱讀 293評論 0 0
  • 關(guān)于瀏覽器的兼容問題 1. 什么是 CSS hack 根據(jù)百度的簡述:CSS hack由于不同廠商的瀏覽器,比如I...
    熊蛋子17閱讀 689評論 0 2
  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號选侨,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • 1. 什么是 CSS hack 由于不同廠商的瀏覽器掖鱼,比如Internet Explorer,Safari,Moz...
    QQQQQCY閱讀 236評論 0 0