Gmail Announces Support for Embedded Styles and Media Queries
Gmail has long been a thorn in the side of email developers everywhere. This client's lack of support for embedded CSS (in the <head> of an email) has been the main reason that all styles must be inlined before sending. This has led to the popularity of tools like our CSS Inliner and by extension to thousands of extra characters and untold code bloat, as well as increased complexity maintaining email code that's already been inlined.
No longer! Gmail is about to make a major update to how their email client handles code. Read on to find out what changes will be made and how it might affect your emails.
What changes will be made?
Justin Khoo and I took a look at the changes Gmail listed and what they're going to mean for email devs.
Gmail will support embedded styles
That's right! Gmail previously only supported embedded styles in its webmail version. Because they stripped all classes and IDs, though, this support didn't do a whole lot for email devs. We'll get into more detail as you read, but for now you can just bask in the joy of email developers worldwide.
Gmail will support classes and IDs
This is huge. This means that we can stop using inline styles for every single thing in email. You can use a class instead, and a single update to that class in the head will affect every instance of that style. Like real web development.
Gmail will support media queries
Combined with support for embedded styles and classes/IDs, this is fantastic news. This means that responsive emails (emails built with media queries that trigger at certain breakpoints) should now render properly in Gmail.
Previously, we had been huge fans of the hybrid fluid technique because it enabled developers to create emails that adapted to any screen size, regardless of media query support. So does the Gmail update mark the death-knell of hybrid fluid? Probably not quite yet. Hybrid fluid is still the only way to get responsive email in some mobile apps, and may work better in some international clients.
Gmail will support background-position and background-size
These properties can really add some flexibility to email designs. Unfortunately, Outlook.com only supports the table background attribute and not background CSS so the impact is muted. But it will be fun to experiment with responsive backgrounds in the Gmail app!
Animations, transitions and transforms won't be supported
Sadly, some of the techniques we've recently covered (like our two part CSS animations in email blog) won't work in Gmail. As far as I'm concerned, animations are just "gravy" for the user, and not a must-have like media queries and embedded styles. Hopefully Gmail will add support for these innocuous and fun techniques some time soon.
What we don’t yet know
Will Gmail still auto-resize your content?
Although the announcement did not mention it, we're hoping that Gmail does away with the annoying and troublesome resizing of font and content.
You can almost hear the collective sigh of relief from email devs everywhere. Now that media queries are usable, it’s most likely that you’ll no longer need to use the Gmail non-breaking space fix as pioneered by Justin Khoo. Instead, you can use the power of media queries to make your email adapt to mobile the way you really want it to!
Will attribute selectors be supported?
Attribute selectors are widely used in media queries due to the (now fixed) media query bug in Yahoo! Mail. If Gmail does not support attribute selectors, emails with attribute selectors will still not be responsive in Gmail.
Either way, if you're still using the old attribute selector hack for Yahoo! Mail (to prevent it from rendering your media queries on desktop), you should take those out! In March of 2015, Yahoo! Mail updated their client to handle media queries properly, so it's no longer needed.
Will Gmail still convert CSS height to min-height?
Unless this gets fixed along with what they have announced, it might cause problems for responsive images in mobile. This is because many emails are coded with height and width attributes and are then overridden in the CSS styles to make responsive. For example:
<img src="https://....png" width="600" height="200" style="display:block;width:100%;height:auto;">When height:auto is converted to min-height:auto, it no longer overrides the height attribute and results in a variable width but fixed height image in mobile. That can look really bad!
Will pseudo classes be supported?
Pseudo classes include things like :hover and :checked, and are widely used for interactive email. It would be a shame if Gmail supported embedded styles and lost support for interactive email.
What do these changes mean for you?
Mostly great things! You should now be (mostly) free to use responsive email templates.
Here are a few things you can may want to do as we prepare for the big update:
- You can use media queries!
- You can use embedded styles, including classes and IDs, to style your emails!
- Follow our blog for the latest updates in Gmail. We'll write an in depth report once Gmail's changes are live!
Start testing today
Changes like these are what make it so hard to stay up-to-date on your email code. Start testing with Email on Acid today and make sure your emails look perfect in every inbox.
