{"id":3233,"date":"2017-09-19T02:16:27","date_gmt":"2017-09-19T02:16:27","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3233"},"modified":"2017-09-20T06:41:36","modified_gmt":"2017-09-20T06:41:36","slug":"targeting-new-gmail-css","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/targeting-new-gmail-css\/","title":{"rendered":"Targeting The New Responsive Gmail With CSS [Updated]"},"content":{"rendered":"

Update 9\/18\/2017:<\/B> Gmail made a change that requires some changes to targeting techniques. See updates below.<\/I><\/p>\n

The new Gmail update with responsive email support<\/a> has been a blessing for email designers everywhere. <\/p>\n

However the update also creates a few issues for those of us that are interested in pushing the envelope with advanced CSS. This is because it is now harder to use CSS to distinguish Gmail that doesn’t support advanced CSS3 like interactivity and animations from clients like the iPhone email client that does. <\/p>\n

Thankfully, uber email developer Mark Robbins<\/a> from Rebelmail<\/a> came up with a solution that allows you to apply a set of CSS that is only active within Gmail and Inbox.<\/p>\n

Targeting Gmail<\/h4>\n

Update:<\/B> Gmail made some changes<\/a> on Sept 18, 2017 which affected the techniques used to target the clients. However, Mark Robbins<\/a> from Rebel quickly came to the rescue. The following has been updated to target Gmail post 9\/18.<\/I> <\/p>\n

Here’s the code to target all Gmail and Inbox versions (Webmail, iOS, Android). <\/p>\n

<!DOCTYPE html>\r\n<html><head>\r\n<style>\r\n    u + .body .gmail{\r\n        display:block !important;\r\n    }\r\n<\/style>\r\n<\/head>\r\n<body class=\"body\">\r\n  <div class=\"gmail\" style=\"display:none;\">\r\n    THIS IS GMAIL OR INBOX\r\n  <\/div>\r\n<\/html><\/pre>\n
In order to implement this technique your markup must contain
\n1) A DOCTYPE.
\n2) A body with a class name (ie. “body”)
\n3) An element with a class name (ie. “gmail”)<\/p>\n
What happens is Gmail converts the doctype to <u><\/u> elements and places it adjacent to the body container (transformed into a div with classname body).  Since Gmail is the only client that does this, you are able to target Gmail using the CSS in the code block above.<\/p>\n
Shortcut<\/B><\/p>\n
Cosmin commented below that you can use a shortcut that does not require adding a class to the body of your email. However this technique requires that you NOT use the <u> tag anywhere in your email content.<\/p>\n
<!DOCTYPE html>\r\n<html><head>\r\n<style>\r\n    u ~ div .gmail{\r\n        display:block !important;\r\n    }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"gmail\" style=\"display:none;\">\r\n    THIS IS GMAIL OR INBOX\r\n  <\/div>\r\n<\/body><\/html><\/pre>\n

 <\/p>\n
Targeting Gmail on Android Only<\/h4>\n
The CSS below allows you to target Gmail on Android (excludes Inbox).<\/p>\n
<!DOCTYPE html>\r\n<html><head>\r\n<style>\r\n    div > u + .body .gmail{\r\n        display:block !important;\r\n    }\r\n<\/style>\r\n<\/head>\r\n<body class=\"body\" >\r\n  <div class=\"gmail\" style=\"display:none;\">\r\n    THIS IS GMAIL ON ANDROID\r\n  <\/div>\r\n<\/body><\/html><\/pre>\n

 <\/p>\n
Shortcut<\/B><\/p>\n
Like the generic version, you can use a shortcut that does not require adding a class name to the body as well.<\/p>\n
\r\n    div > u ~ div .gmail{\r\n        display:block !important;\r\n    }\r\n<\/pre>\n

 <\/p>\n
(Originally posted Oct 8, 2016. Updated Sept 19, 2017)<\/p>\n


<\/p>\n
\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n
<\/p>\n