Industry News
Gmail Announces Support for Embedded Styles and Media Queries
Industry News
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.
Justin Khoo and I took a look at the changes Gmail listed and what they’re going to mean for email devs.
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.
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.
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.
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!
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.
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!
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.
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!
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.
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:
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.
