css - 旧 IE 回退 : modernizr, 星黑客或其他方式的最便宜的方法？

Question

这是大多数浏览器支持的示例样式:

.class {
     background: rgba(0,0,0,0.3);
 }

旧 IE (IE 6-8) 不支持 rgba。我至少可以使用三种方法来支持这一点。

1. 同类

   .class {
        background: grey;
        background: rgba(0,0,0,0.3);
   }
   

2. 现代化

   .class {
        background: rgba(0,0,0,0.3);
   }
   
   .no-rgba .class {
        background: grey;
   }
   

3. 明星黑客

   .class {
        background: rgba(0,0,0,0.3);
        background: grey\9; /*IE8 and below*/
    }
   

我更喜欢使用方法 1 和 2，因为它们涵盖的不仅仅是 IE 浏览器，但我不确定应该使用哪种方法。

方法 1 很好，因为即使禁用 JS，它也能正常工作。但是，有一个额外的属性需要为所有现代浏览器呈现。

方法 2 很好，因为它将不良浏览器隔离到它们自己的类中。现代浏览器不会呈现此类，从而节省了数毫秒的呈现时间。

也许还有其他我没有想到的更好的东西？我想避免使用 PIE.htc 或过滤器。优化和加载时间的最佳方法是什么？

Answer 1

对于这种风格，正确答案是你列出的第一个:

.class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

首先指定回退选项，然后是首选选项。

IE 会将背景设置为 grey因为它不支持 rgba ;其他浏览器将使用 rgba预期的版本。

这是最佳答案的原因是:

1. 这是针对这种确切情况的规范“正确”答案:CSS 设计为以这种方式工作，正是考虑到这种情况。

2. 这是成本最低的选项，因为浏览器无需执行任何额外的渲染或脚本。 IE 将完全忽略第二个 background ，所以那里没有额外的事情发生；其他浏览器会同时解析两者，但解析第二个浏览器会覆盖第一个解析的内容，因此唯一的开销是解析，无论您选择哪个选项，解析都必须完成。

在其他可能的解决方案中，Modernizr 很棒，但对于这种情况来说有点过分了——如果您有一个不涉及任何脚本的解决方案，则无需使用脚本解决方案。并且应该不惜一切代价避免 CSS hacks。可能在某些情况下它们值得使用，但自从我停止尝试支持 IE6 以来，我个人还没有看到它们的合法用途。

另一个可用但您没有提到的解决方案是条件注释:即使用 IE 的 <!--[if IE]>为 IE 加载替代样式表的语法。但是，如果可能的话，我也会避免这种情况，而且随着 IE6 和 IE7 成为更遥远的内存，对这种解决方案的需求正在逐渐消失。

最后，给你一个稍微不同的选择:忽略旧的 IE。对于某些东西，IE8 可能不会按照您想要的方式呈现，而让它这样做是一件痛苦的事情。在这些情况下，让它失败是一种完全合法的策略。对于问题中的示例，这不是必需的，因为我们有一个非常好的 CSS 解决方案，但对于其他更复杂的样式，请考虑如果 IE 不正确，网站看起来会有多糟糕；如果它仍然可用，那么可能只是让它滑动。需要权衡此选项将受到影响的用户数量和它给他们带来的问题的程度，以及您正在努力满足的要求，但它应该被视为一个选项。