CSS 中的目标边缘 Canary

Question

要修复图像大小调整错误，我需要在 CSS 中定位 Edge Canary。

具体来说，我使用的是 Microsoft Edge 版本 76.0.151.0（官方构建）Canary（64 位）在 macOS Mojave 10.14.6

我尝试了 @supports (-ms-ime-align: auto) { } 但那不起作用。有可用的新黑客吗？

Answer 1

Microsoft Edge Canary 版本使用 chromium 引擎，因此 @supports (-ms-ime-align: auto) 无法将其检测为 Edge 浏览器。

作为替代解决方法，我建议您可以使用 window.navigator.UserAgent 检查浏览器是否为 Microsoft Edge(Chromium)，这是 JavaScript 方法。

代码如下：

<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>

浏览器代理字符串如下：

Edge浏览器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
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
Microsoft Chromium Edge Canary 用户代理：

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
IE浏览器userAgent:

mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; rv:11.0) like gecko
Chrome浏览器userAgent:

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

[注意] 如果浏览器将您的网站作为 UA 字符串覆盖的目标，您可能无法使用 userAgent 正确检测浏览器，具体取决于这些覆盖显示的内容。

CSS 中的目标边缘 Canary

Target Edge Canary in CSS

css

targeting

microsoft-edge