HTML5与IE条件注释

IE浏览器一直在CSS的解析式上存在着诸多问题,所以我们大多数写的 CSS Hacks 是针对IE浏览器进行的处理,不过IE9还是让我们看到了希望,尽管还有许多不尽人意的地方。

微软也知道自己的浏览器的不足,所以就推出了官方的Hack方法,那就是“IE条件注释”。

IE条件注释

针对不同的IE版本分别导入的样式表

1
2
3
4
5
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /><![endif]-->

关于更多IE条件注释的使用语法请看 “http://blog.moocss.com/code-snippets/html-css-code-snippets/1130.html”日志。

使用额外的样式表解决蛋疼的IE 兼容性问题实在不爽,不过是微软官方推荐的Hack方式,从浏览器的兼容性方面考虑,它是最安全的Hack方式,理论上也是最好的选择。

但这种方式需要将所有的Hack根据浏览器类型,分别归类到相应的文件中。带来问题是非常明显的:

  • IE浏览器的用户会额外增加1或2个以上的HTTP请求来下载样式表文件。
  • 它们应该放在里,本页面等待渲染,直到他们完全加载完毕,影响渲染速度。
  • 增加了开发和维护的成本。

CSS Hack

直接在CSS文件中写CSS Hack是非常直观和方便的区分方法。我们最常用的是“样式属性前缀法”,它的原理就样式的属性名前加一些特定浏览器才能识别的前缀,从而让某些样式属性只对特定浏览器生效。例如下面的例子:

1
2
3
4
5
6
7
.box{
	background:red; /* 所有浏览器 */
	background:orange\9; /* 所有IE浏览器 */
	*background:yellow; /* IE7和IE6 */
	+background:green; /* IE7 */
	_background:blue; /* IE6 */
}

”样式属性前缀法“的聚会程度比较高,代码简单,可维护性很强,但是存在着一定的风险,向后兼容性很弱,是不可预知的。

接下来,我们再看看”选择符前缀法“,它也是我们常用的方式,它的原理就是在才CSS选择符前加一些特定浏览器才能识别的前缀,从而让某些样式只对特定浏览器生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Opera */  
html:first-child #opera  {  display: block;  }  
/* IE 7 */ 
*:first-child+html{background-color:#F00;}
/* IE 7 */ 
 html > body #ie7  {  *display: block;  }  
/* IE 6 */ 
* html #div{ background-color:#F00;}
/* IE 6 */ 
 body #ie6  {  _display: block;  } 
 
/*IE7及其更低版本*/
*:first-child+html{}*html{}
 
/*IE7,IE7以上和主流浏览器*/
html>body{}
 
/*适合主流浏览器(IE7排除在外,IE7以下的也不行)*/ 
html>/**/body{}
/* Firefox 1 - 2 */ 
 body:empty #firefox12  {  display: block;  }  
/* Firefox */  
@-moz-document url-prefix()  {  #firefox { display: block; }  } 
/* Safari */  
@media screen and (-webkit-min-device-pixel-ratio:0)  {  #safari { display: block; }  } 
/* Opera */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)  {  head~body #opera { display: block; }  }

”选择符前缀法“也同样存在着一定的风险,向后兼容性很弱,是不可预知的。

语法是比较复杂的,不好记,阅读也困难,当然也通不过W3C验证了。

“样式属性前缀法”和”选择符前缀法”是比较流行的Hack方式,虽然IE条件注释法在理论上是首推的Hack方法,但因为它不利于开发和维护,一般情况下使用的比较少。

IE条件注释的妙用

说了那么多,别以为IE条件注释只用于样式表文件,它还有其它的形式来进行Hack。

IE条件注释与style标签:

1
2
3
4
5
<!--[if IE 6]>
<style type="text/css">
	/* css for IE 6 */
</style>
<![endif]-->

IE条件注释与script标签:

1
2
3
4
5
<!--[if IE 6]>
<script type="text/javascript">
    alert("我是IE6");
</script>
<![endif]-->

IE条件注释与html标签:

W3C HTML5 LOGO中也有类似的使用。

1
2
3
4
5
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

HTML5 ★ Boilerplate 的做法。

1
2
3
4
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->

接下来,样式表中就可以使用下面的代码即可区分版本。

1
2
3
4
.ie9 .box{background:orange;}
.ie8 .box{background:yellow;}
.ie7 .box{background:green;}
.ie6 .box{background:blue;}

这个方法不会增加http请求,维护也非常方便,可以避免使用CSS Hacks带来的风险和维护成本。

站点统计