Search code examples
javascripthtmlcssbrowserstylesheet

Loading Browser Specific Style Sheets in Modern Browsers

I really need some help here. I have searched the forum and the internet for hours. I have found many articles but they either have no definitive working answers on how to do this or they are too old.

I have 2 stylesheets. One for IE and one for all other browsers. This is not ideal I know but this was a complicated project and it is the way things developed. One sheet is 3D (webkit) and the other is 2D (IE). I need to be able to load the CSS based on the browser. I only need the 2 options, IE an other.

I have tried conditional statements and I have tried browser detection. Must work for modern browsers.

I have tried the following in the head and nothing has worked. The webkit CSS either overrides the IE CSS or it doesn't load at all. Please assist.

Attempt 1 (problem - webkit css overrides IE CSS even though it is commented):

<!--[if !IE]><!-->   

<link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarWebkit.css" />

<!--<![endif]-->

<!--[if gte IE 9]><!-->   

  <link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" />

<!--<![endif]-->

<!--[if lte IE 9]><!-->   

  <link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" />

<!--<![endif]-->

Attempt 2 (problem - won't load at all in any browser):

var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}

 if (browserName == "Microsoft Internet Explorer") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarIE.css">");
 }
 else {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarWebkit.css">");
 }

I made other attempts but these seemed like the most valid. Any working solutions are welcome. Thanks in advance.

Solution

  • Some suggestions:

    Server-side detection

    Depending on the server serving the CSS files, you may configure/customize it to serve the file you want depending on the User-Agent header.

    Link to CSS depending on the browser

    See answer from scunliffe

    Single CSS with class on body and overridden rules

    Detect the browser, and add a class on the body according to the browser, for example document.body.className += " msie"

    Then override the rules you want in your css

    body.msie someTag { /*msie specific rules*/ }

    I recommend to use a library for browser detection, they are usually more tested. I just found WhichBrowser which seems to do that very well.