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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
10 thoughts on “Gmail Announces Support for Embedded Styles and Media Queries”
Comments are closed.
The main thing I want to know, will this be an update that requires a new app, or will it be server-side?
humulos,
Most likely this will be pushed out as an update to the apps.
Hi Geoff, this is really great news! I jumped right in and I started testing some responsive emails. While don’t break anymore, they display the desktop layout instead of mobile responsive.
Looking at the Google page with the announcement it looks like they already released the update and the emails should display responsive. Judging by the wording they used it makes me think it’s all rolled out.
Is it working for you guys?
Do you know when the change is expected to go live? Thank you!
Vic Dinovici and Miquel,
Despite the wording of the announcement, this change hasn’t been made live yet. We expect it to go live within the next week or so, bit there’s no way of knowing for sure.
When it does go live, we’ll add an update to the blog to let you know.
Sounds good Geoff, please keep us posted. Thanks.
Does this include the App is the big question! It’s all very well including them on the website, but that app is surely more prevalent on mobile phones.
Hey, some time has passed already. I am still having a lot of trouble with the Gmail App concerning media queries and auto-resize.
Can anybody tell me, if the update is still released yet, or are we still waiting, months after the announcement?
seimo201608 At this point I have seen the update functioning on Gmail Web, the Android app and the iOS app, so the update should be completed. What operating system are you using, and if applicable, which browser with version or app with version?
That’s good news, but how come when I do my email tests on EmailOnAcid my media queries aren’t displaying correctly for the Gmail App iOS 7 screenshot? It displays fine everywhere else.
@media only screen and (max-width:600px)
{
table[class=”column-container”]
{
width:100% !important;
}
}