CSS兼容

什么是 CSS hack

1.CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
2.简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
3.CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，而firefox两个都不能认识。等等

谈一谈浏览器兼容的思路

1.要不要做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）成本的角度 (有无必要做某件事)
2.做到什么程度让哪些浏览器支持哪些效果
3.如何做
4.根据兼容需求选择技术框架/库(如jquery 1.x.x)
5.根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss
6.条件注释、CSS Hack、js 能力检测做一些修补

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

参考资料
http://blog.csdn.net/freshlover/article/details/12132801

1. 条件注释

image.png

image.png

2. 属性前缀

.box{
color: red; /所有浏览器都支持/
color:red !important; ⁄* Firefox、IE7支持 ⁄
_color: blue; /ie6支持/
color: pink; /ie6、7支持/
color: yellow\9; /ie/edge 6-8/
}

3.合适的框架

4.选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*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有效

5.条件注释加工具脚本 或 单独工具脚本

1.前后加上需要的 ie版本条件注释

2.modernizr
这个工具可以检测浏览器支持或者不支持的属性，加到html class 里面，这样可以针对这个来编写css文件

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

1.条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE10+不再支持条件注释。

2.IE Hack
主要是针对ie浏览器不同版本的特性，编写适应兼容不同ie浏览器的代码方案

3.js 能力检测
检测浏览器是否支持某种特定的能力，然后给出特定的解决方案。

4.html5shiv.js
用于解决ie低版本浏览器对HTML5新增标签不识别导致CSS不起作用的脚本。
地址:https://github.com/aFarkas/html5shiv

5.respond.js
模拟css3的媒体查询，主要是解决ie低版本浏览器不支持媒体查询，解决低版本浏览器的响应式问题

6.css reset
CSS Reset用来清除所有浏览器默认样式，这样更易于保持各浏览器渲染的一致性。但

暴力清零带来如下问题：
1.*{ margin:0; padding:0; }会带来性能问题
2.使用通配符存在隐性问题
3.过渡的标签重置等于画蛇添足
4.过渡的标签重置导致语言元素失效

7.normalize.css
对normalize.css进行引用，可以让不同浏览器在渲染的时候样式更加统一，为浏览器的渲染方式提供了高度一致性。
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Normalize.css和传统Reset的区别：
1.Normalize.css 保护了有价值的默认值；
2.Normalize.css 修复了浏览器的一些bug；
3.Normalize.css 不会让你的调试工具变的杂乱；
4.Normalize.css 是模块化的；
5.Normalize.css 拥有详细的文档。
作用：
1.保护有用的浏览器默认样式而不是完全去掉它们
2.为大部分HTML元素提供一般化的样式
修复浏览器自身的bug并保证各浏览器的一致性
3.用一些小技巧优化CSS可用性
4.用注释和详细的文档来解释代码

8.Modernizr

Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。Modernizr在页面加载时快速运行来检测功能，然后创建一个保存检测结果的JavaScript对象，接着页面中的html标签上添加一系列class属性来接通你的CSS。

9.postCSS

一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。PostCSS使CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

一般在哪个网站查询属性兼容性？
http://caniuse.com/