在现代浏览器中加载特定于浏览器的样式表

Question

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.

Answer 1

Can you render the 2D page by default, but redirect to the 3D page if you detect (via feature detection) that the incoming browser supports what you are trying to do?

eg

<script>
  if(typeof(navigator.fancyNewThing) == 'function'){
    location.href = '3Dpage.html';
  }
</script>

or load your CSS accordingly.

Your browser detection code (above in the question) is a bit of overkill. Though singling out a browser by its user agent isn't always the wisest thing to do, this script should identify IE for you.

if(navigator.userAgent.indexOf('MSIE') != -1){
  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\">");
}

Answer 2

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.

Answer 3

With some great suggestions from the users here I was able to get this right! IE11 was the culprit here. MS prematurely defined IE11 as a webkit browser so certain properties like the user agent have been updated. Here's an article on that. http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/

So MSIE or RV weren't working because it confused the webkit browsers. I used Trident instead.

The following script works for dynamically loading CSS in the most recent versions of all browsers on the client side:

if(navigator.userAgent.indexOf('Trident') != -1){
  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\">");

}

</script>