主流浏览器Hack写法 解决浏览器兼容问题

[ 博客 ]
主流浏览器Hack写法 解决浏览器兼容问题

此处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。

有关于hack的使用方法和种类,互联系网上成千上万,比较典型的介绍有:

  1. Browser CSS Hacks
  2. Moving IE specific CSS into @media blocks
  3. Detecting browsers javascript hacks
  4. Browser Specific Hacks
  5. Browser-Specific CSS Hacks
  6. CSS hacks

大家平时看得多的应该是IE浏览器的hack写法比较多,但对于现代浏览器,比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见,甚至有的不知道怎么写。如果您是属于后者,根本不知道各浏览器下具有哪些hack手段,不要着急。因为Hugo GiraudelTim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。当然也要非常感谢Paul IrishNicolas Gallagher所做的补充与说明。为了国内前端开发者更好的查阅,我将Browserhacks.com上有关于各种浏览器的hack写法搬移到w3cplus上,以供大家翻阅与查找。

一、Chrome浏览器

选择器Hack

/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {
  代码放在这里
}	

媒体查询Hacks

/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  代码放在这里	
}	

JavaScript Hack

/* Chrome */
var isChrome = Boolean(window.chrome);	

二、Firefox浏览器

属性选择器Hack

/* Firefox 1.5 */
body:empty .selector {
 样式代码放这里
}
/* Firefox 2+ */
.selector, x:-moz-any-link {
 样式代码放这里	
}
/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {
 样式代码放这里	
}
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {
 样式代码放这里	
}	

媒体查询Hack

/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}
/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {
 样式代码放这里		
}
/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio:0) {
 样式代码放这里		
}	

JavaScript Hack

/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage);

/* Firefox 2/3 */
var isFF = /a/[-1]=='a';

/* Firefox 3 */
var isFF = (function x(){})[-5]=='x';	

混合型Hack

/* Firefox 3+ */
@-moz-document url-prefix() {
 样式代码放这里		
}	

三、Opera浏览器

属性选择器Hack

/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=""] .selector {
 样式代码放这里	
}

/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {
 样式代码放这里	
}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {
 样式代码放这里	
}	

媒体查询Hack

/* Opera 7 */
@media all and (min-width: 0px){
 样式代码放这里		
}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 样式代码放这里		
}

/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* Opera, IE 8/9/10 */
@media screen {
 样式代码放这里		
}	

JavaScript Hack

/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);

/* Opera 12- */
var isOpera = Boolean(window.opera);	

四、Safari浏览器

属性选择器Hack

/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {
 样式代码放这里		
} 
html[xmlns*=""]:root .selector  {
 样式代码放这里		
}

/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {
 样式代码放这里		
}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {
 样式代码放这里		
}	

媒体查询Hack

/* Safari */
var isSafari = /a/.__proto__=='//';	

五、IE浏览器

选择器Hack

/* IE 6 and below */
* html .selector  {
 样式代码放这里		
} 
.suckyie6.selector {
 样式代码放这里		
} /* .suckyie6 can be any unused class */

/* IE 7 and below */
.selector, {
 样式代码放这里		
}

/* IE 7 */
*:first-child+html .selector {
  样式代码放这里	
} 
.selector, x:-IE7 {
 样式代码放这里		
} 
*+html .selector {
 样式代码放这里		
} 

/* Everything but IE 6 */
html > body .selector {
 样式代码放这里		
}

/* Everything but IE 6/7 */
html > /**/ body .selector {
  样式代码放这里	
}
head ~ /* */ body .selector {
 样式代码放这里		
}

/* Everything but IE 6/7/8 */
:root *> .selector {
 样式代码放这里		
} 
body:last-child .selector {
 样式代码放这里		
} 
body:nth-of-type(1) .selector {
 样式代码放这里		
} 
body:first-of-type .selector {
 样式代码放这里		
}	

属性/属性值 Hack

/* IE 6 */
.selector { _color: blue; } 
.selector { -color: blue; }

/* IE 6/7 - any combination of these characters: 
 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : <  > | */
.selector { !color: blue; } 
.selector { $color: blue; } 
.selector { &color: blue; } 
.selector { *color: blue; } 
/* ... */

/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; } 
/* string after ! can be anything */

/* IE 8/9 */
.selector { color: blue\0/; } 
/* must go at the END of all rules */

/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; } 
.selector { color/*\**/: blue\9; }

 /* Everything but IE 6 */
.selector { color/**/: blue; }

媒体查询Hack

/* IE 6/7 */
@media screen\9 {
 样式代码放这里		
}

/* IE 6/7/8 */
@media \0screen\,screen\9 {
 样式代码放这里		
}

/* IE 8 */
@media \0screen {
 样式代码放这里		
}

/* IE 8/9/10 & Opera */
@media screen\0 {
 样式代码放这里		
}

/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* IE 9/10 */
@media screen and (min-width:0\0) {
 样式代码放这里		
}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 样式代码放这里		
}

/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {
 样式代码放这里		
}

JavaScript Hack

/* IE <= 8 */
var isIE = '\v'=='v';	
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1	
/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 10 */
var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;	

/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

上面列出各个浏览器下hack的写法,当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时,请先检查你的css或者js,如果实在无法达到要求,在考虑使用hack来处理。

 

下面是我收集有关于各浏览器下Hack的写法:

1、Firefox

@-moz-document url-prefix() {
.selector {
property: value;
}
}

上面是仅仅被Firefox浏览器识别的写法,具体如:

@-moz-document url-prefix() {
.demo {
color:lime;
}
}

支持Firefox的还有几种写法:

/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者:
@-moz-document url-prefix() { .selector { property: value; } } 

/* 支持所有Gecko内核的浏览器 (包括Firefox) */
*>.selector { property: value; }

2、Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0)	{
Selector { property: value; }
}

上面写法主要是针对Webkit内核的浏览器,如Google Chrome 和 Safari浏览器:

@media screen and (-webkit-min-device-pixel-ratio:0)	{
.demo { color: #f36; }
}

3、Opera浏览器

html:first-child>b\ody Selector {property:value;}
或者:
@media all and (min-width:0) {
Selector {property: value;}
}
或者:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
head~body  Selector { property: value; }
}

上面则是Opera浏览器的Hack写法:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
	head~body  .demo { background: green; }
}

4、IE9浏览器

:root Selector {property: value\9;}

上面是IE9的写法,具体应用如下:

:root .demo {color: #ff0\9;}

5、IE9以及IE9以下版本

Selector {property:value\9;}

这种写法只有IE9以及IE9以下版本能识别,这里需要注意此处“\9”只能是“\9”不能是别的,比如说“\8”,不然会失去效果的,如:

.demo {background: lime\9;}

6、IE8浏览器

Selector {property: value/;}
或者:
@media \0screen{
Selector {property: value;}
}

上面写法只有IE能识别,如:

.color {color: #fff/;}
或者:
@media \0screen{
.color {color: #fff;}
}

7、IE8以及IE8以上的版本

Selector {property: value\0;}

这种写法只有IE8以及IE8以上版本支持,如

.demo {color: #ff0\0;}

8、IE7浏览器

*+html Selector{property:value;}
或
*:first-child+html Selector {property:value;}

上面两种是IE7浏览器下才能识别,如:

*+html .demo {background: green;}
或者:
*:first-child+html .demo {background: green;}

9、IE7及IE7以下版本浏览器

Selector {*property: value;}

上面的写法在IE7以及其以下版本都可以识别,如:

.demo {*background: red;}

10、IE6浏览器

Selector {_property/**/:/**/value;}
或者:
Selector {_property: value;}
或者:
*html Selector {property: value;}

具体应用如下:

.demo {_width/**/:/**/100px;}
或者:
.demo {_width: 100px;}
或者:
*html .demo {width: 100px;}

 

上面具体介绍了各种版本浏览器下如何识别各种的Hack写法,包括了IE6-9以及现代版本的浏览器写法。综合上面的所述,我们针对不同浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不同的Hack写法。下面我们分别来看这两种的不同写法:

CSS选择器的Hack写法

下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。

CSS选择器的Hack写法

1、IE6以及IE6以下版本浏览器

* html .demo {color: green;}

2、仅仅IE7浏览器

*:first-child+html .demo {color: green;}

3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)

html>body .demo {color: green;}

4、IE8-9,Firefox,Safari,Opear

html>/**/body .demo {color: green;}

5、IE9+

:root .demo {color: red;}

6、Firefox浏览器

@-moz-document url-prefix() {
.demo {
color: red;
}
}

6、Webkit内核浏览器(Safari和Google Chrome)

@media screen and (-webkit-min-device-pixel-ratio:0)	{
.demo { color: red; }
}

7、Opera浏览器

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
head~body  .demo { color: red; }
}

8、iPhone / mobile webkit

@media screen and (max-device-width: 480px) {
.demo { color: red  }
}

CSS属性Hack写法

1、IE6浏览器

.demo {_color: red;}

2、IE6-7浏览器识别

.demo {*color: red;}

3、所有浏览器除IE6浏览外

.demo {color/**/:red;}

4、IE6-9浏览器

.demo {color: red\9;}

5、IE7-8浏览器

.demo {color/*\**/:red\9;}

 

上面罗列的都是各种浏览器下的有关于CSS的Hack的写法,基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法,而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法,而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用,大家可以要据自己的需求来定,下面列出我个人的两种写法:

一、经济实惠型定法:

这种写法注重单独的CSS的Hack写法。不同的浏览器使用不同的Hack写法,其实也只是以IE的Hack写法比较多(因为我们写Hack也主要是针对IE的浏览器)特别是IE6下的浏览器。单独为各种浏览器写Hack的好处是:针对各种浏览顺的Hack写法省力易记。因为其他的浏览器主要是针对现代浏览器,相对来说是比较少的。针对于这种Hack的使用,我推荐使用下面的方法:

.demo {
color: red;/*所有现代浏览器*/
color: green\9;/*所有IE浏览器*/
color: lime\0;/*IE8-9浏览器*/
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
_color: orange;/*IE6浏览器*/
}
@media all and (min-width:0px){
color: #000;/*Webkit和Opera浏览器*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
color: #f36;/*Webkit内核浏览器*/
}
@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
head~body .demo {color: #369;} /*Opera*/
}
@-moz-document url-prefix(){ 
.demo{color:#ccc;}/* all firefox */
} 

二、完美主义写法

这种方法是追求完美主义的写法,主要是配合我们上一节所说的IE条件注释,全部采用选择器Hack的写法。这种写法分两步:

1、创建条件样式表,并在HTML中body里添加相应的class类名:

<!--[if IE6]--><body class="ie6"><<![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

2、接着创建对应的样式

.demo {color: blue;}/*现代浏览器*/
.non-ie .demo {color: red;}/*除IE外浏览器*/
.ie9 .demo {color: yellow;}/*IE9浏览器*/
.ie8 .demo{color: green;}/*IE8浏览器*/
.ie7 .demo {color: orange;}/*IE7浏览器*/
.ie6 .demo {color: lime;}/*IE6浏览器*/
@media all and (min-width: 0px){ 
.demo {color:black;} /* webkit and opera */
}
@media screen and (-webkit-min-device-pixel-ratio:0){ 
.demo{color:#369;}/* webkit */
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
head~body .demo{color:#cf6;}/* opera */
}
@-moz-document url-prefix(){ 
.demo{color:#963;}/* firefox * /
} 

上面就是目前各种浏览器下,相关CSS的Hack的写法,下面我们具体来看一个实例:

HTML Markup

<div class="demo">test color</div>

CSS Code

.demo {
color: red;/*所有现代浏览器*/
color: green\9;/*所有IE浏览器*/
color: lime\0;/*IE8-9浏览器*/
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
_color: orange;/*IE6浏览器*/
}
:root .demo {color: #963\9;}
@-moz-document url-prefix(){ 
.demo{color:#897;}/* all firefox */
} 
@media screen and (-webkit-min-device-pixel-ratio:0)	{
.demo { color: #000; }/*webkit*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
head~body  .demo { color: red; }/*opera*/
}

请看最终效果图:

cssHacks-demo

请面罗列了各浏览器下的Hack的写法,大家写浏览的CSS Hack时也可以参考下面的图表

css-hack

上图也可以前往centricle.com在线查看。

那么到此就介绍完了有关于各浏览器的CSS Hack的写法,大家在平时需要使用Hack时可以根据CSS的选择器Hack和CSS的属性Hack对号入坐,不过我还是强调在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而先造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果,除非到了万不得已情况下,才考虑CSS的Hack。

[ via ]

发表评论

电子邮件地址不会被公开。

随机