浏览器兼容
什么是浏览器兼容
- 同一份代码，有的浏览器效果正常，有的不正常
- 不正常的原因是什么？（不支持？bug？）
- 如何让它展示正常？（条件注释？单独Hack？）
为什么会有浏览器兼容问题
- 同一产品，版本越老，bug越多
- 同一产品，版本越新，功能越多
- 不同产品，不同标准，不同实现方式
通过网站查询属性兼容性
处理浏览器兼容问题的思路
- 要不要做
- 产品的角度
- 产品的受众，比如是面向年轻群体，还是面向政府或单位部门
- 受众的浏览器比例
- 效果优先还是基本功能优先
- 实现难度和成本考虑，比较一下投入产出比
- 做到什么程度
- 综合考量需要做到什么浏览器什么版本的兼容，比如兼容到IE7 还是IE6
- 怎么做？
渐进增强和优雅降级
- 渐进增强（progressive enhancement）：针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
- stackoverflow - 渐进增强和优雅降级的区别
处理兼容问题的手段
合适的框架
- Bootstrap(>=IE8)
- JQuery 1.~(>=IE6) JQuery 2.~(>=IE9)
- Vue(>=IE9)
- ...
CSS hack
- 由于不同厂商的浏览器，比如Internet Explorer，Safari，Mozilla Firefox，Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
- 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
- CSS Hack 大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法（即类内部Hack）：例如 IE6能识别下划线
_ 和星号 *，IE7能识别星号 *，但不能识别下划线 _，IE6~IE10都认识 \9，但firefox前述三个都不能认识
- 选择器前缀法（即选择器Hack）
- IE条件注释法（即HTML条件注释Hack）：针对所有IE（注：IE10+已经不再支持条件注释）：
，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
CSS 属性前缀法
.hack{
/*demo1 */
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color: red; /* All browsers */
background-color: blue !important;/* All browsers but IE6 */
*background-color: black; /* IE6, IE7 */
+background-color: yellow;/* IE6, IE7*/
background-color: gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color: purple\0; /* IE8, IE9, IE10 */
background-color: orange\9\0;/*IE9, IE10*/
_background-color: green; /* Only works in IE6 */
*+background-color: pink; /* WARNING: Only works in IE7 ? Is it right? */
}
.hacktest{
background-color: blue; /* 都识别，此处针对firefox */
background-color: red\9; /*all ie*/
background-color: yellow\0; /*for IE8/IE9/10 最新版opera也认识*/
+background-color: pink; /*for ie6/7*/
_background-color: orange; /*for ie6*/
}
浏览器私有前缀添加
-webkit-border-radius: 50%; // chrome
-o-border-radius: 50%; // opera
-moz-border-radius: 50%; // FixFore
-ms-border-radius: 50%; // IE edge
选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
IE条件注释法
- 条件注释（conditional comment）：利用IE6～9的漏洞（可识别特定特定注释）来区分IE各版本，或区分IE和非IE的一种css hack技术。
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
| 项目 |
范例 |
说明 |
| ! |
[if !IE] |
非IE |
| lt（less than） |
[if lt IE 5.5] |
小于IE5.5 |
| lte（less than or equal to） |
[if lte IE 6] |
小于等于IE6 |
| gt（greater than） |
[if gt IE 5] |
大于IE5 |
| gte（greater than or equal to） |
[if gte IE 7] |
大于等于IE7 |
| 竖线（简书容易误识别，所以用文字代替） |
[if(IE 6)竖线(IE 7)] |
IE6或者IE7 |
常见属性的兼容情况
inline-block: >=IE8
min-width/min-height: >=IE8
:before, :after: >=IE8
div:hover: >=IE7
background-size: >=IE9
圆角 >=IE9
阴影 >=IE9
动画／渐变 >=IE10
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 仅对ie6、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]-->
js 能力检测
- 也称特性检测，使用JS的语法检测浏览器支持的属性和方法。
- 能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案
- 基本默认如下：
//特性检测
if (object.propertyInQuestion) {
//使用object.propertyInQuestion
}
处理兼容问题的工具
html5shiv.js
respond.js
CSS reset
normalize.css
- normalize.css
- 作用：兼容性工具。尽量保留浏览器的默认样式，不进行太多的重置，在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案
- Normalize.css 做了哪些事？
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来
Modernizr（处理浏览器兼容问题）
- Modernizr
- Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。该工具会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式。使用时可直接引入CDN链接即可。
- 参考：前端的瑞士军刀Modernizr.js
postCSS
- postCSS
- 它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如 autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer 可以帮我们自动生成兼容性代码
- 参考：PostCSS简介
如何调试老掉牙的 IE
