這樣的工具有:html5shiv.js蹬刷、respond.js畴博、CSS Reset笨忌、Normalize.css、Modernizr俱病、Post CSS等蜜唾;另外,還可以考慮使用條件注釋庶艾、CSS Hack袁余、JS能力檢測等對兼容做一些修補(bǔ)。
經(jīng)常問到兩個(gè)名詞:
- 逐漸增強(qiáng):針對低版本瀏覽器進(jìn)行構(gòu)建頁面咱揍,保證最基本的功能颖榜,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
- 優(yōu)雅降級:一開始就構(gòu)建完整的功能掩完,然后再針對低版本瀏覽器進(jìn)行兼容噪漾。
列舉5種以上瀏覽器兼容的寫法
- 條件注釋
<script>alert(1);</script>
- css hack
.box{
color: red; _color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
webkit- ,針對safari且蓬,chrome瀏覽器的內(nèi)核CSS寫法
-moz-欣硼,針對firefox瀏覽器的內(nèi)核CSS寫法
-ms-,針對ie內(nèi)核的CSS寫法
- 選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等
以下工具/名詞是做什么的(過)
條件注釋
條件注釋 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句恶阴。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼IE Hack
針對IE瀏覽器編寫不同的CSS诈胜,有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性冯事,瀏覽器擁有的能力而不是來區(qū)分是什么瀏覽器焦匈。這樣如果瀏覽器擁有某種能力則提供一種方案,沒有某種能力則提供另一種方案html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別昵仅,并導(dǎo)致CSS不起作用的問題缓熟。respond.js
讓不支持css3媒體查詢的瀏覽器支持查詢css reset
通過重新定義標(biāo)簽樣式,“覆蓋”瀏覽器的CSS默認(rèn)屬性normalize.css
Normalize.css 只是一個(gè)很小的CSS文件摔笤,但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性够滑。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的吕世、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案Modernizr
Modernizr是一個(gè) JavaScript 庫彰触,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具∧耄可以將CSS解析成抽象語法樹