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-modules和react-css-modules可以自動以組件為單位隔絕 CSS 選擇器。
postcss-autoreset是全局樣式重置的又一個(gè)選擇柏肪,它更適用于分離的組件姐刁。
postcss-initial添加了all: initial的支持,重置了所有繼承的樣式烦味。
cq-prolyfill添加了容器查詢的支持聂使,允許添加響應(yīng)于父元素寬度的樣式.
autoprefixer添加了 vendor 瀏覽器前綴,它使用 Can I Use 上面的數(shù)據(jù)谬俄。
postcss-cssnext允許你使用未來的 CSS 特性(包括autoprefixer)柏靶。
postcss-image-set-polyfill為所有瀏覽器模擬了image-set函數(shù)邏輯。
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。
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