如何实现根据邮件客户端或网页浏览器查看场景应用条件CSS

不存在你所说的适配所有主流浏览器的通用CSS条件注释语法，这类条件注释是旧版IE的私有实现，其他主流浏览器从未支持对应规则，微软也从IE10版本开始正式废弃了这一特性。

如果你的核心需求是区分浏览器和邮件客户端，给两类环境加载不同样式，可以参考以下可行方案：

• 反向注释包裹：优先编写适配邮件客户端的通用样式，再用<!--[if !mso]><!-->标签包裹仅需要在浏览器中生效的样式。非MSO内核的邮件客户端不会识别这段注释包裹的内容，也就不会应用里面的样式，主流浏览器则会正常读取样式规则。
  示例代码：

<!--[if !mso]><!-->
<style>
  /* 此处仅写浏览器侧专属样式 */
  body {
    padding: 2rem 5%;
  }
</style>
<!--<![endif]-->

• @supports特性检测：绝大多数邮件客户端都不支持CSS的@supports规则，而所有主流浏览器的现代版本都完整支持该特性。你可以将浏览器专属的样式统一放在@supports规则块内，即可实现仅浏览器生效的效果。
  示例代码：

@supports (display: grid) {
  /* 仅支持grid布局的环境生效，覆盖所有主流现代浏览器 */
  .content-box {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
  }
}

• JS动态注入样式：所有主流邮件客户端都默认禁止执行JS代码，你可以把浏览器专属的样式通过JS动态插入到页面中，只有浏览器环境会执行这段逻辑加载对应样式。

内容的提问来源于stack exchange，提问作者Gareth