Gmail Now Supports display: none;: What It Means for Your Email Designs

[ 0 By

Gmail is responsible for many headaches among email developers. Its lack of support for many CSS properties—including the lack of support for the <style> tag in the <head> of an email—has given rise to the collective sighing of email developers all over the world. Coding email is hard, especially for Gmail.

But on Aug. 31, 2016, email geeks around the world noticed a big change happening in Gmail. It began supporting the CSS property display: none;.

What is display:none; ?

display:none; is a CSS property that hides specific elements of your email. For example, display:none; can be used to hide preheader text that you want to use to control what preview text appears in the inbox, but that you don’t want to have displayed in the body of an email. Or it can be used to control desktop-specific content you’d like to hide when your subscriber opens on a mobile device.

Try Litmus

Preview your emails in Gmail

See how the changes in Gmail affected your design. Instantly preview your email in Gmail—and 50+ other email clients—with Litmus.

Try Litmus free →

 

Gmail, however, has not supported the use of display:none; in the past, causing lots of frustration in the email community.

In the past, in order to make preheader text disappear from the body of an email in Gmail, email designers had to use one of the following workarounds:

  • <div style=”max-height: 0px; overflow: hidden;”></div>
  • <div style=”width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow: hidden;”></div>
  • <img style=”width: 0px; height: 0px;” />

Setting up those workarounds and overwriting the styling for other clients that may not support those CSS properties becomes incredibly time consuming, and can sometimes add hours to your development and testing time.

Now, it looks like things have changed—and this might be the biggest news for email designers this year.

Gmail now supports display:none;

As some attentive email geeks found out this week, Gmail supports the use of display:none; on all important HTML elements we’ve tested, including:

  • <div>
  • <img>
  • <a>
  • <table>
  • <input>

Don’t believe it before you see it? We didn’t either. So here’s a code example with screenshots for you to check out:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gmail display: none;</title>
<style>
  @media screen and (max-width: 2000px) {
    * [summary~="hide"] {display:none;}
  }
          
</style>
</head>
<body>

<div style="display: none;">I will not show</div>
      
<div class="hide" summary="hide">I will not show in Gmail.com webmail accounts</div>
      
<a href="https://litmus.com" style="display: none;">I will not show</a>
      
<img src="http://pages.litmus.com/l/31032/2015-06-30/3kn7qh/31032/63832/litmus_logo_white.png" style="background: black; display: none;" width="130" height="48">
      
<table style="display: none;">
  <tr>
    <td>I will not show</td>
  </tr>
</table>
      
<input type="checkbox" style="display: none;">

</body>
</html>

The change was rolled out to the entire family of clients, including Gmail, Google Apps, and Inbox by Gmail.

display: none; Support in Gmail

check-green

Gmail (@gmail.com addresses in Chrome/Firefox/Explorer)

check-green

Google Apps (Chrome/Firefox/Explorer)

check-green

Inbox by Gmail (Chrome + Firefox)

check-green

Inbox by Gmail (iOS/Android)

check-green

Gmail App (iOS/Android)

What hasn’t changed is that Gmail still lacks support for CSS classes or IDs, which means you’ll still have to inline any CSS and move all styling information—including the display:none; property—into the body of your HTML email.

Other Implications

As with any change in CSS support in an email client, the support of display:none; in Gmail has a couple of interesting repercussions:

Hack to control font scaling for Gmail iOS app

On the iOS version of the Gmail app, automatic font scaling was a real problem. Font sizes would be scaled up, causing emails to look broken in the app. A hack was introduced to stop this from happening:

<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>

As display:none; is now supported in Gmail (including the iOS app) this hack no longer works, breaking hundreds of emails once again! There is a fix—simply remove or move the display:none; out of your inline CSS to embedded CSS. Justin Khoo from Fresh Inbox wrote about this fix here.

Hide elements with attribute selector hack (including media-queries!)

While Gmail doesn’t generally support CSS in the <head>, some CSS selectors do work, notably lang and summary for @gmail.com addresses only. For example:

* [summary~="foo"]{ {display:none;} }

This can be used to target elements in HTML that will work in Gmail too:

<div summary=”foo”>I will not display (even in Gmail)</div>

Now that Gmail supports display:none;, you could use it in combination with a media query to hide content in Gmail webmail:

@media screen and (max-width: 600px) {
    * [summary~="hide"] {display:none;}
}

<div summary=”hide”>I will not display when width is 600px or below</div>

Ideas for what to do with all the time you’re not fixing Gmail

Now that you’ll spend so much less time developing and troubleshooting your emails, what will you do with all the free time you’ll now have available? Here are some suggestions:

  • Keep your fingers crossed that this change is permanent
    Sometimes inbox providers test out changes to their rendering engines, but can roll back changes at any time. Let’s hope they will never ever take away this one. Why not tweet at them and let them know how much we appreciate the change?
  • Load up Litmus’ Snippet Library
    With all of your new display:none; Gmail hacks.
  • Read a book
    It’s okay if it’s one about email though. Here’s our recommendation.
  • Test, test, and test some more
    Continue testing every email you send because email clients will continue to roll out unannounced changes like this in the future.

Preview your emails in Gmail

How did these changes impact your email designs? Use Litmus to instantly preview your email in Gmail—and 50+ other email clients—to ensure your designs are displaying as intended.

This update from Gmail is a prime example of how email clients make support changes without notifying the email community. Always be sure you’re putting your best email foot forward. Test every email before every send.

Try Litmus free →