Gmail 网址与 iOS 和背景剪辑：文本； CSS 属性

Question

我正在设计一个 HTML 电子邮件，目标是它在电子邮件客户端和 light/dark 模式之间完全兼容。

我在这个设计系统上取得了很大进步，但我运行遇到 Gmail 处理代码的方式不同的问题，具体取决于访问它的方式。

这是在深色模式下通过 Gmail iOS 呈现的内容，看起来应该是这样。 example-1

这是通过桌面网络浏览器通过 Gmail 呈现的内容： example-2

问题：似乎背景剪辑：文本；仅支持 iOS 应用程序，而网络应用程序不支持。颜色生成为背景颜色，然后文本应剪裁背景以将颜色呈现为文本的颜色。这对于在深色模式下保持可读性是必要的，否则类型与我们品牌颜色的背景混合太多。

只有 Gmail 需要这种方法，因为其他电子邮件客户端似乎没有任何问题。

文本的 CSS 专门针对 Gmail，看起来像这样：

u + .body .gmail-text {
     background-color: #E8DDD9;
     background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
     background-size: 100%;
     background-repeat: repeat;
     color: transparent!important;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     -moz-background-clip: text;
     -moz-text-fill-color: transparent;
}

所以我的问题；有没有人想出在 gmail 的暗模式中真正定义文本颜色的解决方案？有没有办法开发这个，以便工作解决方案可以仅应用于 Gmail iOS，如果客户端是访问 Gmail 的浏览器，可以应用一组单独的属性？

非常感谢您的帮助！

Answer 1

根据“How to Target Email Clients”，以下 CSS 具体针对 Gmail iOS (10+)：

@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) { .foo }

因为它已经只针对 Gmail iOS，您可以将代码重写为：

@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
    .gmail-text {
         background-color: #E8DDD9;
         background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
         background-size: 100%;
         background-repeat: repeat;
         color: transparent!important;
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         -moz-background-clip: text;
         -moz-text-fill-color: transparent;
    }
}

Gmail 网址与 iOS 和背景剪辑：文本； CSS 属性

Gmail www. vs. iOS and the background-clip: text; CSS property

html

css

email

gmail

html-email