浏览器兼容简要了解

2018-01-28 本文已影响0人 zy懒人漫游

CSS HACK

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

原理：

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的[浏览器]来写不同的CSS。
CSS Hack大致有3种表现形式：CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack

CSS Hack主要针对类内部Hack比如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

注:IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

浏览器兼容的思路

要不要做
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)

做到什么程度
让哪些浏览器支持哪些效果

如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)postCSS
条件注释、CSS Hack、js 能力检测做一些修补

渐进增强和优雅降级

渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

浏览器兼容的写法有以下几种:

使用html5shiv.js在不支持HTML5的浏览器上模拟HTML5元素；
使用条件注释为当前浏览器选择要加载的CSS文件；
使用条件注释为html标签添加不同的class属性，在CSS中在html相应的class中写不同浏览器能够兼容的属性。
使用Modernizr来检测浏览器支持哪些CSS属性或者不支持那些CSS属性，写在html元素中，写CSS代码时根据html标签中不同的类写不用的浏览器能够兼容的属性。
选择相应的框架来实现浏览器兼容，如要兼容IE6，7时尽量使用JQuery 1.~版本。jQuery 2.~ 只支持IE9以后的版本。

以下工具/名词是做什么的

条件注释
条件注释是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。
IE Hack
IE Hack就是针对IE浏览器兼容的写法，主要目的就是使我们的网页能够兼容各个版本的IE浏览器
js 能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
html5shiv.js
在使用html5的时候，有些浏览器不支持h5的一些新特性和标签，需要用这个html5shiv.js来模拟这些标签,主要用于IE6,7,8等一些不支持HTML5的浏览器；
respond.js
在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性，使用respond.js来兼容
css reset
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。更简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
normalize.css
和css reset的用法一样，但是不再那样简单粗暴的将所有的样式去掉，而是保留了一些合理的样式。
Modernizr
Modernizr测试当前浏览器的CSS3和HTML5功能，并通过两种方式使结果可用：作为全局Modernizr对象上以及<html>元素上的类。可以帮助我们更加简单的解决浏览器的兼容性问题。
postCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

用到的网站

浏览器市场份额
 caniuse.com 查CSS属性兼容
browserhacks 查 Hack 的写法