By Justin Khoo
Update: Here’s an article that goes into a bit more detail: Make your email interactive in Gmail by using CSS attribute selectors.
Will you be surprised to hear you can actually put CSS including pseudo-classes like :hover in a <style> block and have them work in Gmail? Well as I found out recently, you can!
Before we start, I want to make it clear we’re talking about the Gmail webmail client and not the Gmail mobile apps – which sadly still lack any support for the <style> tag.
Email designers have always complained that Gmail’s lack of support for embedded styles (CSS within the <style> tag) has forced them to “inline” CSS in order for emails to look great in Gmail. Since pseudo-classes such as :hover cannot be inlined, it is believed that Gmail cannot be made to display interactive goodies such as Rollover Images. Hence, the @Gmail #CanHasStyle campaign earlier this year to push for wider embedded CSS support within Gmail.
Gmail Webmail #HasStyle?
Earlier this year the folks at Email on Acid noticed that Gmail actually allows the <style> tag in the head. The problem was that Gmail strips elements of class and id attributes. So even if your embedded styles contain id and class selectors (#id and .class), it would not match any elements in the body of the email.
However, after a fair bit of sleuthing I’ve found out that there is a method to simulate class attributes and that is by using other attributes that Gmail does not strip – one of which is the title attribute.
In addition, I also discovered that although Gmail is very strict on single selectors, it is surprisingly lenient on descendent selectors. And just by adding a universal (*) selector before your style, you can get around the strict restrictions.
This markup will display a hoverable box that changes color in Gmail:
I’m still exploring this rabbit hole so stay tuned for more… ☺
PS: Gmail, if you’re reading this, I’d like to say that this technique is not meant as sneaky exploit but as a means to allow us designers to do what we’ve always been able to do with other email clients – yes, including that notorious Microsoft desktop client that is dead to us #WhatIsDeadMayNeverDie. So if you decide to patch this “feature,” I’d implore you to at least give us class attributes… and perhaps consider adding that support to the Gmail mobile apps as well!
Justin Khoo's original article can be seen in full on his blog, FreshInbox.com