cssmicrosoft-edgetargeting

Target Edge Canary in CSS

To fix an image resizing bug, I need to target Edge Canary in CSS.

Specifically, I am using Microsoft Edge Version 76.0.151.0 (Official build) Canary (64-bit) on macOS Mojave 10.14.6

I tried @supports (-ms-ime-align: auto) { } but that doesn't work. Is there a new hack available?

Solution

  • The Microsoft Edge Canary version using chromium engine, so the @supports (-ms-ime-align: auto) can't detect it as Edge browser.

    As an alternative workaround, I suggest you could use the window.navigator.UserAgent to check whether the browser is Microsoft Edge(Chromium), this is a JavaScript method.

    Code as below:

    <script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
            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 Browser Agent strings as below:

    [Note] If your site is being targeted for UA string overrides by the browser, you may not be able to use userAgent to detect the browser correctly depending on what those overrides show.