There are some selector hacks out there, but I don’t like them – ie: (@media screen and (-webkit-min-device-pixel-ratio:0) {}). My personal favourite is done with Prototype because I use it a lot and it is pretty simple:
<link rel="stylesheet" type="text/css" media="none" href="/css/safari.css" id="safari" />
<script type="text/javascript">
// matches all safari/chrome versions
if(Prototype.Browser.WebKit) {
$('safari').media="all";
}
</script>
If you set the media attribute to none – no media device will display it. By adding the little if statement, you can check if the Browser is WebKit, which is the engine name of safari or chrome and alter the media value to all.
If you do not use prototype, you can do it like this:
<script type="text/javascript">
// targets safari 3 - not 2!
if(window.devicePixelRatio) {
document.getElementById('safari')media="all";
}
// targets all safari or better said webKit engines
if(navigator.userAgent.indexOf('AppleWebKit/') > -1) {
document.getElementById('safari')media="all";
}
// prototype way + targeting old and new webKit with two stylesheets
if(Prototype.Browser.WebKit) {
var mySafari = (window.devicePixelRatio) ? 'safari3' : 'safari2';
document.getElementById(mySafari)media="all";
}
</script>
Note, this method shouldn’t be used for “accessible” Websites, because it relies on javascript. You can do it then serverside as well by “sniffing” the UserAgent from the HTTP Request and add your little switch there – whereas this isn’t a 100% safe method though, because some people alter their UserAgent strings and there are tons of vendors/versions thus your detection may fail from time to time.
An alternative to this way is to load the needed script on the fly, so you can reduce a HTTP Request, by writing the link tag dynamically to your document. However – the describe method above is shorter 