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:
-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.