Gmail No Longer Supports Interactive Email :(
Update: Looks like Gmail reverted this change the following day.
As of today Gmail strips all attribute selectors (h/t Mark Robbins) as well as the :hover and :checked pseudo-class and that means no more interactivity in the Gmail inbox.
We had almost a two year run with this trick and it seems Gmail finally put the kibosh on it. AOL, Yahoo! Mail and to a lesser extent Outlook.com still support interactive email though.
To recap, Gmail Webmail has always stripped class and id attributes in email but allowed other attributes such as the “lang” attribute. With some attribute selector tricks we were able to make elements interactive within Gmail.
<html>
<head>
<style>
* [lang~="x-divbox"]:hover{
background-color: green !important;
}
</style>
</head>
<body>
<div lang="x-divbox">Divbox Content</div>
</body>
</html>
Well that is no more as of today. That means rollover images and interactive carousels no longer enjoy their independence within the Gmail inbox.
Happy fourth weekend everyone!
Thanks, Gmail!
For those who didn’t actually want to learn how to code interactive email, I guess that’s a good news, no? LOL
Since when did gmail render embedded CSS that was in the head?
Gmail has rendered embedded CSS in the head for at least a few years. Unfortunately it also stripped classes and ids from elements so it was of limited use. However the use of the lang/attribute selector hack allows us to mimic classes and ids and do all kinds of fun stuff in gmail.
Now this is only for Gmail webmail and not those Gmail for business or Gmail apps.
I just tested the code above, the hover effect, and the hover effect is still working on Gmail desktop.
Hi Mark,
Hover did not work when this article was written. However Gmail rolled out a much bigger change 3 months later with full embedded style support and this update did include :hover support but not the more powerful :checked support that is more widely used for interactive email.
https://www.emailonacid.com/blog/article/industry-news/gmail-update-embedded-styles-and-media-queries