How to Identify Microsoft Edge browser via CSS?

CssBrowserMicrosoft Edge

Css Problem Overview


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]-->

Css Solutions


Solution 1 - Css

/* 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 - Css

/* 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 - Css

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).

Solution 4 - Css

For Internet Explorer 

@media all and (-ms-high-contrast: none) {
		.banner-wrapper{
			background: rgba(0, 0, 0, 0.16)
		 }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
			background: rgba(0, 0, 0, 0.16);
		 }
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSameera LiyanageView Question on Stackoverflow
Solution 1 - CssKittMediaView Answer on Stackoverflow
Solution 2 - CssCodeGustView Answer on Stackoverflow
Solution 3 - CssmatureView Answer on Stackoverflow
Solution 4 - CssPriya NayakView Answer on Stackoverflow