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-agentheader 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)
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-agentas 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).