Gmail www。 vs. ios和背景剪辑：文本； CSS属性

Question

我正处于设计HTML电子邮件的过程中，其目的是在电子邮件客户端和光/黑暗模式之间完全兼容。

我在这个设计系统方面取得了很多进展，但是我遇到了Gmail正在以不同方式处理代码的问题。

这就是在黑暗模式下通过Gmail iOS渲染的内容。 example-1

这就是通过desktop web-browser渲染的内容。 xameame-2

问题： 看来背景纸条：文本；仅由Web应用程序没有的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

根据“ 如何针对电子邮件客户端”，以下CSS目标Gmail iOS（10+）具体：

@supports（-webkit-overflow-crolling：touch）和（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;
    }
}