2010-04-05 47 views
2

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

这里有一些选择,你可以自由地讨论这些选项的利弊,以及你所知道的任何其他方法,并且更喜欢:

  • 服务器端解决方案:使用控制器(例如servlet)来分析请求中的user-agent头并在视图中返回适当的CSS文件。通过检查用户代理和添加各文件
  • 使用一个客户端框架来处理浏览器的细节(诸如异步在客户端<!--[if IE]> ... <![endif]-->
  • 负载CSS文件:
  • 使用浏览器特定黑客加载文件,如jQuery browser-specific css rules

回答

5

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

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

他们绝对不是黑客。

不要使用任何依赖user-agent的东西,因为这很容易被欺骗。我也远离客户端CSS框架,因为(大多数情况下)它们只是美化的表格布局(关于框架的更多细节,你可以查看this StackOverflow post)。

6

我要提出一个第四选项...

  • 不要使用浏览器的CSS文件。

说真的,不要这样做。

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

维护浏览器特定的CSS文件将成为任何可观的网站上的噩梦。

+0

“它只需要轻微黑客与IE一起工作” - 完全。你如何管理? – 2010-04-05 18:35:47

+0

@Yuval A,这很难,而且需要很多经验,但是你可以达到你的CSS主要用于IE的地步。请记住,使用CSS有多种做事方式......这意味着如果某种方式不能跨浏览器工作,请尝试找到另一种方法来做同样的事情......并且这可能适用于所有浏览器。 – Polaris878 2010-04-05 18:41:38

+0

对不起尤瓦尔,我从评论中误解了你的问题。如果你确实需要它们,那么在单个CSS文件本身中检查IE是优先的。通过这种方式,如果有人正在经历并维护它,那么显然需要做什么才能处理特定类的IE。 – Polaris878 2010-04-05 18:48:48

1

我认为这个想法是在适合于由服务器确定的浏览器的一个文件中提供缩小的CSS。

Google网络工具包(GWT)使用控制器来提供这一点,我相信这是标准的最佳实践。

条件标签不适用于每个浏览器。 JavaScript加载太晚,并给你开销。

0

这里是一个css文件的一部分,我有我在哪里处理浏览器特定的东西,我实现了drupal主题......这个处理webkit(safari/chrome等),gecko(firefox)和khtml(konqueror )。使用1档IE7/8

的页面正常工作节省了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; 
    } 
} 

希望这会有所帮助。

0

我更喜欢框架,他们工作得很好(大部分),并帮助您节省大量时间。因为不是再次重新发现解决方案,有的人已经为你做了。

相关问题