How to identify MS Edge Browser via css, js, UAS ..?

Question

I'm using a png with transparency as a background image, which displays fine everywhere - except in the Chromium based Version of MS Edge. I've updated MS Edge to the newest version, tested the website with the unaltered Chromium version and on different machines - the problem persists and is only occuring on the Chromium based MS Edge.

So the only workaround would be to disable the background image for MS Edge - in order to do that I would need the possibility to discern between the Chrome Browser and the Chromium based MS Edge Browser. So far I couldn't find any viable solution.

Does anyone have an idea how to target only the Chromium based MS Edge or more generally the MS Edge browser including version 79 and up? As of now I dont care if this is achieved via CSS or JS, but would prefer a CSS selector.

thanks in advance.

Let's take a step back. What exactly is the problem with the PNG? Can show a demo? — str, Mar 28 '20 at 10:50
This has been answered here -> https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser — shutupchigo, Mar 28 '20 at 11:21

score 1 · Answer 1 · answered Mar 30 '20 at 02:28

Since the new version of MS Edge is chromium, if we use the CSS method to detect the browser, the style might be also apply for the Chrome browser.

If you want to target only the Chromium Based MS Edge, I suggest you could use JS method, please check the following code:

<script>
var browser = (function (agent) {
    switch (true) {
        case agent.indexOf("edge") > -1: return "edge";
        case agent.indexOf("edg") > -1: return "chromium based edge";
        case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
        case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
        case agent.indexOf("trident") > -1: return "ie";
        case agent.indexOf("firefox") > -1: return "firefox";
        case agent.indexOf("safari") > -1: return "safari";
        default: return "other";
    }
})(window.navigator.userAgent.toLowerCase());
document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>

The new Microsoft Edge browser userAgent property as below (the userAgent contains "edg/" value):

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

How to identify MS Edge Browser via css, js, UAS ..?

1 Answers1