Question

处理特定于浏览器的CSS文件加载的最佳方法是什么？假设您正在适当的MVC框架的上下文中运行。

以下是一些选项，您可以自由讨论这些选项的优缺点以及您知道的任何其他方法，并且更喜欢：

服务器端解决方案：使用控制器（例如servlet）分析请求中的user-agent标头，并在视图中返回正确的CSS文件。
使用浏览器特定的黑客来加载文件，例如：
通过检查用户代理并添加相应文件，在客户端异步加载CSS文件
使用客户端框架处理特定于浏览器的内容（例如jQuery browser-specific css rules）

Answer 1

我要建议第4个选项......

请勿使用特定于浏览器的CSS文件。

说真的，不要这样做。

可以为所有符合标准的浏览器编写一个CSS实现...只需要轻微入侵即可使用IE。

维护特定于浏览器的CSS文件将成为任何大型网站的噩梦。

Answer 2

设计一个跨浏览器工作的样式表。尽可能接近IE，然后使用IE条件注释加载其余部分。

IE条件注释是加载IE（包括版本）特定CSS规则的可接受方式。

他们绝对不是黑客。

不要使用任何依赖于user-agent的东西，因为这很容易被欺骗。我也远离客户端CSS框架，因为（在大多数情况下）它们只是美化的表格布局（您可以查看this StackOverflow post以获取有关框架的更多详细信息）。

Answer 3

我认为我的想法是将缩小的CSS放在一个适合浏览器的文件中，该文件由服务器决定。

Google网络工具包（GWT）使用控制器来提供此功能，我确信这是标准的最佳做法。

条件标记不适用于每个浏览器。 Javascript加载太晚并且会给您带来开销。

Answer 4

这里有一个css文件的一部分示例我在哪里处理浏览器特定的东西我实现的drupal主题...这处理webkit（safari / chrome等），gecko（firefox）和khtml（konqueror）。该页面通常用于ie7 / 8

使用1个文件保存http请求并使事情更清晰（恕我直言）

/**
 * IE6 fixes
 */
* html ul.primary-links {
  height: 23px;
}

/***
 * WebKit fixes
 */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
  ul.primary-links {
    height: 24px;
  }
}

/***
 * Gecko fixes
 */
@-moz-document url-prefix(){ 
  ul.primary-links { 
    height: 28px !important; 
  } 
}

/***
 * KHTML fixes
 */
@media screen and (-khtml-min-device-pixel-ratio:0)
{
  ul.primary-links {
    height: 22px;
  }
}

希望这会有所帮助。

Answer 5

我更喜欢框架，它们工作得很好（大部分）并且可以帮助您节省大量时间。因为不是再次重新发现解决方案，所以有人已经为你完成了它。

加载特定于浏览器的CSS文件的首选方法是什么？

5 个答案: