css_16 | CSS——CSS 拓展：① 浏览器兼容

时间 2019-11-06

标签 css 拓展浏览器兼容栏目 CSS 繁體版

原文原文链接

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

css_16
复制代码

1. 渐进加强和优雅降级分别是什么意思？
 2. 什么是 CSS Hack？在哪一个网站查看标签（属性）的浏览器兼容状况？
 3. IE六、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 如下）：能用。css

1 处理兼容问题的思路

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

渐进加强和优雅降级

1.1 渐进加强（Progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。前端

1.2 优雅降级（Graceful degradation）

一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。html5

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 ；bash
一些老的技术手段，如：条件注释（处理 IE 的方式）、 CSS Hack、JS 能力检测作一些修补。框架

1.4 条件注释

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

项目	范例	说明
!	[if !IE]	非 IE
lt	[if lt IE 5.5]	小于 IE 5.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; /*IE六、7 下它生效*/
  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; /* 仅对 IE六、7 有效 */
}
复制代码

.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！