10. 浏览器兼容

CSS hack

由于不同厂商的流览器或某浏览器的不同版本对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

浏览器兼容的思路

• 要不要做
• 产品的角度（产品受众、受众的浏览器比例，效果优先还是基本功能优先等）
• 成本的角度（有无必要去实现某个需求）
• 做到什么程度
  ——让浏览器支持哪些效果
• 该怎么做
• 根据兼容需求选择技术框架/库（jQuery）
• 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
• post CSS（自动根据浏览器加前缀）
• 条件注释、CSS Hack、JS能力检测 做一些修补

渐进增强和优雅降级

• 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

浏览器兼容的写法

• 合适的框架

框架	支持版本
Bootstrap	≥ IE8
jQuery 1._	≥IE6
jQuery 2._	≥IE9
Vue	≥IE9

• 条件注释
  条件注释（conditional comment）是于HTML源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。
  使用了条件注释的页面在IE9中可正常工作，但在IE10中就不行了。IE10不再支持条件注释。

项目	支持版本	说明
!	[if !IE]	非IE
lt	[if lt IE5.5]	（less than）小于IE5.5
lte	[if lte IE6]	（less than or equal）小于等于IE6
gt	[if gt IE5]	（great than）大于IE5
gte	[if gte IE7	（great than or equal）大于等于IE7
竖线	[if (IE6)竖线(IE7)]	IE6或IE7

PS：“非IE”的注释比较特殊一些

<!-- [if !IE]><!-- >_____________<!-- <![end if]-->

• 属性前缀（即内部Hack）
  IE6能识别 _ 和 *
  IE7能识别 *
  IE6~IE10都能认 " \q "
  但是以上，FireFox都不认识。

• 选择器前缀
  比如IE6能识别html .class{ }，IE7能识别+html .class{ }或者 *:first-child+html .class{ }。

• 合适的工具

• html5shiv.js

• respond.js

• css reset

• normalize.css

• Modernizr

一些常见的属性和写法

• 常见写法

.box {
  color: red;
  _color: blue; /* IE6 */
  *color: pink; /* IE6、7 */
  color: yellow\9; /* IE/Edge 6-8 */
}

  <!-- [if IE7] >
  <link rel="stylesheet" href="IE7.css" type="text/css" />
  <!-- [end if] -->

• 常见属性

属性	兼容情况
inline-block	≥IE8
min-width / min-height	≥IE8
:before / :after	≥IE8
div:hover	≥IE7
background-size	≥IE9
圆角	≥IE9
阴影	≥IE9
动画 / 渐变	IE10

名词（工具）解释

• 条件注释
  这是基于HTML源码中被IE(IE≥9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
• IE Hack
  针对IE浏览器编写不同的CSS（属性前缀法、选择器前缀法、IE条件注释法）使得页面效果在不同版本的IE浏览器中达到效果一致。
• js 能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。
• 优先检测达到目的最常用的特性
• 检测实际用到的属性
• html5shiv.js
  针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签的效果并使相应的CSS生效。
• respond.js
  让 IE6-8 也能实现 CSS3 中的 Media Query（媒体查询）功能，实现响应式设计。
• CSS Reset
• CSS Reset 简单地说就是重置浏览器的 CSS 默认属性。
• 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如 标签，在 IE 浏览器、Firefox 浏览器以及 Safari 浏览器中的样式都是不同的，所以，通过重置 button 标签的 CSS 属性，然后再将它统一定义，就可以产生相同的显示效果。
• CSS Reset 内容方法不同，但功能大同小异，都是起到重置的作用，所以说 CSS Reset 是根据个人需求不同可以按需自定义的
• Normalize.css
  一个很小的CSS文件，让不同浏览器在渲染浏览器时形式更加统一，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。是一种CSS reset的替代方案。
• 保护有用的浏览器默认样式：而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug：并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：注释和详细的文档
• Modernizr
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• PostCSS
  PostCSS是一个使用 JavaScript 插件来转换CSS的工具，通过PostCSS这个平台，我们自己也能够开发一些插件，来处理CSS。

相关查询

浏览器市场份额
查询CSS属性兼容
查询Hack的写法