Browse by...
Home Resources Blog

As a bit of a follow-up to our earlier post on Gmail turning your black-colored links blue, its come to our attention that in some instances where Gmail doesn’t like a CSS property, it strips it out, as well as all inline styles surrounding it. We first came across this when a customer used box-shadow to jazz up their design… Only to find that margins, padding and more were disappearing as well. In fact, the entire style="..." attribute and contents had been removed altogether.

To work around this, we tried a little trick which has previously prevented Gmail from stripping CSS from designs, namely appending properties with !important;. For example, in the box-shadow example, we suggested using:

.codeblock {
width:92%;
display:block;
padding:20px;
overflow:none;
word-wrap:break-word;
margin-top:20px;
margin-bottom:20px;
background: #ededed;
font-size: 0.8em;
}

-webkit-box-shadow: 7px 7px 5px #000000 !important;
-moz-box-shadow: 7px 7px 5px #000000 !important;
box-shadow: 7px 7px 5px #000000 !important;

The result is that while box-shadow (and vendor-specific variants) are stripped in Gmail only, the surrounding CSS styles are preserved. As you can imagine, this means the difference between the layout displaying without a nice shadow effect and the same layout falling to pieces, devoid of all CSS. Using this technique, you can also try using other gracefully-degrading CSS3 properties without fear, too.

Thanks to Lev from Russia for pointing this out to us. We’ve observed a couple of subtle changes to how Gmail renders HTML email as of late – including rather unexpectedly supporting background-image after never doing so previously. Gmail, as opaque in its workings as it is, reminds me of one of Heraclitus’ more famous teachings – nothing endures but change. Just when we thought we knew how to safely code for email, Gmail just goes ahead and overrides our CSS, or strips it out altogether.

Has Gmail noticeably changed how it displays your HTML email campaigns? Let us know about it below.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free