How to target Microsoft Edge with CSS?

css browser-detection microsoft-edge
maxhungry picture maxhungry · Oct 5, 2015 · Viewed 78.7k times · Source

I would like to target Edge and have flexbox behave simliar to Firefox 33 / Chrome, for more detail see this question.

Can one target Edge in CSS?

Answer

Raptor picture Raptor · Oct 5, 2015

To target Edge (version < 79), we can check for -ms-ime-align support, Edge being the only Microsoft browser that supports this property:

@supports (-ms-ime-align: auto) {
  .selector {
        color: red;
  }
}

Or this one-liner (that one works on Edge and all IEs also):

_:-ms-lang(x), .selector { color: red; }

Further explanation, including variants to support specific versions of Edge, can be found in this article.

For Edge version > 78, since its rendering engine (browser engine) changed to Blink, which is the Chrome's rendering engine, it should behave like Chrome.

Related questions

How to write specific CSS for mozilla, chrome and IE

What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome. If IE #container { top: 5px; } If Mozilla #container { top: 7px; } If Chrome #container { top: 9px; } What would be the respective 'If's' ?

Read More
Show a message if the browser is not internet explorer 9 or greater

I would like to show my users a bar that looks like this, if: Browser is not IE; or Browser is IE but is version 8 or earlier (Note that the screenshot is just for illustration - IE 9 is supported for …

Read More
How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

How should browser detection be done now that jQuery 1.3 has deprecated (and I'm assuming removed in a future version) $.browser.msie and similar? I have used this a lot for determining which browser we are in for CSS fixes for …

Read More