Web前端知识（二）——浏览器兼容

什么是 CSS hack？

      CSS hack是通过在CSS&nbsp中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
——百度百科

CSS Hack常见的有三种形式：
1、属性级Hack：
　　比如IE6能识别下划线“”和星号“*”，IE7能识别星号“*”，但不能识别下划线” ”，而firefox两个都不能认识。
2、选择符级Hack：
　　比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：
　　IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
　　PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

浏览器兼容的思路

1. 要不要做
   从产品的角度出发：考虑产品的受众以及受众的浏览器比例，效果优先还是基本功能优先。
   从成本的角度考虑，是否需要添加这个效果以及是否需要兼容这一类的浏览器。
2. 做到什么程度
   让哪些浏览器支持哪些效果，比如是否让IE7浏览器支持圆角或者阴影，还是只针对IE9以上的用户才提供阴影效果。
3. 如何做
   根据兼容需求选择技术框架
   根据兼容需求选择兼容工具
   使用条件注释、CSS Hack、js能力做一些修补
   一般有两种思路：
   渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，再针对高级浏览器进行效果、交互等方面的改进和追加功能达到更好的用户体验。
   优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。

5种以上浏览器兼容的写法

*，ie6,ie7可以识别；
_和- ， ie6可以识别；
!important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法

以下工具名词的意思

条件注释：

条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 Internet Explorer 10 中以标准模式处理页面 - 如 HTML5 - 时停止支持，但是旧版网页使用这种技术（于兼容性视图）将继续有效。JScript 条件注释于 Internet Explorer 4 中被引进，而在 Internet Explorer 10 中继续受支持，无论于标准模式或者兼容性模式之中，但在 Windows 应用商店应用程序中不受支持。

IE Hack：

SS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：
　　比如IE6能识别下划线””和星号” * “，IE7能识别星号” * “，但不能识别下划线””，而firefox两个都不能认识。
2、选择符级Hack：
　　比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：
　　IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：

js 能力检测：

我们知道，各个版本的浏览器有着许多不一致性。理想状态下，应该是所有的浏览器都提供一套标准的API接口。但是现实中，各个版本的浏览器存在的怪癖非常多，我们通常都是使用客户端检测来作为补救措施。但是我们应该知道，不到万不得已，不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。总之。先设计最通用的方案，在使用特定于浏览器的技术增强该方案。
最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。

//特性检测
if (object.propertyInQuestion) {
//使用object.propertyInQuestion
}

html5shiv.js

用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

respond.js

Respond.js是一个快速、轻量的脚本（3kb minified / 1kb gzipped），它的目标是使得那些不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计，尤其是小于等于8的ie浏览器。它是用这样的方式，尽可能的修补那些不支持的浏览器来支持（很快将会有更多的信息）

css reset

reset，重置。css reset就是重置样式。
众所周知，现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一，所以我们偶尔会发现，某个页面在chrome浏览器上很正常，到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的，而reset.css就是解决默认样式不兼容问题的办法之一。
CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准一般认为就是“清零”，但是我们真的需要对这么多标签进行设置吗？显然不是。这样虽然全面，却没有考虑到代码的冗余，毕竟不是每一个项目都需要重置怎么多的标签。所以最好不要想也不想，把全面的reset复制粘贴到自己的style目录下，应该仔仔细细选择一翻，留下有用的，没用的和不必要的就不要让它们白白增加css的大小了。

normalize.css

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。
作用：
* 保护有用的浏览器默认样式而不是完全去掉它们
* 一般化的样式：为大部分HTML元素提供
* 修复浏览器自身的bug并保证各浏览器的一致性
* 优化CSS可用性：用一些小技巧
* 解释代码：用注释和详细的文档来
Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Modernizr

Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
Modernizr会自动运行。不需要调用modernizr_init()之类的函数。运行时会创建一个名为Modernizr的组件，里面包含了一组测试结果是否支持的布尔值。举例来说，如果浏览器支持Canvas API，Modernizr.canvas属性的值就会是true；如果浏览器不支持Canvas API，Modernizr.canvas属性的值就会是false：

postCSS

用到“PostCSS”这个词汇我们也许指的是以下两种说法的一种：
1. 存在 PostCSS 的情况下，那么就是指工具本身——当你运行指令 npm install postcss 时你将获得的结果。
2. 工具强化后的 PostCSS 插件系统。
简单点讲，PostCSS是CSS的处理器。如果你以前使用过CSS的预处理器的话，比如Sass、LESS或者说Stylus。这几个是使用预编码来处理CSS，然后编译成线上需要使用的CSS。而PostCSS刚好相反，他是处理你写好的CSS，让你的CSS更健康。

一般在哪个网站查询属性兼容性？

查询哪些浏览器支持哪些css属性：http://caniuse.com/

参考：
https://www.w3cschool.cn/css3/question-10231625.html
https://zh.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A
https://www.zhihu.com/question/46312839