Alternative style sheets based on browser

Question

Anyone out there know if its possible to have a javascript figure out what browser a page is being used in and load a stylesheet accordingly. Ideally I would like to have a different sytlesheet for each browser and css media queries only go so far right now.

Answer 1

If you are trying to hit IE versions only, Conditional comments works quite well!

http://www.quirksmode.org/css/condcom.html

If you want to target browsers for there abilities use Modernizr:

http://www.modernizr.com/

If none of the above you should look in to browser detection:

http://www.w3schools.com/js/js_browser.asp

Answer 2

Yes, it it possible. You can detect the browser via the "navigator" object, but I guess the best bet is using jQuery both for detecting the browser and dynamically loading a stylesheet.

Answer 3

Browser detection example using the built-in navigator object (source: http://www.w3schools.com/js/js_browser.asp):

<div id="example"></div>

<script type="text/javascript">
  txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
  txt+= "<p>Browser Name: " + navigator.appName + "</p>";
  txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
  txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
  txt+= "<p>Platform: " + navigator.platform + "</p>";
  txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

  document.getElementById("example").innerHTML=txt;
</script>

And check this out to find out how to load up CSS using JavaScript:
How to load up CSS files using Javascript?

This may work too (source: http://snippets.dzone.com/posts/show/4554):

function includeCSS(p_file) {
    var v_css  = document.createElement('link');
    v_css.rel = 'stylesheet'
    v_css.type = 'text/css';
    v_css.href = p_file;
    document.getElementsByTagName('head')[0].appendChild(v_css);
}