93

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?

Community
  • 1
  • 1
maxhungry
  • 1,863
  • 3
  • 20
  • 28
  • 2
    Similar question: http://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-by-css – Raptor Oct 05 '15 at 06:10

1 Answers1

204

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.

Raptor
  • 53,206
  • 45
  • 230
  • 366
  • 1
    Neither is working for me in Edge 81 on Windows 10. Here's what I'm trying to apply: `.tb-product-loop-wrap.grid-view.shop-columns-3 ul.products li.product { width: 30%; }` – Zade Apr 25 '20 at 04:06
  • 1
    @Zade: Edge versions > 44 have switched to use Blink (Chrome's rendering engine) internally. They should behave the same as Chrome. – Sean McMillan Nov 10 '20 at 14:38
  • should be starting from version 79: https://en.wikipedia.org/wiki/Microsoft_Edge – Raptor Nov 11 '20 at 02:00
  • annoyingly, I am on Edge 91 and its rendering an SVG 1px different to Chrome on the same machine.... – James Cat Jun 01 '21 at 16:35