這樣的工具有:html5shiv.js、respond.js、CSS Reset、Normalize.css、Modernizr、Post CSS等;另外,還可以考慮使用條件注釋、CSS Hack、JS能力檢測等對兼容做一些修補。
經常問到兩個名詞:
- 逐漸增強:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
- 優雅降級:一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。
列舉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瀏覽器的內核CSS寫法
-moz-,針對firefox瀏覽器的內核CSS寫法
-ms-,針對ie內核的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的語法檢測瀏覽器支持的屬性,瀏覽器擁有的能力而不是來區分是什么瀏覽器。這樣如果瀏覽器擁有某種能力則提供一種方案,沒有某種能力則提供另一種方案html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別,并導致CSS不起作用的問題。respond.js
讓不支持css3媒體查詢的瀏覽器支持查詢css reset
通過重新定義標簽樣式,“覆蓋”瀏覽器的CSS默認屬性normalize.css
Normalize.css 只是一個很小的CSS文件,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset,Normalize.css是一種現代的、為HTML5準備的優質替代方案Modernizr
Modernizr是一個 JavaScript 庫,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個JS插件轉換樣式表的工具。可以將CSS解析成抽象語法樹