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?
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:
The Edge browser userAgent:
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 safari/537.36 edge/18.17763
The Microsoft Chromium Edge Dev userAgent:
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1
The Microsoft Chromium Edge Canary userAgent:
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1
The IE browser userAgent:
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; rv:11.0) like gecko
The Chrome browser userAgent:
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/74.0.3729.169 safari/537.36
[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.