12 CSS兼容

什么是 CSS hack

简单的说，HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题，因为要写N多种兼容代码。这就是兼容性问题。

谈一谈浏览器兼容的思路

1.要不要做兼容？
对于一个网站，我们要大致了解受众人群和浏览器，要确定这个网站是效果优先还是基本功能优先，里面的有些效果是否有必要实现等等，通过这些来确定浏览器是否要做兼容。
2.做到什么程度？
兼容IE6？兼容IE7？还是都兼容？
3.选择合适的工具进行开发
根据兼容需求选择技术框架/库(jquery等)；
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr
postCSS）；
条件注释、CSS Hack、js 能力检测做一些修补。
逐渐增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

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

css hack的三种形式

• 属性前缀法
  IE6能识别 * _ IE7能识别 * “-″减号是IE6专有的hack “\9”IE6~IE10都生效 “\0” IE8/IE9/IE10都生效，是IE8/9/10的hack “\9\0” 只对IE9/IE10生效，是IE9/10的hack .box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie 6-10*/ }
• 选择器前缀法
  *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有效
• IE条件注释法
  ！ [if !IE] 非IE | [if (IE 6)|(IE 7)] IE6或者IE7 lt (less than) [if lt IE 5.5] 小于IE 5.5 lte(less than equl) [if lte IE 6] 小于等于IE6 gt (greater than) [if gt IE 5] 大于 IE5 gte (greater than equl) [if gte IE 7] 大于等于IE7

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

• 条件注释
  用于非 IE
• IE Hack
  针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
• js 能力检测
  浏览器的能力检测，检测览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
• html5shiv.js
  在使用html5的时候，有些浏览器不支持h5的一些新特性和标签，需要用这个html5shiv.js来模拟这些标签
• respond.js
  在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性，使用respond.js来兼容
• css reset
  将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。更简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
• normalize.css
  Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来
• Modernizr
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
• postCSS
  PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。

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

caniuse.com