（Ⅱ）处理浏览器兼容的工具有哪些？| CSS 拓展：① 浏览器兼容
原创：itsOli @前端一万小时
本文版权归作者所有，未经授权，请勿转载！2 常见属性的兼容情况
| 属性名 | 兼容性 |
|---|---|
| inline-block | >=IE8 |
| min-width/min-height | >=IE8 |
| ::before/::after | >=IE8 |
| div:hover | >=IE7 |
| inline-block | >=IE8 |
| background-size | >=IE9 |
| 圆角 | >=IE9 |
| 阴影 | >=IE9 |
| 动画/渐变 | >=IE10 |
（💡 caniuse.com
https://caniuse.com/
查 CSS 属性兼容）
3 常见兼容处理范例
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 仅对 IE67 有效 */
}
.target {
display: inline-block;
*display: inline;
*zoom: 1;
}
<!--[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]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->4 一些处理兼容的工具总结
4.1 条件注释
条件注释（conditional comment）是于 HTML 源码中被 IE 有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。
条件注释最初于微软的 Internet Explorer 5 浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 停止支持。
4.2 IE Hack
针对 IE 浏览器编写不同的 CSS 的让 IE 能够正常渲染的过程。
4.3 JS 能力检测
使用 JS 的语法检测浏览器支持的属性，以便展示效果。
4.4 html5shiv.js
用于解决 IE9 以下版本浏览器对 HTML5 新增标签不识别，并导致 CSS 不起作用的问题。
所以我们在使用过程中，想要让低版本的浏览器，即 IE9 以下的浏览器支持，那么这款 html5shiv.js 是一个非常好的选择！
4.5 Respond.js
Respond.js 是一个小脚本，用于为 IE6-8 以及其他不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。
4.6 CSS Reset
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，“覆盖”浏览器的 CSS 默认属性。
4.7 Normalize.css
Normalize.css 只是一个很小的 CSS 文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。
相比于传统的 CSS Reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。Normalize.css 是一个可以定制的 CSS 文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
🚀它可以：
保留有用的默认值，不同于许多 CSS Reset 的简单粗暴全部抹掉；
标准化的样式，适用范围广的元素；
纠正错误和常见的浏览器的不一致性；
一些细微的改进，提高了易用性；
使用详细的注释来解释代码。
4.8 Modernizr
Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性，然后创建一个包含检测结果的 JavaScript 对象，同时在 HTML 元素加入方便你调整 CSS 的 class 名。
（🏆❗️以下知识点我们会在“前端综合”里边专门用一篇文章来讲解，目前我们先熟悉相关概念，不必深究！）
4.9 后编译 PostCSS
它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。
插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
💡简单来说：它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将 CSS 解析成抽象语法树。
通过 PostCSS 这个平台，我们能够开发一些插件来处理 CSS。热门插件如 Autoprefixer，它可以帮我们处理兼容问题，只需正常写 CSS，Autoprefixer 可以帮我们自动生成兼容性代码。
后记： 对于浏览器兼容我们主要还是理解这个处理思路，熟悉一些范例，然后在实际写页面的过程中有选择的去复用即可。
祝好，qdywxs ♥ you！