{"id":703,"date":"2014-06-17T15:38:58","date_gmt":"2014-06-17T15:38:58","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=703"},"modified":"2016-10-15T23:18:37","modified_gmt":"2016-10-15T23:18:37","slug":"gmail-can-has-style","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/gmail-can-has-style\/","title":{"rendered":"Gmail Please Fully Support The Style Tag #CanHasStyle"},"content":{"rendered":"<style>\n#dd_ajax_float{\n  display:none !important;\n}\n.yfix{}\n@media print,screen {\n  .yfix{\n    display: block;\n  }\n  .gthumb-cont{\n    height:353px !important;\n    max-height:353px !important;\n  }\n  .gthumb-img{\n    height: auto !important;\n    max-height: none !important;\n    width:auto !important;\n    display: none;\n  }\n  .gthumb, .gthumb img\n  {\n    display:inline-block;\n    float:left;  \n    max-height: none !important;  \n    width:100px;\n    height:75px !important;\n    cursor: pointer;\n  }\n  .gthumb:hover + .gthumb-img\n  {\n    display:block;\n    clear:both;\n  }\n}\n@media screen and (max-device-width: 1024px) {\n  div[class].gthumb-img{\n    position: absolute;\n    left:0px;\n    top: 75px;    \n  }\n  div[class].gthumb:hover + .gthumb-img\n  {\n    z-index:2;\n  }\n  .can_wrapper{\n    width:480px !important;\n  }\n}\ntable {\n border: 0px !important;\n}\ntable td {\n padding: 0px;\n}<\/p>\n<\/style>\n<div class=\"can_wrapper\" style=\"font-size:1.15em;line-height:1.5;width:550px;margin-left:10px;\">\n<p><I><B>Update Oct, 2016: <\/B> Believe it or not, <a href=\"https:\/\/freshinbox.com\/blog\/gmail-responsive-email-win-for-email-community\/\">Gmail finally supports &lt;style&gt; AND media queries<\/a>!<\/i><\/p>\n<p><BR><BR>Dear Gmail,<\/p>\n<p>Thank you for all the wonderful new innovations in Gmail over the past year: <a href=\"http:\/\/gmailblog.blogspot.com\/2013\/05\/take-action-right-from-inbox.html\" target=\"_new\">Action Buttons<\/a>, <a href=\"https:\/\/support.google.com\/plus\/answer\/3190197\" target=\"_new\">Related Google+ Page Widget<\/a>, <a href=\"http:\/\/gmailblog.blogspot.com\/2013\/05\/a-new-inbox-that-puts-you-back-in.html\" target=\"_new\">Inbox Tabs<\/a> and most recently <a href=\"http:\/\/gmailblog.blogspot.com\/2014\/03\/a-new-more-visual-way-to-view-your.html\" target=\"_new\">Grid View<\/a>. They&#8217;re all very exciting for us email geeks.<\/p>\n<p>However, the lack of &lt;style&gt; 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.<\/p>\n<p>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&#8217;t look as good as it should.<BR><BR><\/p>\n<p><span style=\"font-weight:600;color:#333333;\">Interactive Emails?<\/span><BR><BR><\/p>\n<p>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:<BR><BR><\/p>\n<div style=\"width:420px;margin:0px auto;text-align:right;\">\n<div style=\"border:5px solid #888888;width:400px;padding:5px;\">\n<table cellpadding=0 border=0 cellspacing=0 style=\"border-spacing:0px;border-collapse: collapse;\">\n<tr>\n<td background=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/g-thumbs-background.jpg\">\n<div class=\"gthumb-cont\" style=\"width:400px;height:279px;max-height:279px;overflow:hidden;position:relative;\">\n<div class=\"gthumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/blank.gif\"><\/div>\n<div class=\"gthumb-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/g-building.jpg\" width=\"400\" height=\"279\" border=\"0\" style=\"display:block;\"><\/div>\n<div class=\"gthumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/blank.gif\"><\/div>\n<div class=\"gthumb-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/g-android.jpg\" width=\"400\" height=\"279\" border=\"0\" style=\"display:block;\"><\/div>\n<div class=\"gthumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/blank.gif\"><\/div>\n<div class=\"gthumb-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/g-bicycles.jpg\" width=\"400\" height=\"279\" border=\"0\" style=\"display:block;\"><\/div>\n<div class=\"gthumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/blank.gif\"><\/div>\n<div class=\"gthumb-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/g-path.jpg\" width=\"400\" height=\"279\" border=\"0\" style=\"display:block;\"><\/div>\n<table cellpadding=0 cellspacing=0 border=0>\n<tr>\n<td><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/gmail\/images\/canhasstyle-kitten.jpg\" width=\"400\" height=\"279\" border=\"0\" border=\"0\" alt=\"Google\" style=\"display:block;\">\n    <\/td>\n<\/tr>\n<\/table>\n<\/div>\n<\/td>\n<\/tr>\n<\/table><\/div>\n<\/div>\n<div id=\"email-me\">\n  <input type=email id=\"email-me-email\" placeholder=\"Email address\"> <input id=\"email-me-btn\" type=button value=\"See Example In Your Inbox\" style=\"-webkit-appearance: none;\">\n<\/div>\n<p><BR><\/p>\n<p>The widget above is an interactive image carousel. And it *already* works inside Yahoo! Mail and Outlook.com. Without Javascript. Without Plugins. (<a href=\"https:\/\/freshinbox.com\/blog\/how-to-create-an-image-carousel-for-email-part-2\/\">Here&#8217;s how its done<\/a>). Go ahead and send yourselves a copy and try it out (you <b>do<\/b> have a Yahoo! Mail account right?). In fact the carousel even works in the Android email client!<\/p>\n<p>Here are <a href=\"https:\/\/freshinbox.com\/blog\/4-email-examples-that-are-pushing-the-envelope-of-email\/\">a few more examples<\/a> of cool stuff that can be done with embedded CSS in email.  Without embedded CSS, emails in Gmail look static&#8230; and boring. And boring is bad.<\/p>\n<p>As developers and email designers we hope you understand why this change is necessary.<\/p>\n<p>So Gmail, <b>#CanHasStyle?<\/b><\/p>\n<p>Yours,<br \/>\nAn Email Geek<br \/>\nJustin Khoo<br \/>\nFreshInbox<br \/>\n<BR><BR><\/p>\n<div class=\"mashsharer-box\">\n<div class=\"mashsharer-buttons\">\n                      <a class=\"facebook\" onclick=\"javascript:mashFbSharrer('https:\/\/freshinbox.com\/blog\/gmail-can-has-style','Dear%20%40Gmail%2C%20please%20support%20the%20Style%20tag!%20%23CanHasStyle', 'Facebook share popup','http:\/\/goo.gl\/dS52U',520,350)\" href=\"javascript:return(0);\">Share on Facebook<\/a><a class=\"twitter\" onclick=\"javascript:mashTwSharrer('', 'Dear%20%40Gmail%2C%20please%20support%20the%20Style%20tag!%20http%3A%2F%2Ffreshinbox.com%2Fcanhasstyle%20%23CanHasStyle', 'Twitter share popup', 'http:\/\/goo.gl\/dS52U', 520, 350)\" \"=\"\" href=\"javascript:return(0)\">Tweet on Twitter<\/a>\n                    <\/div>\n<\/div>\n<p><BR><br \/>\n<HR><br \/>\n<span style=\"font: italic 0.9em Arial;\">* Technically Gmail <a href=\"http:\/\/www.emailonacid.com\/blog\/details\/C13\/gmail_web_app_allows_style\">supports<\/a> the style tag, but strips class and id selectors from elements, making the support moot &#8211; but you can style tables!<\/span><\/p>\n<div style=\"font-size:0.8em;color:#999999;\">\nPhoto credits (CC):<br \/>\n<a href=\"http:\/\/www.flickr.com\/photos\/ush\/4816867214\/sizes\/o\/\">Ian Usher\/Flickr<\/a>,<br \/>\n<a href=\"http:\/\/www.flickr.com\/photos\/adamjackson\/3819081714\">adamjackson1984\/Flickr<\/a>,<br \/>\n<a href=\"http:\/\/www.flickr.com\/photos\/rwentechaney\/4884315794\/\">Rachel Wente-Cheney\/Flickr<\/a>,<br \/>\n<a href=\"http:\/\/www.flickr.com\/photos\/dahlstroms\/4105172026\">H&aring;kan Dahlstr&ouml;m\/Flickr<\/a>\n<\/div>\n<\/div>\n<style>\n#email-me-email {\n  width:170px;\n  height:20px;\n  margin-bottom: 5px;\n  background-color: #FAFCEF;\n  font-size: 14px;\n  padding: 3px 5px;\n  display:inline-block;\n  border-radius:3px;\n  margin-left:20px;\n}\n#email-me-btn {\n  cursor: pointer;\n  font-size: 14px;\n  color: white;\n  text-decoration:none;\n  text-shadow:#555555 0 1px;\n  background-color: #7DC442;\n  padding: 5px 12px;\n  border:1px solid #559621;\n  border-radius: 5px;\n  display:inline-block;\n}\n#email-me-btn:hover {\n  background-color: #78D62C;\n}\n#email-me{\n  width: 420px;\n  padding:20px;\n  xborder:3px solid #888888;\n  xborder-radius: 5px;\n  margin:0px auto;\n}\n<\/style>\n<p><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><br \/>\n<script>\n  var theEmail = null;\n  $(document).ready(function(){\n    $('#email-me-btn').click(function(){\n      theEmail = $('#email-me-email').val();\n      sendEmail(theEmail);\n    });\n    $(\"#email-me-email\").keypress(function(e) {\n      if(e.which == 13) {\n        theEmail = $('#email-me-email').val();        \n        sendEmail(theEmail);\n      }\n    });\n  });\n  var sendEmail = function(emailAddr){\n    if(!emailAddr || emailAddr.length < 12){\n      alert('Please enter an email');\n      return;\n    }\n    $('#email-me-email').val('sending...');\n    $.ajax({\n      url: \"\/canhasstyle\/send_canhas.php\",\n      data: {\n        email: emailAddr\n      },\n      success: function( data ) {\n        if(data == null || data.indexOf(\"ERROR\") != -1){\n          alert(\"There was a problem sending the email \\n\"+data);\n        }else{\n          alert(\"An email has been sent to \"+emailAddr+\"!\\n (Be sure to check the spam folder just in case)\");          \n        }\n        $('#email-me-email').val('');\n      }\n    });\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dear Gmail,<BR><BR><\/p>\n<p>Thank you for all the wonderful new innovations in Gmail over the past year: <a href=\"http:\/\/gmailblog.blogspot.com\/2013\/05\/take-action-right-from-inbox.html\" target=\"_new\">Action Buttons<\/a>, <a href=\"https:\/\/support.google.com\/plus\/answer\/3190197\" target=\"_new\">Related Google+ Page Widget<\/a>, <a href=\"http:\/\/gmailblog.blogspot.com\/2013\/05\/a-new-inbox-that-puts-you-back-in.html\" target=\"_new\">Inbox Tabs<\/a> and most recently <a href=\"http:\/\/gmailblog.blogspot.com\/2014\/03\/a-new-more-visual-way-to-view-your.html\" target=\"_new\">Grid View<\/a>. They&#8217;re all very exciting for us email geeks.<BR><BR><\/p>\n<p>However, the lack of &lt;style&gt; tag (embedded CSS)* support in Gmail is a real pain. Your peers Yahoo! Mail, Outlook.com and AOL Mail have long supported it and so do the majority of mobile email clients&#8230;<\/p>\n","protected":false},"author":2,"featured_media":748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,24],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/703"}],"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=703"}],"version-history":[{"count":58,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":3220,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/703\/revisions\/3220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/748"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}