detect safari

[ggalan]

i found this bit of code from : http://dustinbrewer.com/css-hackgett...ari-to-behave/

<script type="javascript">
isSafari3 = false;
if(window.devicePixelRatio) isSafari3 = true;
</script>

but lets say i have a css file called "safari.css"
where would reference this file from the code above?

[jscheuer1]

First of all, that's an invalid script tag and will do nothing in Safari. The test appears to be valid, but creates an undeclared global variable, not very good form and can result in unexpected problems. If used on an XHTML DOCTYPE page, it may need !CDATA comment delimiters (these will not harm other DOCTYPE's).

So I'd suggest:

<script type="text/javascript">
/* <![CDATA[ */
if(window.devicePixelRatio){
	document.write('<link rel="stylesheet" href="safari.css" type="text/css">');
}
/* ]]> */
</script>

But this will also work for Chrome! Perhaps other WebKit based browsers like Konqueror would also be included. If there are items in the stylesheet that could cause problems for Chrome, etc., we can add:

<script type="text/javascript">
/* <![CDATA[ */
if(window.devicePixelRatio && /Apple/.test(navigator.vendor)){
	document.write('<link rel="stylesheet" href="safari.css" type="text/css">');
}
/* ]]> */
</script>

to eliminate Chrome and all others not specifically Safari.

However, if all of your special styles are either -webkit- or true css3 styles and work in Safari 3, they will probably work in those other browsers anyway.

[molendijk]

For webkit plus chrome:
<script type="text/javascript">
var webkit=navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1;
</script>
then if(webkit){whatever you want}
===
Arie Molendijk.

[jscheuer1]

The navigator.userAgent string is one of the most exposed to manipulation by browsers like Opera and Firefox, so shouldn't be relied upon if there are other more browser specific tests. Ideally one should use feature detection, not browser sniffing.

The way Arie is using userAgent there in his post, it doesn't distinguish between version numbers.

I potentially liked:

window.devicePixelRatio

Because it apparently targeted (from the explanation on the page linked to for it) browsers that support css3, except it doesn't. Perhaps it's a webkit only property (not supported in current Opera or Firefox, both of which do support css3). As such it may be deprecated in the future.

So all of this boils down to browser sniffing. If you want a reliable test for Safari, use:

/Apple/.test(navigator.vendor)

Safari and Chrome:

/Apple|Google/.test(navigator.vendor)

But neither of these targets specific versions of those. Apparently, at least for now, if we can believe that page ggalan links to at all, they were already wrong about it detecting css3 compliance, window.devicePixelRatio detects webkit that can do css3, or perhaps only -webkit- specific css3-like properties, which presumably are version 3 of Safari and up, and probably other versions and up in other webkit browsers.

So, ggalan, what is it you are trying to detect? Is it Safari, or webkit, or css3 or a particular version/evolution of Safari and/or webkit, or something else? And why?

Once we know that, we may be able to devise a sniffer script tailored for your purposes. But it will still be subject, as are all sniffer scripts, to future changes in browsers that may make it no longer suitable for the purpose intended.

Bottom line - Use styles that are cross browser on a valid HTML page. There are so many. Browser specific styles like -webkit-whatever may also be used, as they will degrade gracefully in browsers that don't support the webkit engine.

[ggalan]

thank you