这样的工具有: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解析成抽象语法树