{"id":829,"date":"2014-08-13T09:00:52","date_gmt":"2014-08-13T09:00:52","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=829"},"modified":"2016-10-19T02:43:35","modified_gmt":"2016-10-19T02:43:35","slug":"interactive-emails-in-gmail-using-css-attribute-selectors","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/interactive-emails-in-gmail-using-css-attribute-selectors\/","title":{"rendered":"Make your email interactive in Gmail by using CSS attribute selectors"},"content":{"rendered":"

Update Oct 2016:<\/B> With the new responsive email update, this technique no longer works in Gmail. It was a good run.<\/I>

<\/p>\n

A few days back I posted the article Gmail Supports the Style tag!… Well sort of<\/a> when I discovered that you could simulate CSS class selectors in Gmail by targeting attributes that Gmail does not strip such as the title attribute.<\/p>\n

In this article I’ll delve into the nitty gritty of what I\u2019ve found concerning this technique.<\/p>\n

\nCan’t wait to see interactive email in Gmail?
\nTry out the Image Carousel for Email Tool<\/a>.\n<\/div>\n

Below is the code of the previous article<\/a> showing a hoverable box. I also added a pair of class selectors (.divbox) and attributes (class=”divbox”) to make this example work with the other email clients such as Yahoo! Mail (Yahoo! Mail strips attribute selectors). I also changed it to use the lang attribute instead of title which I will go into more detail later. These articles explain the different types of attributes<\/a> as well as attribute selectors<\/a>.<\/p>\n

<html>\r\n<head>\r\n<style>\r\n.divbox:hover,\r\n* [lang~=\"x-divbox\"]:hover{\r\n  background-color: green !important;\r\n  color: white;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"divbox\" lang=\"x-divbox\" style=\"padding:10px;width:100px;height:40px;\r\nbackground-color:#eeeeee;\">Divbox Content<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n


\n\"gmail-hover\"

<\/p>\n
With a combination of class and attribute selectors, we\u2019re now able to create interactive email content for all major email clients except for the lone holdout – Outlook 2007\/2010\/2013!<\/p>\n
As you can see from the following code block, Gmail is very strict on single selectors, stripping out pseudo-classes as well as attribute selectors. However by adding a universal (*) selector before your style, we are able to use both pseudo-classes such as :hover as well as attribute selectors.<\/p>\n
Here\u2019s a summary of how Gmail processes CSS in a style tag (in the <head> of the email).<\/p>\n
\r\n\r\n.divbox {..}  \/\/Allowed but pointless - Gmail strips class attributes from elements\r\n#divbox {..}  \/\/Allowed but pointless - Gmail strips id attributes from elements\r\n\r\n[class~=\"divbox\"] {...} \/\/Removed by Gmail\r\n* [class~=\"divbox\"] {...} \/\/Allowed but pointless - No class attributes\r\n\r\ndiv {...} \/\/Allowed but too generic to be useful\r\ndiv:hover {...} \/\/Removed by gmail. No pseudo class support? Not so fast!\r\n* div:hover {...} \/\/Allowed! Interesting\u2026\r\n\r\n* [lang~=\"x-divbox\"] {...} \/\/Allowed! Now we\u2019re talking\r\n\r\n* [lang~=\"x-divbox\"]:hover {...} \/\/Allowed! Magic! :)\r\n\r\n<\/pre>\n

<\/p>\n
A word of warning. R\u00e9mi Parmentier<\/a> noticed that having nested @ declarations (ie, a @font-face or @import declaration within a @media query) might cause Gmail to toss out the whole <style> block and Mark Robbins<\/a> noticed that Gmail might truncate the styles if they are too long. So the suggestion is to put the Gmail specific styles in its own <style> block at the top of your CSS declarations.

<\/p>\n
Try it for yourself<\/b> <\/p>\n
I\u2019ve updated the Rollover Image Tool<\/a> to support Gmail. Go ahead and create your own rollover images for email<\/a>!<\/p>\n
\"gmail-rollover\"<\/a>
<\/p>\n
Why use the lang attribute?<\/strong>
\n(see update for why I now prefer the summary<\/code> attribute).<\/i><\/p>\n
Gmail strips class and id attributes from all elements but leaves some other attributes intact: style, title, lang, width, height, alt, href<\/code>.<\/p>\n
Since href and alt are not technically legal attributes for divs I decided not to use them even though you could if you wanted to. A prime candidate would be title – however title comes with one side-effect – when the user hovers the cursor over the element, the title would be visible.<\/p>\n
I chose the lang attribute because it is a universal attribute (valid for all elements) that is not visible when hovered over. Naturally we\u2019re not using this attribute for its intended purpose – but there\u2019s a technical exception in the HTML specifications that allow us to use it this way. By pre-pending the attribute value with an “x-“, this signifies that the lang attribute is not meant to be meaningful to the client and as far as I know, no email client currently processes the lang attribute anyways.<\/p>\n
Update:<\/b> Eric Lepetit (@ericlepetitsf<\/a>) found other attributes that can be used as well – char<\/i> and summary<\/i> – I like summary since its pretty unencumbered. R\u00e9mi Parmentier<\/a> prefers the aria-labelledby<\/i> attribute . In addition, R\u00e9mi discovered a way to only exclusively target Gmail webmail by testing for the Google proxy image<\/a>.

<\/p>\n
Breakdown<\/strong><\/p>\n
Here\u2019s a total breakdown of all the styles I\u2019ve tried and found working in Gmail:<\/p>\n