Is it possible to have separate css stylesheets that are automatically loaded depending on what browser the website is being accessed from?

Question

The reason I'm asking is because I finished a lovely homepage design and only viewed the website in chrome and safari on osx then I decided to open firefox and certain things broke.

Also an issue I was having with search field placeholder text displaying wrong colour had vanished and displayed the correct colour I stated in my stylesheet in firefox.

It would be great if I could just create separate style sheets for different browsers or have conditional statements that would trigger the correct settings depending on the browser.

Also a great tool for viewing my site in multiple browsers manually would be great.

Answer 1

Since usually the problems are with IEs, there is a solution for that.
The next line, which you can put inside the head tags, will loads a specific CSS only if you use IE7

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="http://your.css/my.css" />
<![endif]-->

Same approach for other IEs.

Answer 2

Some people prefer to approach this differently by using a CSS reset file. Basically, that establishes a neutral starting point so that any CSS you apply will have the same, predictable result on all browsers.

One of the simplest versions, which will give you a general idea of the concept, is this:

* {
     padding:0;
     margin:0;
   }

There is a lot of discussion about this in the answers to this SO question.

And here is a roundup of links to various common approaches.

Edit: for testing in various browsers, check out this popular SO question , and this one.

Answer 3

If you use javascript you can put this code snippet inside your head tag to detect the user agent

<script type="text/javascript">
var browser={
    msie:navigator.userAgent.indexOf('MSIE') > -1 ? true : false,
    chrome:navigator.userAgent.indexOf('Chrome') > -1 ? true : false,
    opera:navigator.userAgent.indexOf('Opera') > -1 ? true : false,
    firefox:navigator.userAgent.indexOf('Firefox') > -1 ? true : false
}
if(browser.msie) document.write("<link REL='stylesheet' HREF='msie.css' TYPE='text/css'>");
if(browser.chrome) document.write("<link REL='stylesheet' HREF='chrome.css' TYPE='text/css'>");
if(browser.opera) document.write("<link REL='stylesheet' HREF='opera.css' TYPE='text/css'>");
if(browser.firefox) document.write("<link REL='stylesheet' HREF='firefox.css' TYPE='text/css'>");
</script>