tech @ Beacon Deacon

Detecting Safari Only Or Chrome Only Or Edge Only

Jamie Johnson

August 15, 2017

Recently, I worked on a project where I needed to distinguish between modern versions of Safari and Chrome.

To detect both Chrome and Safari browsers, one used to use a CSS rule:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* CSS rules for Chrome and Safari */
}

Or one might use prefixes in CSS rules:

border-radius: 10px;
-webkit-border-radius: 15px; /* -webkit- prefix for Safari and Chrome */

That's fine, but only if you want such rules for both Safari and Chrome.

What if you want only Safari? Or what if you want only Chrome? Or what if you want only Edge?

Why do I ask about Microsoft's Edge? Because Edge also shows up as Chrome even when I rule out Safari when considering the userAgent string. So, with AppleWebKit being present in Safari, Chrome and Edge, it takes a little work to exclusively detect for one of those browsers and not the other two. How does one do that?

Well, I wrote a simple script for these unique detections using the navigator.userAgent object. Here's the code:

<script>
// @JamesArthurJohn
usingSafariOnly=navigator.userAgent;
usingSafariOnly=usingSafariOnly.toString();
if(usingSafariOnly.indexOf('Edge')!=-1){
	/* Edge-only code here */
} else {
	if(usingSafariOnly.indexOf('Safari')!=-1){
		if(usingSafariOnly.indexOf('Chrome')!=-1){
			usingSafariOnly=false;
		} else { usingSafariOnly=true; }
	}
	if(usingSafariOnly){
		/* Safari-only code here */
	} else { 
		/* Chrome-only code here */ 
	}
}
</script>

I used the code above with modifications (set within a function to be called by a button and do alerts) to chedk to see if one is using Chrome or Safari and then to check if one is using Safari only. Click the button below to try it out:

So, there you go! You can now granularly detect between Chrome or Edge, mutually exclusively. Granted, in the future with new versions, depending on userAgent strings, this might have to be revisited.

Back to top