I wrote about Gmail CSS support in 2016, quickly followed a few months later by an update following Gmail’s big responsive update. I tweeted another update in 2018. But I feel a proper article about it is long overdue. So here’s what I understand about Gmail CSS support that has changed since 2016.
While there wasn’t a single update as big as the 2016 responsive update, Gmail’s updates have been adding up. Here are the three most significant updates of Gmail regarding HTML and CSS support.
- iOS now also allows for third party accounts. This used to be an Android only feature, nicknamed GANGA by the email geeks community (for Gmail Android with Non Gmail Accounts). We only had to slightly alter the acronym’s signification (to Gmail Apps with Non Gmail Accounts) but the subpar CSS support lives on.
- Speaking of GANGA, those versions now support background images.
filter… The other surprise (to me) is that AMP emails in Gmail can only be displayed for 30 days after being received. After that, Gmail will fall back to the
text/htmlversion. (My guess is that this is a security measure to avoid expired domains used by dynamic emails being exploited long after an email has been sent.) If you haven’t yet, take a look at Gmail AMP for email playground and have fun.
Making sense of it all
Here’s an updated version of my diagram.
Here are two points worth noting:
- The mobile webmail is now the only one at level 2. Three years ago, almost every version of Gmail was at that level. This is perhaps a good proof of how slowly but surely, HTML and CSS support is getting better in Gmail.
- Even though the level 4 officially supports CSS Grid properties, my testing shows that functions like
minmax()are not supported for the
My conclusion from my earlier articles still stands : if you have a CSS problem in Gmail, it is very important to know which version of Gmail you’re talking about. And even though Gmail’s CSS support is getting better across the board and through the years, Gmail can still be very picky about any typo or unusual stuff in your styles and remove an entire
<style> tag or inline
style attribute. My guide for troubleshooting Gmail’s responsive design support still stays pretty relevant.