12

Is there a way to load a different CSS file for a specific browser?

like (poor pseudo code):

if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />
Tim M.
  • 53,671
  • 14
  • 120
  • 163
gVidal
  • 335
  • 1
  • 3
  • 15

3 Answers3

22

Ideal solution you want does not exist:

Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

So the best solution:

How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing 'chrome' with 'mozilla', 'explorer' and so on...

Then to add your css files, just follow up with conditional statements like so:

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

Good luck and hope this helps!

Mathew Kurian
  • 5,949
  • 5
  • 46
  • 73
  • 1
    Conditional comments only work for Internet Explorer (and only up to a specific version, I think 8 is the last one to support it). The OP wants to feed different files to non-IE browsers. – cimmanon Jan 09 '13 at 02:50
  • And its still a poor answer. UA sniffing has never been good for serving content. – cimmanon Jan 09 '13 at 02:59
0

You can use conditional comments to target IE browsers. Look at this: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. To target firefox you can check this answer: https://stackoverflow.com/a/953491/1941910. But I think there's no need to target firefox, chrome or safari, they all do a good job applying CSS.

Community
  • 1
  • 1
Angel Yan
  • 960
  • 7
  • 10
0

you can do this at the server end. 

if(Request.UserAgent is chrome){        
    //here output chrome stylesheet
}
yukaizhao
  • 681
  • 5
  • 17