什么是 CSS hack

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

谈一谈浏览器兼容的思路

兼容性的必要性：

产品角度(产品的用户群体，用户群体比例，效果优先还是基本功能优先)
成本角度(开发是需要时间和人力成本的，看是否有必要去做)

兼容性要做到什么程度：

让哪些浏览器去支持哪些效果

兼容性怎么去做：

根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
渐进增强和优雅降级

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

优雅降级(graceful degradation):一开始就构建完整功能，然后再针对低版本浏览器进行兼容。

*postCSS

条件注释、CSS Hack、js能力检测做一些修补。

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

1.属性前缀法(即类内部Hack)是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。例如 IE6能识别下划线"_"和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识;例如：

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

2.选择器前缀法(即选择器Hack)是针对一些页面表现不一致或者需要特殊对待的浏览器，在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有效；
3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效;例如：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
4.条件注释结合类选择器整体优化。
5.-webkit- ，针对safari，chrome浏览器的内核CSS写法；
-moz-，针对firefox浏览器的内核CSS写法；
-ms-，针对ie内核的CSS写法；
-o-，针对Opera内核的CSS写法；
6.利用Modernizr工具。可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。

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

条件注释

条件注释(conditional comment)是用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。(注：使用了条件注释的页面在IE9中可以正常工作,但在IE10中无法正常工作,IE10不再支持条件注释)
写法：

 <!--[if IE 6]
   <div class="layout">内容</div>
 <![endif]-->

注意非IE下的写法

   <!--[if !IE]><!-->
      <div class="layout"></div>
    <!--<![endif]

IE Hack

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

IEhack是针对Microsoft Internet Explorer浏览器的各个版本对CSS解析不同所进行的兼容写法。

js 能力检测
html5shiv.js

https://github.com/aFarkas/html5shiv
针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

respond.js

Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 [CSS3] Media Queries 的浏览器提供媒体查询的 min-width 和 [max-width] 特性，实现[响应式网页设计]（Responsive Web Design）。

css reset

背景：早起的浏览器支持和解析CSS的规范不同，导致渲染页面时效果不一样，引起很多兼容性问题。
按照需求，合理的对css样式进行重置。reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
注意：*{margin:0,padding:0}暴力清零css reset方式。

normalize.css

https://github.com/necolas/normalize.css/
Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。
normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。

Modernizr

https://segmentfault.com/a/1190000003820989s深入理解
Modernizr.js既能给老版本浏览器打补丁，又能保证新浏览器渐进增强的用户体验。
作用：
从实际操作来看，Modernizr默认做的事情很少，除了（在你选择的情况下）给不支持html5的标签的浏览器，如IE6，7，8追加一点由Remy Sharp开发的html5垫片脚本，使其识别<aside>、<section>等html5元素之外，它主要做的就是浏览器‘功能检测’。
因此，它知道浏览器是否支持各种html5和css3特性。
HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTML5/CSS3技术的时候，如何更好地处理不支持HTML5/CSS3特性的旧版本浏览器问题。

postCSS

https://github.com/postcss/postcss
PostCSS 可以直观的理解为：它就是一个平台
PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。可以理解为下面这个模型：

239162490-562dd5c1849a6_articlex.png
它能够为 CSS 提供额外的功能；
通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer；
我们能够使用JavaScript来开发插件（这点对前端来说很重要）