Question

以下是大多数浏览器支持的示例样式：

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

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

同一个班级

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

Modernizr的

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

.no-rgba .class {
     background: grey;
}

明星黑客

.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版本。

这是最佳答案的原因是：

对于这个确切的场景，这是规范的“正确”答案：CSS旨在以这种方式工作，正是考虑到这种情况。
这是最便宜的选项，因为浏览器不需要进行任何额外的渲染或脚本编写。 IE将完全忽略第二个background，因此没有额外的事情发生;其他浏览器将解析这两个浏览器，但解析第二个浏览器将覆盖第一个解析的内容，因此唯一的开销是解析，无论如何，无论你选择哪个选项，都必须进行解析。

在其他可能的解决方案中，Modernizr非常棒，但对于这种情况来说是过度的 - 如果您的解决方案不涉及任何脚本，则无需使用脚本化解决方案。应该不惜一切代价避免CSS黑客攻击。可能有些情况下它们值得使用，但我个人还没有看到合法使用它，因为我停止尝试支持IE6。

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

最后，一个稍微不同的选项：只需忽略旧的IE。对于某些事情，IE8可能无法以您想要的方式呈现内容，并且这样做很痛苦。在这些情况下，让它失败是一种完全合法的策略。对于问题中的示例，这不是必需的，因为我们有一个非常好的CSS解决方案，但对于其他更复杂的样式，请考虑如果IE无法正确处理，网站的外观会有多糟糕;如果它仍然可用，则可能存在简单地让它滑动的情况。此选项需要与将受影响的用户数量及其导致的问题数量以及您正在处理的要求进行权衡，但应将其视为一种选择。

Answer 2

你的方法＃1是普遍接受的方式，因为它不仅处理IE，而且还处理任何不支持CSS的浏览器（在这种情况下，RGBA）。浏览器应该遵循的CSS规则是，如果他们不识别一行，他们会忽略它并继续前进。对于功能更强大的浏览器，像这样的CSS很便宜，浏览器甚至可能根本不渲染回退CSS（我知道大多数不下载基于图像的回退图像）。

方法2不仅添加了类（增加了重量），还添加了整个JavaScript库。如果你正在处理一堆其他CSS3类型的东西（特别是那些没有这种简单回退的东西），那么这不是什么大不了的事，但是如果你正在使用这样的后备，或者只是一个或者二，然后你增加了很多开销（包括可能的另一个HTTP请求），但没有带来很多额外的好处。即使现代浏览器不呈现类，它们也必须运行JavaScript来检查功能。

方法3 是一个黑客，应该尽可能避免（我推荐使用条件样式表而不是黑客攻击）。它不仅仅针对特定浏览器的特定版本（因此让所有其他浏览器都不支持这种CSS），而是依赖于浏览器中的错误来完成工作。如果该代码在不同的浏览器中触发不同的错误，或者如果浏览器识别出具有黑客攻击的行，但是使用正确的CSS还能正常运行，会发生什么？看看2005年左右的一些教程，当IE6 和 IE5 for Mac仍然是主要的竞争者时，看到人们疯狂地浏览浏览器黑客以防止他们踩到彼此的脚趾。（注意：我不认为前缀CSS是黑客。前缀CSS项目是文档化的功能，浏览器供应商选择添加并提供沙箱化这些功能的既定目的。如果它们是用于使其成为标准的东西，那么它们旨在逐步淘汰。）

所以，按照偏好顺序 - Fallback CSS，Modernizr，Conditional Stylesheets，Browser Hacks。

旧IE回退的最便宜的方法：现代化，明星黑客或其他？

2 个答案: