如何用CSS hack精准区分Chrome与Edge浏览器-css教程-PHP中文网

应使用 navigator.userAgentData.brands 进行结构化检测，Edge 含 "Microsoft Edge"、Chrome 含 "Google Chrome" 且不含前者；不可用时回退 UA 字符串，优先匹配 "Edg/" 并排除 "Edg;"，再查 "Chrome/" 且不包含 "Edg/"，最后通过 JS 注入 class 控制样式。

如何用css hack精准区分chrome与edge浏览器

Chrome 和 Edge 现在都基于 Chromium 内核，navigator.userAgent 里都含 "Edg" 和 "Chrome"，纯靠 UA 字符串判断极易误判（比如新版 Edge 会同时匹配两个关键词）。真正在生产环境里稳定区分，必须放弃“只看 UA”的思路，转而结合 JS 特性检测 + CSS 媒体查询的组合策略。

用 `navigator.userAgentData` 替代老旧 `navigator.userAgent`

现代浏览器（Chrome 101+、Edge 101+）已支持 navigator.userAgentData，它提供结构化、可信赖的浏览器标识：

navigator.userAgentData.brands 是一个数组，每个元素含 brand 和 version
Edge 的 brands 中必含 { brand: "Microsoft Edge", version: "..." }
Chrome 的 brands 中则含 { brand: "Google Chrome", version: "..." }，但不含 "Microsoft Edge"
注意：需启用 Permissions-Policy: browsing-topics=() 等策略才默认可用；若不可用，回退到 UA 字符串时必须严格按顺序检测：if (ua.includes("Edg/") && !ua.includes("Edg;"))（排除旧版 EdgeHTML）→ 再查 "Chrome/" 且不包含 "Edg/"

`@supports` 检测 Edge 独有私有属性

Edge 在某些版本中曾暴露过 Chrome 不支持的实验性 CSS 属性（如旧版 Edge 对 -ms-ime-align 的支持），但这类属性已基本废弃。更可靠的是利用 Edge 对部分标准属性的**解析差异**：

Blog for Agents for Knowledge Sharing

在 AgentBlog（blog.agentloka.ai）上作为已认证 AI 代理发布博客文章，支持发布、编辑、删除、评论、浏览和阅读长篇内容。

下载

Edge 116–120（Chromium 124–126）对 @media (width >= 0px) 的解析比 Chrome 更宽松，但不可靠
真正可用的是 @supports (-ms-ime-align: auto)：仅旧版 EdgeHTML 支持，Chromium 版 Edge 和 Chrome 均不支持 → 可用来排除旧 Edge
当前最稳的 CSS 层面区分方式仍是 JS 注入 class：执行 document.documentElement.classList.add(navigator.userAgentData?.brands?.find(b => b.brand === "Microsoft Edge") ? "edge" : "chrome")，再写 .edge .foo { ... } 和 .chrome .foo { ... }

为什么不要用 `@media screen and (-webkit-min-device-pixel-ratio:0)`

这个媒体查询曾被广泛用于识别 WebKit/Blink 内核，但它在 Chrome 和 Edge 上**完全一致生效**，无法区分二者：

它本质是检测是否支持 -webkit-min-device-pixel-ratio 这个 WebKit 早期私有特性
Chromium 内核（包括 Chrome 和 Edge）为兼容性保留了该特性，返回值也相同
即使加上 and (not (-ms-accelerator: true)) 等尝试过滤，也无法奏效 —— Edge 已移除所有 -ms- 前缀特性
实测 Chrome 128 和 Edge 129 在该媒体查询下行为 100% 一致，纯属无效区分手段

真正能落地的方案就一条：JS 主动探测 navigator.userAgentData，失败时用 UA 字符串做保守 fallback（优先匹配 "Edg/"，再匹配 "Chrome/" 且确保不重叠），然后注入 body class。CSS hack 不是魔法，它只是对浏览器行为差异的被动响应；而 Chrome 与 Edge 的主动趋同，已经让纯 CSS 区分变得既脆弱又过时。