How to Identify Microsoft Edge browser via CSS?
I'm developing web application and I need to identify Microsoft Edge's browser separately from others, to apply unique styling. Is there a way to identify Edge by using CSS? Just like,
<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
Solution 1:
/* Microsoft Edge Browser 12-18 (All versions before Chromium) */
This one should work:
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
For more see: Browser Strangeness
Solution 2:
/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */
_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
That works great!
// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass
{
border: 1px solid brown;
}
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
Solution 3:
More accurate for Edge (do not include latest IE 15) is:
@supports (display:-ms-grid) { ... }
@supports (-ms-ime-align:auto) { ... }
works for all Edge versions (currently up to IE15).