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
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" />
<![endif]-->
Same approach for other IEs.
source to share
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:
* {
padding:0;
margin:0;
}
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 .
source to share
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(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>
source to share