Targetting Safari and Chrome CSS by loading a specific stylesheet using Javascript.

The background color of this box will appear orange in most browsers, but green in Safari and Chrome.

The method of distinguishing Safari and Chrome from other browsers came from http://www.hedgerwow.com/360/dhtml/detect-safari3-by-js-css.html

Here is the code that makes it work:

<style type="text/css">
html { /* need this so that Safari3 can use window.getMatchedCSSRules to collect CSSStyleRule later */
list-style-image:none;
}
#testbox {
background:orange;
}
</style>

<script type="text/javascript">
var isSafari3 = false;
 
if( window.devicePixelRatio &&  window.getMatchedCSSRules ){
//you need 	put html {list-style-image:none;} in yout Safari 3 only stylesheet first
//we detect whether if it's Safari 3 by checking if it read some Safari 3 only styles 
isSafari3  =  !!window.getMatchedCSSRules(document.documentElement,'');
}

if (isSafari3) {
var headID = document.getElementsByTagName("head")[0]; 
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'safari.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
</script>

Originally tested in Safari/Win 3.2.1 and Chrome 0.4.154.29 in February 2009. Re-tested: still works January 2010 with Safari/Win 4.0.4 and Chrome 3.0.195.38

After completing this demo, I became aware of a simple way of accomplishing something similar with no Javascript. See this: Targetting Safari and Chrome CSS with the @media hack