番外篇——①浏览器兼容

本知识学习用时：2小时，总第73/10000小时

前言：什么是浏览器兼容问题？

同一份代码，有的浏览器效果正常，有的不正常。其实最主要就是对 IE 浏览器的兼容问题。可以大致分为：

A 级兼容(chrome、firefox、IE9+)：要保证在最新浏览器上完美实现设计稿；

B 级兼容(ie8)：能用且差别不大；

C 级兼容(ie7 以下)：能用。

一、处理兼容问题的思路

首先以最大程度完善设计稿为基础，再考虑兼容性，不能盲目为了兼容问题而弃用方便简洁的新方法（如 html5、css3）；当然也不能用过新的技术方法使得兼容性过于低、实用性差。

渐进增强和优雅降级：

-- 渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

-- 优雅降级 (graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

① 要不要做？

-- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）

-- 成本的角度 (有无必要做某件事)

② 做到什么程度？

-- 让哪些浏览器支持哪些效果

③ 如何做？（现阶段的前端工作，90%都不需要去管 IE8 以下的兼容问题，工作重心最主要还是集中在 JS ，对于浏览器兼容不需要花太多精力，理解相关的解决思路就好了。）

-- 根据兼容需求选择技术框架/库--用的时候留一个心眼就行：

- Bootstrap (>=ie8)

- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)

- Vue (>= ie9)

- ...

-- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

-- postCSS

-- 一些老的技术手段，如：条件注释（处理 IE 的方式）、CSS Hack、js 能力检测做一些修补

③-1 条件注释

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

⚠️使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作， IE10 不再支持条件注释。)

③-2 CSS hack

（用一些奇怪的手段达到兼容的方式！）

由于不同厂商的浏览器，比如 Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

常见hack写法：

browserhacks.com查 Hack 的写法

二、常见属性的兼容情况

caniuse.com查CSS属性兼容

三、常见兼容处理范例

①

②

③

④

四、一些处理兼容的工具总结

1. 条件注释：

条件注释 (conditional comment) 是于 HTML 源码中被IE有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。

条件注释最初于微软的 Internet Explorer 5 浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 停止支持。

2. IE Hack

针对 IE 浏览器编写不同的 CSS 的让 IE 能够正常渲染的过程。

3. js 能力检测

使用 JS 的语法检测浏览器支持的属性，以便展示效果。

4. html5shiv.js

用于解决 IE9 以下版本浏览器对 HTML5 新增标签不识别，并导致 CSS 不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即 IE9 以下的浏览器支持，那么这款 html5shiv.js 是一个非常好的选择！

5. respond.js

Respond.js 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。

6. css reset

将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，“覆盖”浏览器的 CSS 默认属性。

7. normalize.css

Normalize.css 只是一个很小的 CSS 文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。Normalize.css 是一个可以定制的 CSS 文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

它可以：

· 保留有用的默认值，不同于许多 CSS reset 的简单粗暴全部抹掉；

· 标准化的样式，适用范围广的元素；

· 纠正错误和常见的浏览器的不一致性；

· 一些细微的改进，提高了易用性；

· 使用详细的注释来解释代码。

8. Modernizr

Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

Modernizr 会在页面加载后立即检测特性，然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

9. postCSS

它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将 CSS 解析成抽象语法树，通过 PostCSS 这个平台，我们能够开发一些插件来处理 CSS。热门插件如 autoprefixer，它可以帮我们处理兼容问题，只需正常写 CSS，autoprefixer 可以帮我们自动生成兼容性代码。

后记：对于浏览器兼容我们主要还是理解这个处理思路，熟悉一些范例，然后在实际写页面的过程中有选择的去复用即可。

欢迎继续关注下文 ：

（18）番外篇——② 编码规范

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）