Detecting Safari Only Or Chrome Only Or Edge Only

Jamie Johnson

August 15, 2017 with January 18, 2019, update

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.

---

January 18, 2019, Update!
Safari-only CSS
and
Edge-only CSS!

At https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/, Jeff Clayton shows CSS-only rules for Safari only and even for particular versions of Safari.

I came across this as Safari didn't like text-decoration: underline dashed;. I applied Jeff Clayton's code and came up with my own to accomplish the same effect. So, you can customize it for whatever you need where Safari takes exception.

The same is true for Microsoft Edge. Thanks to KittMedia's response at https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css, Edge-only CSS is available, too.

Here's the code:

/* The below Safari-only hacks thanks to https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/ */
/* Safari 7.1+ */
 _::-webkit-full-page-media, _:future, :root a.dashed {
	 text-decoration: none;
	 border-bottom: 1px dashed black;
}
/* Safari 10.1+ */
 @media not all and (min-resolution:.001dpcm) {
	 @media {
		 a.dashed {
			 text-decoration: none;
			 border-bottom: 1px dashed black;
		}
	}
}
/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */
 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	 @media {
		 a.dashed {
			 text-decoration: none;
			 border-bottom: 1px dashed black;
		}
	}
}
/* Safari 6.1-7.0 */
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
	 a.dashed {
		(;
		 text-decoration: none;
		 border-bottom: 1px dashed black;
		 );
	}
}

/* The below Edge-only hack thanks to KittMedia's response at https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css */
@supports (-ms-ime-align:auto) {
    a.dashed {
        background: yellow;
    }
}

So, in Safari only, the below link will have a dashed underline and in Edge only, it will be highlighted in yellow:

Back to top