（Ⅰ）处理浏览器兼容问题的思路是怎样的？| CSS 拓展：① 浏览器兼容
原创：itsOli @前端一万小时
本文版权归作者所有，未经授权，请勿转载！
1. 渐进增强和优雅降级分别是什么意思？
2. 什么是 CSS Hack？在哪个网站查看标签（属性）的浏览器兼容情况？
3. IE6、7 的 Hack 写法是？
4. 尽可能多的列举浏览器兼容的处理范例？
5. CSS Reset 是什么？CSS 预编译器是什么？后编译器（PostCSS）是什么？
6. CSS Reset 和 Normalize.css 有什么区别？
7. 尽可能多的写出浏览器兼容性问题？
8. 如何让 Chrome 浏览器显示小于 12px 的文字？
9. CSS 预处理器的比较：Less、Sass？
10. 常见兼容性问题？
🙋上方面试题“参考答案详解”，请点击文末“阅读原文”查看！
前言： 什么是浏览器兼容问题？同一份代码，有的浏览器效果正常，有的不正常。
其实最主要就是对 IE 浏览器的兼容问题，可以大致分为：
A 级兼容（Chrome、Firefox、IE9+）：要保证在最新浏览器上完美实现设计稿；
B 级兼容（IE8）：能用且差别不大；
C 级兼容（IE7 以下）：能用。
1 处理兼容问题的思路
首先以最大程度完善设计稿为基础，再考虑兼容性，不能盲目为了兼容问题而弃用方便简洁的新方法（如 HTML5、CSS3）；当然也不能用过新的技术方法使得兼容性过于低、实用性差。
渐进增强和优雅降级
1.1 渐进增强（Progressive enhancement）
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
1.2 优雅降级（Graceful degradation）
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
1.3 区别
优雅降级是从复杂的现状开始，并试图减少用户体验的供给；而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
1.3.1 要不要做
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度（有无必要做某件事）
1.3.2 做到什么程度
让哪些浏览器支持哪些效果。
1.3.3 如何做
（现阶段的前端工作，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.4 条件注释
条件注释（conditional comment）是 HTML 源码中被 IE 有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。
| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [if !IE] | 非 IE |
| lt | [if lt IE 5.5] | 小于 IE5.5 |
| lte | [if lte IE 6] | 小于等于 IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于 IE7 |
| \ | [if (IE 6)(IE 7)] | IE6 或者 IE7 |
例：
<!--[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]-->
❗️使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作， IE10 不再支持条件注释。
1.5 CSS Hack
（用一些奇怪的手段达到兼容的方式！）
由于不同厂商的浏览器，比如 Internet Explorer、Safari、Mozilla Firefox、Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
常见 Hack 写法：
（💡 browserhacks.com
http://browserhacks.com/
查 Hack 的写法）
.box {
color: red;
_color: blue; /* IE6 下它生效 */
*color: pink; /* IE67 下它生效 */
color: yellow\9; /* IE/Edge 6-8 下它生效 */
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
下一篇我们继续讲解“浏览器兼容”相关的知识点。
祝好，qdywxs ♥ you！