您当前的位置: 首页 » DIV+CSS编程 » 用CSS条件注释代替CSS hack
用CSS条件注释代替CSS hack
论坛链接
这一个星期我都在写三张XHTML页面，接的老客户的活儿。是大连的一个佛教类门户网站，一张首页，两张频道页。说门户网一点不为过，首页都有四五屏，内容较为丰富。
开始拿到PSD设计稿的时候，我发觉设计得还可以，比较大气，等我对着它看了几天之后，都想吐了。
开始我写的DIV结构，CSS代码，感觉还很流畅，很清晰，注释说明也写得很详细。对着Firefox三张页面的初稿完成，我发现CSS文件才7KB，自己明显地进步了不少。然后我开始在IE7 IE6下作兼容性调试，那个痛苦哇！页面没有大的差错，不外乎就是页面因为宽度问题，被挤扁了，但是小小的问题，一修正起来，要写一大段代码，有些还得修改DIV结构。靠！折腾了一天，CSS文件臃肿到了17KB。IE真不是人造的。
我这次做浏览器兼容性调试不再是使用我上次介绍的CSS HACK技术，而是新学了一招：CSS条件注释。我看到不少博客都在力荐这个方式，所以试水一下。
总结一下：
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
说明：以上例子中，第一条是给FF看的，下面的if IE 6 if IE 7判断语句是个IE6 IE7看的。这个顺序不能随便换，因为浏览器也是从上至下解释的，后面的效果覆盖前面的。然后再在IE6 IE7单独的样式文件中针对性地写代码。
实际上，CSS条件注释和CSS hack本质上一样，只是表现形式不同而已。条件注释把HACK代码写在了独立的CSS文件中而已。这样的优点是：CSS代码可读性强些了，更加清晰了，没有杂乱的HACK符号。缺点是：在IE6 7 单独的CSS文件中写的语句，支离破碎，以后要想修改，维护起来特别麻烦。如果你的ID CLASS命名比较规范，比较语义化，那还好点。
总结：如果你的XHTML页面体积小，就用一般的CSS HACK方法，直接写在一个样式文件里吧。页面大了再考虑CSS条件注释。
不知道我理解得对不对。慢慢体会去。
开始拿到PSD设计稿的时候，我发觉设计得还可以，比较大气，等我对着它看了几天之后，都想吐了。
开始我写的DIV结构，CSS代码，感觉还很流畅，很清晰，注释说明也写得很详细。对着Firefox三张页面的初稿完成，我发现CSS文件才7KB，自己明显地进步了不少。然后我开始在IE7 IE6下作兼容性调试，那个痛苦哇！页面没有大的差错，不外乎就是页面因为宽度问题，被挤扁了，但是小小的问题，一修正起来，要写一大段代码，有些还得修改DIV结构。靠！折腾了一天，CSS文件臃肿到了17KB。IE真不是人造的。
我这次做浏览器兼容性调试不再是使用我上次介绍的CSS HACK技术，而是新学了一招：CSS条件注释。我看到不少博客都在力荐这个方式，所以试水一下。
总结一下：
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
说明：以上例子中，第一条是给FF看的，下面的if IE 6 if IE 7判断语句是个IE6 IE7看的。这个顺序不能随便换，因为浏览器也是从上至下解释的，后面的效果覆盖前面的。然后再在IE6 IE7单独的样式文件中针对性地写代码。
实际上，CSS条件注释和CSS hack本质上一样，只是表现形式不同而已。条件注释把HACK代码写在了独立的CSS文件中而已。这样的优点是：CSS代码可读性强些了，更加清晰了，没有杂乱的HACK符号。缺点是：在IE6 7 单独的CSS文件中写的语句，支离破碎，以后要想修改，维护起来特别麻烦。如果你的ID CLASS命名比较规范，比较语义化，那还好点。
总结：如果你的XHTML页面体积小，就用一般的CSS HACK方法，直接写在一个样式文件里吧。页面大了再考虑CSS条件注释。
不知道我理解得对不对。慢慢体会去。