（16）CSS 拓展：① 浏览器兼容

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

❗️❗️❗️
以下链接为本文最新勘误篇章——《CSS 拓展：① 浏览器兼容》

 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 查 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]–->

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 查 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 可以帮我们自动生成兼容性代码。

💡与 PostCSS 相关的知识点：“CSS 预编译器”——预编译器的作用是增强了 CSS 语法，让我们可以在 CSS 中使用变量、循环、嵌套等功能，主要代表是 Less、Sass、Stylus，它们本质上就是一种编译器。

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

祝好，qdywxs ♥ you！

今天的文章（16）CSS 拓展：① 浏览器兼容 | CSS分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/20442.html

（16）CSS 拓展：① 浏览器兼容 | CSS