Targeting The New Responsive Gmail With CSS

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

Here’s the code to target both Gmail and Inbox. Mark explained this technique during the Gmail Updates webinar (at 33 minutes in). It might be worth listening to.

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.

Targeting Gmail and Inbox Separately

The CSS below allows you to target Gmail and Inbox separately. According to Mark this is because Inbox allows the section element while Gmail strips it out completely.

Usage

A key usage of this technique would be to differentiate between the iOS mail app and the Gmail app. This is because the iOS mail app supports advanced CSS such as animations as well as the :checked and :hover pseudo-classes.

Although the Gmail webmail supports the :hover pseudo-class, the Gmail Android app does not. So it might be advantageous to use the code snippets to target the Gmail client and hide elements that require interactivity and display fallback content instead.



Latest Comments
  1. 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.

  2. Harry Binswanger

    As of 1/4/17, it’s not working for me either. I have this in the head section:
    u + .body > .gmail {
    display: block !important;
    }

    and this in the body:

    [div class="gmail" style="display: none;"]THIS IS GMAIL OR INBOX [/div]
    It’s visible for all clients, not just Gmail.
    I don’t see any typos there (can’t put in angle brackets or the code disappears from the comment!)

  3. Evan

    I was having the same issue until I wrapped the divs in a section:
    [section]
    [div class="gmail" style="display: none;"]THIS IS GMAIL OR INBOX [/div]
    [/section]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">