Update Oct, 2016: Believe it or not, Gmail finally supports <style> AND media queries!

Dear Gmail,

Thank you for all the wonderful new innovations in Gmail over the past year: Action Buttons, Related Google+ Page Widget, Inbox Tabs and most recently Grid View. They’re all very exciting for us email geeks.

However, the lack of <style> tag (embedded CSS)* support in Gmail is a real pain for email developers and designers. All modern email clients have long supported it including Yahoo! Mail and Outlook.com.

Without embedded CSS, developers need to painstakingly inline our CSS and we are not able to use modern techniques to make our emails mobile responsive and interactive as well. This means emails rendered in the Gmail app doesn’t look as good as it should.

Interactive Emails?

Yup! See, within style tags, we can use CSS pseudo-classes and sibling selectors. And with pseudo-classes and sibling selectors we can make this:

The widget above is an interactive image carousel. And it *already* works inside Yahoo! Mail and Outlook.com. Without Javascript. Without Plugins. (Here’s how its done). Go ahead and send yourselves a copy and try it out (you do have a Yahoo! Mail account right?). In fact the carousel even works in the Android email client!

Here are a few more examples of cool stuff that can be done with embedded CSS in email. Without embedded CSS, emails in Gmail look static… and boring. And boring is bad.

As developers and email designers we hope you understand why this change is necessary.

So Gmail, #CanHasStyle?

Yours,
An Email Geek
Justin Khoo
FreshInbox