CSS兼容处理

兼容处理

不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅降级, 渐进增强) 和两种 技巧(前缀兼容与HACK兼容)

1. 邀请用户升级浏览器

这种方式目前比较普遍 , 在用户通过老版浏览器登录网站的时候 通过服务判断用户 浏览器版本内核 从而返回升级页面. 省时省力 但是对用户不够友好

2. meta强制解析模式

x-ua-compatible 用来指定IE浏览器解析编译页面的model
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

使用一行代码来指定浏览器使用特定的文档模式。

<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="x-ua-compatible" content="IE=8" >
<meta http-equiv="x-ua-compatible" content="IE=7" >
2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式：
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。
3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
**目前最实用的最新写法为**

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
X-UA-Compatible定义浏览器的渲染方式；
如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，但前提是客户端安装了Chrome Frame
使用IE内核浏览器来访问，会渲染至该浏览器的最高版本，比如你使用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子（当然IE7浏览器是不会渲染成IE9的,不然想想都好美丽）。

※ 对多核浏览器(360 搜狗)等进行强制指定渲染内核 http://se.360.cn/v6/help/meta.html

<meta name="renderer" content="webkit|ie-comp|ie-stand">
//content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。 

//若页面需默认用极速核，增加标签
<meta name="renderer" content="webkit"> 
//若页面需默认用ie兼容内核，增加标签：
<meta name="renderer" content="ie-comp"> 
// 若页面需默认用ie标准内核，增加标签：
<meta name="renderer" content="ie-stand">

3. 兼容前缀

不同浏览器因为内核不同,针对同一条css属性的兼容支持程度也不同,我们可以通过加 兼容前缀的方式 让一些标准样式在浏览器内可以使用。

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

使用方式：

如果css样式在主流浏览器中需要加兼容前缀才能生效, 就先写兼容写法 最后写标准写法。

.selector {
  	-moz-box-shadow:2px 2px 5px #969696; /*firefox*/
	-webkit-box-shadow:2px 2px 5px #969696; /*webkit*/
	box-shadow:2px 2px 5px #969696; /*opera或ie9*/
}

关于chrome浏览器内核小知识:

chrome的内核确切的bai说是Chromium引擎，它是使用苹果公司的WebKit作为浏览器内核du原型，是WebKit内核的zhi一个分支。

Chromium引擎虽然是属于WebKit的分支，却把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。因此Chromium引擎和其它基于WebKit的引擎所渲染页面的效果也是有出入的。基于以上原因，有的地方会把Chromium引擎跟WebKit区分开来，有的地方则直接把Chromium引擎归为WebKit都是可以的。

关于国内浏览器内核小知识:

国内浏览器内核基本为webkit内核或 chrominm引擎内核 拼接 Edge 或 IE内核形成 , 比如360浏览器就有内核切换模式, 针对css属性规则上都直接沿用了webkit内核规则, 所以国内开发以chrome为开发浏览器也是考虑这层原因。

4. 兼容查询

学会利用工具网站 查询样式在各个浏览器的兼容情况，从而选择更合适的方案。

工具网站

地址： https://www.caniuse.com/

使用方法：

1. 在输入框输入需要查询兼容性的 样式属性

2. 查看下方浏览器兼容表

表头为不同的浏览器品牌 主要查看 IE Edge firefox chrome safari opera这几个主流浏览器的兼容情况
倒数第二行是当前用户主流浏览器版本，以黑色背景包裹。为主要兼容参考

一般我们只看倒数三行的兼容情况

红色标签代表 完全不兼容

绿色标签代表 完全兼容

黄色标签代表 兼容但需要加 兼容方案

兼容方案：鼠标移入黄色版本的标签会提示兼容方案

鼠标移入 绿色标签 (左上角有黄色图标) 时会提示添加对应的兼容前缀

随着发展 css的兼容性会越来越好 目前绝大部分css属性都是主流浏览器全兼容, CSS3样式大部分兼容IE8以上大部分浏览器。

5. HACK 兼容

hack兼容方式主要应对老版本IE浏览器(IE6 IE7 IE8 IE9) 进行单独样式处理

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

　　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。　　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等　　

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等　　

HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><[endif]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。这里进行简单举例 资料后配一份hack常见兼容处理方案(虽然对于当前开发环境来说基本用不上).

条件注释法:

注释标识
	hello只在IE浏览器显示
	hello只在IE6浏览器显示
	hello只在IE6以上(包括)版本IE浏览器显示
	hello只在IE8上显示
	hello在IE浏览器上不显示

属性前缀法:

hack	写法	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	Y	Y	N	N	N	N	N	N	N	N
_	_color	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	N	N	Y	N	Y	N	Y	N	Y	Y

说明：在标准模式中

• “-″减号是IE6专有的hack
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

.selector {
	 background-color:red; /* 所有浏览器 */  
    background-color:blue !important;/* 除了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; /* 只有IE6生效 */  
    *+background-color:pink; /*  只有IE7生效 具体小版本有差别 */  
}

选择器前缀法:

*html *前缀只对IE6生效*

+html *+前缀只对IE7生效     

@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有效等等

6. 优雅降级和渐进增强（取决于需求）

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

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

农村包围城市的味道
先说一个简单的例子，例如先完成了页面的基本布局，没有任何特效，那么加个小动画，加个文字阴影等，就是渐进增强了

优雅降级 graceful degradation：

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

类似蹦极，由高处往低处下落

让一部分人先富起来带动另一部分人富起来的感觉

区别：渐进增强是向上兼容，优雅降级是向下兼容。

建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器（主要指window7系统的浏览器），转而支持 edge（window10以上系统）这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。