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

The reason I am asking is because I finished a lovely homepage design and only looked at the site on chrome and safari on osx, then I decided to open firefox and some things broke.

Also I am having an issue with the search field placeholder text displaying the wrong color and displaying the correct color as specified in my stylesheet in firefox.

It would be great if I could just create separate stylesheets for different browsers, or have conditionals that trigger the correct settings depending on the browser.

Also a great tool to view my site in multiple browsers manually would be great.


source to share

3 answers

Since the problems are usually related to IE, there is a solution for this.
The next line you can put in your title tags will only load certain CSS if you are using IE7

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


Same approach for other IEs.



Some people prefer to treat this differently, using a CSS reset file . Basically, this sets a neutral starting point so that whatever CSS is applied will have the same predictable result across all browsers.

One of the simplest versions to give you a basic understanding of the concept is:

* {


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

And here is an overview of links to various common approaches.

Edit : For testing in different browsers, check out this popular SO question and this one .



If you are using javascript you can put this piece of code in 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( 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'>");




All Articles