Targeting The New Responsive Gmail With CSS [Updated]

Posted in CSS Help, Email Resource by Justin On September 19, 2017. 18 Comments

Update 9/18/2017: Gmail made a change that requires some changes to targeting techniques. See updates below.

The new Gmail update with responsive email support has been a blessing for email designers everywhere.

However the update also creates a few issues for those of us that are interested in pushing the envelope with advanced CSS. This is because it is now harder to use CSS to distinguish Gmail that doesn’t support advanced CSS3 like interactivity and animations from clients like the iPhone email client that does.

Thankfully, uber email developer Mark Robbins from Rebelmail came up with a solution that allows you to apply a set of CSS that is only active within Gmail and Inbox.

Targeting Gmail

Update: Gmail made some changes on Sept 18, 2017 which affected the techniques used to target the clients. However, Mark Robbins from Rebel quickly came to the rescue. The following has been updated to target Gmail post 9/18.

Here’s the code to target all Gmail and Inbox versions (Webmail, iOS, Android).

<!DOCTYPE html>
<html><head>
<style>
    u + .body .gmail{
        display:block !important;
    }
</style>
</head>
<body class="body">
  <div class="gmail" style="display:none;">
    THIS IS GMAIL OR INBOX
  </div>
</html>

<!DOCTYPE html>

<style>

u + .body .gmail{

display:block !important;

}

</style>

</head>

THIS IS GMAIL OR INBOX

</div>

</html>

In order to implement this technique your markup must contain
1) A DOCTYPE.
2) A body with a class name (ie. “body”)
3) An element with a class name (ie. “gmail”)

What happens is Gmail converts the doctype to <u></u> elements and places it adjacent to the body container (transformed into a div with classname body). Since Gmail is the only client that does this, you are able to target Gmail using the CSS in the code block above.

Shortcut

Cosmin commented below that you can use a shortcut that does not require adding a class to the body of your email. However this technique requires that you NOT use the <u> tag anywhere in your email content.

<!DOCTYPE html>
<html><head>
<style>
    u ~ div .gmail{
        display:block !important;
    }
</style>
</head>
<body>
  <div class="gmail" style="display:none;">
    THIS IS GMAIL OR INBOX
  </div>
</body></html>

<!DOCTYPE html>

<style>

u ~ div .gmail{

display:block !important;

}

</style>

</head>

<body>

THIS IS GMAIL OR INBOX

</div>

</body></html>

Targeting Gmail on Android Only

The CSS below allows you to target Gmail on Android (excludes Inbox).

<!DOCTYPE html>
<html><head>
<style>
    div > u + .body .gmail{
        display:block !important;
    }
</style>
</head>
<body class="body" >
  <div class="gmail" style="display:none;">
    THIS IS GMAIL ON ANDROID
  </div>
</body></html>

<!DOCTYPE html>

<style>

div > u + .body .gmail{

display:block !important;

}

</style>

</head>

THIS IS GMAIL ON ANDROID

</div>

</body></html>

Shortcut

Like the generic version, you can use a shortcut that does not require adding a class name to the body as well.

    div > u ~ div .gmail{
        display:block !important;
    }

div > u ~ div .gmail{

display:block !important;

}

(Originally posted Oct 8, 2016. Updated Sept 19, 2017)

Latest Comments

December 21, 2016

Tom

This is nifty and all, but I can’t get this working in any Gmail apps for iOS or Android (unless Email on Acid results are acting up).

It’s working for Gmail web client though – am I missing something? Wish the Gmail Apps just worked normally post Gmail media query ‘fix’. Grr.

Reply
January 17, 2017

MrMeow

This is working for me in gmail – with the use of the section tags, miss these out and it won’t work.

I’m struggling to target the inbox app now though :/

Will post with any update.

Reply
April 30, 2017

Cosmin

I have a scenario where the ESP will replace my body tag with a ‘default’ one, meaning any class I add to it will be removed.
So I was trying to get around this somehow, and found that you can use a sibling selector instead of applying a class to the body:

u ~ div .stuffIWantToTargetInGmail {display: none;}

1

u ~ div .stuffIWantToTargetInGmail {display: none;}

Currently, Google replaces your tag with a div, while preserving the attributes. A is inserted before this div, and the ~ sibling selector is supported, so you can easily target without relying on the body tag class.

Tested in Gmail and Inbox on iOS 10, as well as Gmail on Android 6 & 7.

Reply
- April 30, 2017
  
  Cosmin
  
  Some of the code went missing in my reply, so I’ll rewrite:
  
  Currently, Google replaces your body tag with a div, while preserving the attributes. A u tag is inserted before this div, and the ~ sibling selector is supported, so you can easily target without relying on the body tag class.
  
  Reply
September 27, 2017

AJ

Hello, does this only work with HTML5 or can I still use the transitional doctype?

Reply
- October 1, 2017
  
  Justin
  
  I believe this works as long as you have a doctype.
  
  Reply
October 18, 2017

Stanislau

Faced about the same issue with hamburger menu on responsive emails. till :checked rules does not work i was forced to use fallback for gmail/inbox apps.
Common u + … does not work in my code.

Not sure where is the problem, but this code worked for me:
.class {
styles for gmail (show, hide etc.)
{

.class:not(:checked) {
styles for all other browsers
}

Reply
December 7, 2017

al

Is there a way to target the iOS gmail specifically? I’m utilising an iOS system font in an eDM which renders on iOS but not Android so I need to have separate stylings depending on which application is being used.

Reply
December 16, 2017

David Vielhuber

Warning: This does not work for GANGA (Gmail Android with a Non Gmail Account)

Reply
December 18, 2017

John

I’m with al. How can you target just Gmail on iOS? I’ve tried the @supports “(-webkit-overflow-scrolling:touch) and (color:#ffff)” trick and it doesn’t seem to work.

Reply
- December 31, 2017
  
  Justin
  
  Hey John,
  Unfortunately I don’t know a technique that will just target Gmail on iOS.
  
  Reply
January 12, 2018

Sean

I’ve found that I can only get this to work if I remove media queries from the <head> (which is obviously not a practical solution). Even if the media query doesn’t affect any of the same elements or devices, it still seems to interfere with gmail-specific targeting. Has anyone else noticed this? I’d appreciate any insight.

Reply
- January 12, 2018
  
  Justin
  
  Gmail is notorious about removing all CSS in the style tag if it finds any CSS errors. Perhaps there was something in the media query that it didn’t like? I’ve found that Gmail also doesn’t like @support as well as @ declarations that are nested in other @ declarations, but I’ve found that media queries in general don’t cause issues with this hack.
  
  Reply
  - January 16, 2018
    
    Sean
    
    Thanks, Justin, this was very helpful. I had no idea that gmail stripped all head styles when it ran into something it didn’t like. I usually make fluid-hybrid templates, so media queries tend not to be much of an issue for me, but in this case I was using @keyframes for some fun animation on mobile. It’s good to know that @ {@} is not supported. Putting unsupported styles in a separate style tag resolved the issue.
    
    Reply
June 25, 2018

Michael

Can anyone confirm if this still works? I’ve been trying and nothing seems to work. I’m currently working on an email signature that will not appear correctly in the gmail app and I just want to display a plain version of it.

Reply
September 20, 2018

Justin L

I tried the code snippet in this article.
Gmail does not seems to be prepending the tags to the element anymore.
I see that gmail adds a empty div with class name “adM” instead. Any new ideas to target gmail with css?

Reply

FreshInbox

Targeting The New Responsive Gmail With CSS [Updated]

Targeting Gmail

Targeting Gmail on Android Only

Leave a Reply Cancel reply