浏览器兼容

什么是 CSS hack

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

谈一谈浏览器兼容的思路

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

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

条件注释法
    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

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

条件注释结合html5shiv.js和respond.js工具
 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

Modernizr工具
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history 
        draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
        no-borderimage borderradius boxshadow no-textshadow opacity 
        no-cssanimations no-csscolumns no-cssgradients no-cssreflections
        csstransforms no-csstransforms3d no-csstransitions fontface 
        generatedcontent video audio localstorage sessionstorage 
        no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

浏览器兼容写法
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兼容查询

浏览器兼容