浏览器兼容

什么是 CSS hack

CSS hack就是使你的CSS代码兼容不同的浏览器。
CSS hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。
CSS hack主要针对类内部Hack

谈一谈浏览器兼容的思路

1. 针对目标客户群体考虑，要不要实现浏览器兼容。比如是面向年轻群体，还是面向政府或单位部门。
2. 实现难度和成本考虑，比较一下投入产出比。
3. 综合考量需要做到什么浏览器什么版本的兼容，比如兼容到IE7 还是IE6
4. 根据兼容需求选用框架
   例如
   Bootstrap (>=ie8)
   jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
   Vue (>= ie9)
5. 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
   postCSS。
6. 利用条件注释、CSS Hack、js 能力检测做一些修补。

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

条件注释法
    
    
    
    
    

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

条件注释结合html5shiv.js和respond.js工具
 

Modernizr工具

浏览器兼容写法
transition: transform 1s;
-moz-transition: transform 1s; /* Firefox 4 */
-webkit-transition: transform 1s; /* Safari 和 Chrome */
-o-transition: transform 1s; /* Opera */

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

条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE Hack
为了兼容IE系列浏览器的CSS hack。
js 能力检测
使用JS检测浏览器是否支持特定的功能来确定解决方案
html5shiv.js
使用html5的时候，有些浏览器不支持h5的一些新特性和标签，需要用这个html5shiv.js来模拟这些标签
respond.js
Respond.js 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。
css reset
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。是温柔版的css reset。它的特性：

• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来

Modernizr
Modernizr是一个JavaScript库，用来检测浏览器是否支持HTML5和CSS3特性，在根元素添加相应类名来实现浏览器兼容。
postCSS
是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。ostCSS 的插件可以实现预处理器的功能；它们还可以优化并且自动给代码添加各种前缀；它们可以添加未来语法的支持，还可以提示代码检查的功能，它们可以处理变量和代码逻辑，可以提供完整的网格系统；还可以提供代码缩写... ... 等各种各样的操作。

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

CSS兼容查询