什么是 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 的插件可以实现预处理器的功能；它们还可以优化并且自动给代码添加各种前缀；它们可以添加未来语法的支持，还可以提示代码检查的功能，它们可以处理变量和代码逻辑，可以提供完整的网格系统；还可以提供代码缩写... ... 等各种各样的操作。
