学习...永无止尽..

诸多思考..

CSS hack 谈一谈浏览器兼容的思路列举5种以上浏览器兼容的写法以下工具/名词是做什么的条件注释 IE Hack js 能力检测 html5shiv.js respond.js css reset normalize.css Modernizr postCSS 一般在哪个网站查询属性兼容性？

CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，开发者为了能在其他不同的浏览器或不同版本中获得统一的页面效果，就需要有针对性写特定的CSS样式，这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

谈一谈浏览器兼容的思路（老板要求除外）

要不要做：产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事) -产品的角度。用户是谁。用户主要用啥浏览器，我们的网站是哪中类型的产品... 如果客户是政府部门...那么就需要考虑都考虑到兼容都ie6，稳定性、功能使用实现比效果特效炫酷更重要，不用去考虑什么先进框架如果受众是集中在很年轻的范围内。电商、直播平台、网站等，那么网站效果，体验很重要，这时需要考虑兼容到IE几？如果IE6，那么效果就很难实现，或成本大。
要做到什么程度: 让哪些浏览器支持哪些效果,根据浏览器的支持情况去做，再此基础上，后面再看能否在不动根本上尝试覆盖更僻的浏览器或版本（ie等）
如何做：根据兼容需求选择技术框架/库(jquery) 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr) postCSS 条件注释、CSS Hack、js 能力检测做一些修补

浏览器兼容的写法

条件注释

<!--[if IE 6]> <p>You are using Internet Explorer 6.</p> 
<![endif]-->         //在IE6下出现p标签
<!--[if !IE]><!-->  //在IE下不显示，在非IE下弹出1；
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>  在IE6下引入css文件
<link href="ie8only.css" rel="stylesheet"> 
<![endif]-->

属性前缀

.box{ 
color: red; 
_color: blue; /*ie6*/
*color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

清浮动

.clearfix:after{
content: "";
display: block;
clear: both:
}
.clearfix{
*zoom: 1;   触发BFC，针对IE6，7
}

inline-block

.target{
display: inline-block;
*display: inline;
*zoom: 1;
}

利用html5shiv、respond

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

工具/名词

条件注释 条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。条件注释只能用于IE5以上，和IE10以下。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。 IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
IE Hack
1. 针对IE浏览器编写不同的CSS让IE能够正常渲染。
2. 使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法。
3. CSS属性前缀法：比如IE6能识别下划线和星号，IE7能识别星号 ，但不能识别下划线，而firefox两个都不能认识。
4. 选择器前缀法：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
5. HTML头部引用(if IE)Hack：针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
6. 书写顺序：一般是将识别能力强的浏览器的CSS写在前面。浏览器优先级别：FF < IE7 < IE6，CSS hack书写顺序一般为FF IE7 IE6。
js 能力检测

浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

html5shiv.js

用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

respond.js 提供一个小脚本，以便在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是ie8及更低版本。
css reset
1. 重置浏览器默认样式。
2. HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。
normalize.css
1. normalize.css是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
2. 标准化的样式，适用范围广的元素。
3. 纠正错误和常见的浏览器的不一致性。
4. 一些细微的改进，提高了易用性。
5. 使用详细的注释来解释代码。
Modernizr
1. Modernizr是一个检测用户浏览器是否具备HTML5和CSS3能力的JavaScript库。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
2. Modernizr在页面加载时快速运行来检测功能；之后它会创建一个保存检测结果的JavaScript对象，然后为你页面中的html标签上添加一系列class属性来接通你的CSS。
3. Modernizr支持大量的测试和可选地包括YepNope.js来视情况加载外部的js和css资源。
postCSS
1. PostCSS是一个JS插件转换CSS样式的工具。PostCSS使CSS变成JavaScript的数据，使它变成可操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

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

传送门： Can I Use ???

HuangHongRui / Notebook