Gmail Please Fully Support The Style Tag #CanHasStyle

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:

Google


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






* Technically Gmail supports the style tag, but strips class and id selectors from elements, making the support moot – but you can style tables!


Latest Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">