Trying to make sense of Gmail CSS support (2019 edition)

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.

What’s new

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.
  • And then you’ve got amp4email in Gmail’s desktop webmail. To me, the biggest surprise was that amp4email not only brings JavaScript functionalities into emails, but it also brings an entire new set of supported CSS features. Pseudo-classes, flexbox, CSS grid, 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/html version. (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.

Gmail CSS support in 2019

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 repeat(), fit-content() or minmax() are not supported for the grid-template-columns and grid-template-rows properties.

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.