Google announced a long-awaited improvement in CSS support for Gmail and Inbox by Gmail. Support for the <style> tag and media queries will be added later this month, plus more.

This is huge news for every email designer and is likely to change the way that people code their emails, as well as influencing their workflow.

What does this mean for email designers?

Media queries will soon become the standard

Many emails were using media queries in order to shape the content for mobile devices. Gmail strips the <style> tag from the <head> resulting in media queries not being supported. This resulted in many email developers experimenting with various techniques in order to achieve responsive layouts in Gmail App.

By the end of this month you will be able to use this code in Gmail and Inbox by Gmail.

<html>
  <head>
    <style>
    .my-class {
      width: 300px;
      font-size:24px;
     }

     @media screen and (min-width: 500px) {
       .my-class {
         width: 100%;
         display: block;
         font-size: 14px;
       }
     }
    </style>
  </head>
  <body>
    <div class="myClass">
      Some dummy text
    </div>
  </body>
</html>

Documentation for CSS support

Another big change for email developers is that Google now documents their CSS support in an online reference. This is the first time that a major email client has published official CSS and HTML support documentation. Most email developers have been relying on experiments to determine what works and what doesn’t. We encourage you to spend some time and check all the new properties.

No more CSS inlining

Gmail required the styles to be inlined, otherwise the styling would not apply. With this update email designers will no longer be required to inline css since they will be able to add their CSS directly inside the <style> tag inside the <head> of the email.

Less hacks

The improved CSS together with the documentation provided by Gmail is certainly a step in the right direction. Email developers can stop experimenting with hacks and spend more time on designing a great experience for consumers and be creative.

We are very excited about these changes as we have been working on a new feature within our Drag and Drop editor, which will give our users the ability to show and hide content on mobile devices. This feature is due to be released soon so stay tuned.

hideonmobile