在相同的CSS中使用css hacks的条件评论中使用外部css的利弊是什么?

时间:2010-02-26 11:34:44

标签: html css xhtml cross-browser

什么是利弊

如果我制作4种不同的CSS?

  • 的main.css
  • IE7.css(在条件评论中)
  • IE8.css(在条件评论中)
  • IE6.css(有条件的评论)

OR

所有

的1个css文件
  • main.css +包括IE6 +的黑客攻击 IE 7 + IE8(如果需要)

3 个答案:

答案 0 :(得分:1)

具有不同样式表的con是你将再有一个HTTP请求。不过,我发现对职业选手来说完全可以忽略不计:

  • 清洁代码结构

  • 没有hacks =不依赖于破碎/未记录的行为

  • 以后加入该项目的人员更容易维护

  • 可以轻松添加新版本(但希望IE9不再需​​要)

答案 1 :(得分:1)

优点:

  1. 效果:为非IE浏览器节省资源。
  2. 验证:您可以验证您的CSS,非IE浏览器不必处理无效的CSS。
  3. 跨浏览器:支持IE 5.5到IE 8以及可能的新版本。
  4. 支持:它得到了微软的正式支持,与CSS黑客相反。
  5. 缺点:

    1. 维护:您必须维护更多文件。
    2. 效果:IE必须发出更多HTTP请求。
    3. KISS :对于一两条规则,有时候可能会有点矫枉过正。
    4. 一般来说,我认为条件评论比CSS黑客更好。

答案 2 :(得分:1)

这完全取决于您在每个文件中拥有多少内容以及您希望如何对它们进行分组。文件的分离是为了维护者的 方便,而不是技术问题。

* html(隐藏IE6)是您今天可能想要使用的唯一CSS黑客。如果您需要更多的灵活性,那么是的,您需要条件注释,但不,这并不意味着您拥有,如果您不希望有单独的样式表。如果你只有几个黑客,你可能不想。

例如。在标记中,您可以添加特定于IE的类

<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body class="ok"><!--<![endif]-->

现在你可以不用黑客攻击IE:

body.ie6 .foo { ... }
body.ie7 .foo { ... }