浏览器兼容

什么是 CSS hack

不同厂商的浏览器,比如IE,Safari,Mozilla Firefox,Chrome等,或是同一厂商浏览器的不同版本,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果;于是我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的结果;简单来说,就是利用不同浏览器对相同css识别不同这个bug,在css中加入兼容各个浏览器的css写法;
CSS hack大致有三种表现形式: CSS属性前缀法,选择器前缀法,IE条件注释法

谈一谈浏览器兼容的思路

• 判断是否需要做浏览器兼容,分别从产品的角度(受众,受众的浏览器比例,效果优先还是功能优先等)与成本的角度进行判断
• 确定兼容的范围,比如需要浏览器支持哪些效果,选择渐进增强或是优雅降级;
• 确定兼容的方法: 1. 根据兼容需求选择技术框架/库(jQuery); 2. 根据兼容需求选择兼容工具(html5shiv.js, respond.js, css reset, nomarlize.css, modernizr); 3. 使用postcss; 4. 使用条件注释, CSS hack, js能力检测做一些修补
  一般来说优雅降级与渐进 增强的原则是: 如果比较难兼容的,就保持渐进增强原则,先维持正常的可用功能的实习,再针对其他浏览器兼容做更绚丽的改动;如果是比较容易的兼容,保持优雅降级原则

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

1. 条件注释法

2. 合适的框架

• Bootstrap(≥IE8）
• jQuery 版本1≥IE6，版本2≥IE9
• Vue ≥IE9

3. css属性前缀法(类内部hack)

.box{
  color: red;
  -color : bule; /*IE6识别*/
  *color: pink; /*IE67识别*/
  color: yellow\9; /*IE6~10/edge6~8*/
}

4. 选择器前缀法不常用

.target{
  display: inline-block;
  *display: inline; 
  *zoom: 1;
}

6. Modernizr
   运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”.可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。

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

• 条件注释: 是于HTML源码中被IE有条件解释的语句;条件注释可被用来向IE提供及隐藏代码;条件注释IE10以上版本不支持
• IE Hack: 针对IE浏览器编写不同的CSS能让IE正常渲染的过程
• js 能力检测: 能力检测的目标不是特定的浏览器,而是检测浏览器的能力;这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案;这一部分检测是解决浏览器兼容问题的主要检测
• html5shiv.js: 用于解决IE9以下版本浏览器对新增的HTML5标签不识别,并导致CSS不起作用的问题;所提我们在使用过程中,想要让低版本的浏览器(IE9以下版本)支持,HTML5shiv.js是很好的选择
• respond.js: 一个小脚本,用于为IE6~8以及其他不支持CSS3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性,实现响应式网页设计
• css reset: 将浏览器默认样式全部去掉;通过重新定义标签样式,"覆盖"浏览器的CSS默认样式
• normalize.css: 一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一.它可以保留有用的默认值,不同于CSSreset的简单粗暴;标准化的样式,适用范围广的元素;纠正错误和常见浏览器的不一致性;一些细微的改进,提高了易用性;使用详细的注释解释代码
• Modernizr: 可以方便点的为各种情况编写JS和CSS,无论浏览器是否支持这些特性,这是处理渐进增强的完美方案;modernizr会在页面加载后立即检测特性,然后创建一个包含检测结果的JS对象,同事在HTML元素加入方便调整CSS的class名
• postCSS: 可以理解为一个平台,可以让一些插件在上面跑,他提供了一个解析器,可以让CSS解析成抽象语法树,通过postCSS,我们能够开发一些插件,来处理CSS;r热门插件如autoprefixer,可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我们自动生成兼容代码

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

caniuse.com