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

I am in the middle of designing an HTML email, with the goal of it being fully compatible across email clients and light/dark mode.

I have made a lot of progress with this design system but I am running into issues where Gmail is handling code differently depending on how one accesses this.

This is what is rendered through Gmail iOS in dark mode, as it should look. example-1

This is what is rendered through Gmail through a desktop web-browser: example-2

The problem: It seems that the background-clip: text; is only supported with the iOS app where the web app isn't. The color is generated as a background color where the text should then clip the background to present the color as the color of the text. This is necessary to retain readability in dark mode, otherwise the type blends far too much with the background which is our brand color.

This method is only necessary for Gmail as other email clients do not seem to have any problem with these.

The CSS for text targets Gmail specifically and looks something like this:

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

So my questions; Has anyone figured out a solution to truly defining text color in gmail's dark-mode? Is there a way to develop this so that the working solution can be applied to ONLY Gmail iOS, where if the client is a browser accessing Gmail a separate set of attributes can be applied?

Thanks so much for your help!

CodePudding user response：

According to "How to Target Email Clients", the following CSS targets Gmail iOS (10 ) specifically:

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

Since it already targets only Gmail iOS, you could rewrite your code as:

@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;
    }
}