浏览器兼容

一、前言

做前端开发，必然少不了浏览器，然而不同的厂商有着各自版本的浏览器，不同的浏览器对css的理解和解析不一样。那用户使用不同厂商不同版本的浏览器，而我们要给用户一个统一的网页，那我们在写css时就必须考虑到网页在不同的浏览器展现所带来的问题。
　　例如，一个css属性，在IE 8不可以使用，但是在IE 9可以使用，而我们又使用了这个css属性，又必须在IE 8上展示，那我们就需要解决这个属性在不同版本的展示，也就是浏览器的兼容问题。下面通过一些解决思路和方法来探讨如何解决浏览器的兼容问题。

二、什么是 CSS hack

不同版本或不同厂商的的浏览器（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持和解析存在着差异，我们为在不同的浏览器获得统一的页面展现效果，就需要针对不同的浏览器写特定的CSS样式。我们把针对不同的浏览器写相应的CSS样式的过程称为CSS hack。

三、浅谈解决浏览器兼容的思路

1、要不要做这个产品

如果我们要做一个产品，首先要从成本和回报的角度来考虑，这个产品是否有必要做。
　　如果有必要，我们再从产品的角度思考又是为哪类用户做。用户会通过哪些浏览器来浏览网页，不同的浏览器使用的比例，以及是网页展示的功能优先还是网页展示的效果优先。这些问题我们都需要了解。
　　在这里推荐一个网站，百度统计，我们可以从这个网站了解到不同的浏览器的市场份额。从这个网站我们也可以看到，依然有一部分人群，使用比较老版本的浏览器（如IE 7、8）。我们的用户是不是大部分使用这些老版本的浏览器的，一般安全性比较高的政府机关或者银行等单位，他们的浏览器一般都是比较老的。如果我们的用户是这些，那我们写CSS时，就要考虑属性兼容的问题。

2、做到什么程度

一般企业都会从成本和回报的角度去考虑，这个产品做到什么程度。假如产品的重要性我们已经了解，那我们要考虑让哪些浏览器来支持，需不需要老版本的浏览器支持，支持到哪个版本等等都要了解。了解这些过后，我们在做网页开发时，就会有一个清晰的思路，如何让不支持这个CSS属性的浏览器，获得同样支持的浏览器的页面统一。

3、常用解决兼容的方法

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

二者区别：
　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Chrome等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 ” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。

“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。在实际的开发当中分析准确，具有什么功能或者效果的网页，将会给我们的开发工作减少很多弯路。

在具体的开发当中我们一般参考一下几个方法，获得较理想的兼容效果。
方法1：根据兼容需求选择技术框架/库(jquery)。
方法2：根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)。
方法3：postCSS
方法4：条件注释、CSS Hack、js 能力检测做一些修补。

四、浏览器兼容的写法举例

以下包含但不限于

1、选择合适的框架

①、Bootstrap (>=ie8) ：即IE 8及以上都可以使用。
②、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)：jQuery2以下版本，IE6及以后浏览器都能识别；jQuery2以上IE9及以上都能使用。
③、Vue (>= ie9)：IE9及以后版本都能使用。

2、条件注释 (conditional comment)

条件注释是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。也称：IE hack。
　　有两种“条件注释”：下层显示 (downlevel revealed)和下层隐藏(downlevel hidden)。
下层隐藏：
下层显示 ：<![if expression]> HTML <![endif]>
如下是两个“下层隐藏”条件注释的示例。

或者

第一个示例中的指令将会让 IE 8 读取指定的CSS文件，而 IE 7 或者其它版本的 IE 将会忽略它。非 IE 的浏览器同样会把它忽略因为它看起来像一条标准的 HTML 注释。第二条示例里的标记将会让 IE 5 至 7 读取其内的 CSS 样式。通过对这种标记的不同的使用你也可以挑出 IE 6, IE 5 或者比指定版本更新（大）或更旧（小）版本的 IE。

这里解释一下标准 HTML 注释：标准 HTML 注释：
　　注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
　　使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。

3、CSS hack

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。browserhacks 查 Hack 的写法网站。

（1）属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
示列：
background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */
（2）选择器前缀法(即选择器Hack)。
示例：
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效
（3）IE条件注释法(即HTML条件注释Hack)：上文已谈到条件注释，此处不再赘述。

4、常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10

五、一些和兼容相关的开发利器

1、html5shiv.js：
HTML5 Shiv支持在旧版Internet Explorer中使用HTML5细分元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5样式。
2、respond.js：
此脚本的目标是提供一个快速和轻量级（3kb缩小/ 1kb gzipped）脚本，以便
在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是Internet Explorer 8及更低版本。
3、css reset：其目的是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。不过，由于出现了更加优秀的Normalize.css，所以css reset基本上被替代了。
4、normalize.css：
Normalize.css只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
5、Modernizr：
Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
许多HTML5与CSS 3的功能已经在许多主流的浏览器中实现出来。Modernizr能够告诉开发者，浏览器是否已经实现他们想要的功能。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支持那些老旧的浏览器。
6、Postcss：
PostCSS是一个使用JS插件转换样式的工具。这些插件可以删除您的CSS，支持变量和混合，透明未来的CSS语法，内联图像等。

六、task12完

保持饥饿保持学习
注：CSS所有的属性我们都可以在这个网站去查[caniuse.com]
参考资料：
1、 http://blog.csdn.net/freshlover/article/details/12132801
2、http://blog.csdn.net/xiongzhengxiang/article/details/7999525
3、https://zh.wikipedia.org/zh-hans/%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A
4、http://www.w3school.com.cn/tags/tag_comment.asp
5、http://jerryzou.com/posts/aboutNormalizeCss/
6、https://zh.wikipedia.org/wiki/Modernizr