What is the correct way to detect new Microsoft Edge v80 (Blink) via Javascript?

Question

As latest version of Microsoft Edge is out and uses Blink - what is the correct way to differentiate Old Edge from New Edge one with javascript?

Currently I plan to look into navigator.userAgent to check for older versions of Edge (up to 18)

const isOldEdge = /edge\/([0-1][0-8]|[0-9]\D)/.test(navigator.userAgent.toLowerCase());

Is this correct way to detect it?

It is usually better to detect features instead of versions. What are you trying to achieve with that? — str, Feb 12 '20 at 10:28
currently I'm styling html5 range input that has gradient track and `Old Edge` requires another approach as it doesn't allow to style the full track (only separate parts before and after thumb). not sure how to test this feature — godblessstrawberry, Feb 12 '20 at 10:45
You can probably test that with [CSS feature queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries). — str, Feb 12 '20 at 11:04
@str I need to test for selectors `::-ms-fill-lower {...}` & `::-ms-fill-upper`, not features - I dont think this will help here. I can test for specific features support to determine I'm in Old Edge but that seems to be less obvious and more fragile — godblessstrawberry, Feb 12 '20 at 12:43
For that you could use a linear gradient that "moves" based on the current range input value. That would work cross-browser, including old versions of Edge. — str, Feb 12 '20 at 14:20
@str thats what I'm doing - I want to draw absolute `
` with `linear-gradient` only for old edge - for new browsers I paint the `track` itself — godblessstrawberry, Feb 15 '20 at 08:40
I've suggested a feature-detection method here https://stackoverflow.com/a/61822728/548664 — Party Ark, May 15 '20 at 15:53

score 8 · Accepted Answer · answered Feb 13 '20 at 01:18

I suggest you use window.navigator userAgent to check whether the browser is Microsoft Chromium Edge or MS edge (EdgeHtml).

The Edge (EdgeHtml) browser userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 edge/18.18362

The Microsoft Chromium Edge userAgent:

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/80.0.3987.87 safari/537.36 edg/80.0.361.50

Sample code:

<!doctype html>
<html>
<head>
<title>Test demo</title>
</head>
<body>
<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "MS Edge (EdgeHtml)";
            case agent.indexOf("edg") > -1: return "MS Edge Chromium";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "Internet Explorer";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML =  "This is " + browser + " browser." + "<br><br>" + window.navigator.userAgent.toLowerCase();
</script>
</body>
</html>

Output in MS edge (EdgeHtml) browser:

Output in MS edge Chromium browser:

Reference:

How to detect Microsoft Chromium Edge (chredge , edgium) in Javascript

yeah I noticed that `edge/edg` difference but I want to be more specific thats why I use versions in regexp - do you think its safe to rely on `edge/edg`? tomorrow it might be changed back to `edge` I guess — godblessstrawberry, Feb 15 '20 at 08:40
at present, there is no news that edg will get replaced with edge in user agent string. So you can use it to identify the chromium Edge browser. — Deepak-MSFT, Feb 17 '20 at 08:25

What is the correct way to detect new Microsoft Edge v80 (Blink) via Javascript?

1 Answers1

Linked