What is the preferred way of loading browser-specific CSS files?

Question

What is the best way to handle browser-specific CSS file loading? Assume you are running in the context of a proper MVC framework.

Here are some options, you are free to discuss the pros and cons of these options as well as any other methods you know of, and prefer:

• Server-side solution: use the controller (e.g. servlet) to analyze the user-agent header in the request and return the proper CSS file in the view.
• Use browser specific hacks to load files, such as: <!--[if IE]> ... <![endif]-->
• Load CSS files asynchronously in client side by inspecting user-agent and adding respective files
• Use a client side framework to handle browser-specifics (such as jQuery browser-specific css rules)

Answer 1

I'm going to suggest a 4th option...

• Don't use browser specific CSS files.

Seriously, don't do it.

It is possible to write one CSS implementation for all standards compliant browsers... it will only need to be lightly hacked to work with IE.

Maintaining browser specific CSS files will become a nightmare on any sizable website.

Answer 2

Design a single stylesheet that works cross-browser. Get IE as close as you can, and then use IE Condition Comments to load the rest.

IE Conditional Comments are the accepted way to load IE (including version) specific CSS rules.

They are most definitely not a hack.

Don't use anything that relys on user-agent as that is easy to spoof. I also stay away from client side CSS frameworks because (for the most part) they are just glorified table layouts (you can check out this StackOverflow post for more details on frameworks).

Answer 3

I think the idea is to deliver minified CSS in one file that is appropriate for the browser which is determined by the server.

Google web toolkit (GWT) uses the controller to deliver just this, and I'm sure is the standard best practice.

Conditional tags don't work for every browser. Javascript loads too late and gives you overhead.

Answer 4

here is an example of part of a css file i have where i handle browser specific stuff for a drupal theme I implemented... this handles webkit (safari/chrome,etc), gecko (firefox) and khtml (konqueror). the page work normally for ie7/8

using 1 file saves an http request and makes things clearer (IMHO)

/**
 * 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;
  }
}

hope this helps.

Answer 5

I'd prefer frameworks, they work great (mostly) and help you save a lot of time. Because instead of rediscovering the solutions again, some one has already done it for you.