如何管理现代/古代浏览器的资产

Question

随着新的浏览器增强功能，如CSS3动画，渐变，SVG背景等......新的浏览器不必下载旧的CSS代码，并且旧版浏览器必须下载高级CSS代码。所以在HTTP级别（没有服务器端编程方法）你怎么能处理这样的问题？您是否应该将base.css文件提供给两组浏览器，然后根据哪个浏览器组请求提供额外的CSS文件？有没有办法包含一个CSS文件，只是简单地将浏览器重定向到浏览器组特定的重写？或者这是应该首先在客户端找到并下载的东西吗？

Answer 1

完全接受优雅降级和渐进增强的概念将允许您为所有目标浏览器使用相同的CSS - 简而言之，如果浏览器不支持css3圆角 - 给它以供应商为前缀的规则;如果它也不支持 - 没有大问题，该网站仍可用于方角。

与额外的http请求相比，使用特定于供应商的前缀和标准前缀下载规则的开销将是最小的，并且可以提高可维护性，并且不必依赖浏览器检测来节省您的麻烦。

特定于布局的黑客通常只能应用于IE系列，可以通过html条件注释进行定位。

Answer 2

我发现有三种方法可以做到这一点。

1. 为每个样式表和javascript资源使用一个大文件，然后使用modernizr和feature sniffing之类的东西来清除哪个浏览器做什么。或者只是让所有浏览器做同样的事情。这对于开发输入和测试更好。

2. 使用两个文件（一个名为ancient.css，另一个名为modern.css）并使用服务器端HTTP嗅探器操作来检查浏览器的版本，然后为其提供相应的文件。将HTTP缓存设置为在不久的将来到期，以防止它每次访问服务器以检查要下载哪个文件。要生成文件，只需创建一个文件，其中包含所有浏览器之间共享的所有核心内容，另一个文件包含旧版浏览器的模拟内容。好处是你可以使用所有新的CSS3和HTML5-JavaScript的东西，但缺点是你需要测试以确保现代浏览器代码的东西与古老的东西相同。

3. 拥有两个资产文件（现代+古代）并首先进行现代下载。然后让浏览器通过modernizr查看它是否支持某些内容，如果没有，则让它下载古代文件。这里的好处是你不需要开发任何额外的服务器端东西，但缺点是你的网站渲染速度较慢，你可能同时发生同一资源的多次下载。