任务12 浏览器兼容

1、什么是 CSS hack

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

2、谈一谈浏览器兼容的思路

第一、产品的受众，及受众使用的各浏览器的比例，效果优先还是基本功能优先。
第二、成本的考虑，投入产出比。
第三、兼容哪些浏览器，兼容到什么版本，让哪些浏览器支持哪些效果。
第四、渐进增强和优雅降级的选择
第五、根据兼容需求选择技术框架，比如：
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
第六、根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
第七、条件注释、CSS Hack、js 能力检测做一些修补。

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

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

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

• 条件注释
  IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
  条件注释只能用于IE5以上。
  如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
  条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
  IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
  条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。

写法：

用于非 IE

• IE Hack
  CSS Hack大致有3种表现形式， CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
• js 能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
• html5shiv.js
  用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
  由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。

原理：利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。使用：考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可

• respond.js
  让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
• css reset
  将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
• normalize.css
  normalize.css 是一个可定制的CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的CSS重置样式集。
• Modernizr
  Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  工作原理
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• postCSS
  PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。
  PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
  PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

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

can i ues http://caniuse.com/