{"id":792,"date":"2014-08-11T18:58:59","date_gmt":"2014-08-11T18:58:59","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=792"},"modified":"2014-08-13T09:17:36","modified_gmt":"2014-08-13T09:17:36","slug":"gmail-supports-style-sort-of","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/gmail-supports-style-sort-of\/","title":{"rendered":"Gmail supports the Style tag!\u2026 Well sort of"},"content":{"rendered":"

Update:<\/b> Here’s an article that goes into a bit more detail: Make your email interactive in Gmail by using CSS attribute selectors<\/a>.<\/p>\n

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! <\/p>\n

Before we start, I want to make it clear we\u2019re talking about the Gmail webmail client and not the Gmail mobile apps – which sadly still lack any support for the <style> tag.<\/p>\n

Email designers have always complained that Gmail\u2019s 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<\/a>. Hence, the @Gmail #CanHasStyle campaign<\/a> earlier this year to push for wider embedded CSS support within Gmail.<\/p>\n

Gmail Webmail #HasStyle?<\/strong><\/p>\n

Earlier this year the folks at Email on Acid noticed<\/a> 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. <\/p>\n

However, after a fair bit of sleuthing I\u2019ve 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<\/a>.<\/p>\n

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.<\/p>\n

This markup will display a hoverable box that changes color in Gmail:<\/p>\n

<html>\r\n<head>\r\n<style>\r\n* [title=\"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 title=\"divbox\" style=\"padding:10px;width:100px;height:40px;\r\n  background-color:#eeeeee;\">Divbox Content<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n


\n\"gmail-hover\"

<\/p>\n
I\u2019m still exploring this rabbit hole so stay tuned for more\u2026 :)

<\/p>\n
PS: <\/strong>Gmail, if you’re reading this, I\u2019d 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\u2019d implore you to at least give us class attributes\u2026 and perhaps consider adding that support to the Gmail mobile apps as well!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
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! …<\/p>\n","protected":false},"author":2,"featured_media":821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,19,28,24],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/792"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":33,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions\/878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/821"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}