Zurück zur Übersicht

GMail & Media Queries – Email Developers Heaven is Still far Away

GMail gets responsive. The big news spread quickly during the past weeks as everybody got excited about a news that actually should not even be worth a news because in my opinion it should be implemented already years ago. Especially since Google is considering the responsiveness of websites for it’s holy grail page rank algorithm… In German we call this kind of behavior „Wasser predigen und Wein trinken“ („Preaching water but drinking wine“).

Anyway, I was playing with the new GMail pre-processor a bit. Here are my first learnings:

1. GMail combines all style blocks into one

Does not matter how many stile blocks you are using, GMail combines them all into one which is dynamically added to the DOM at the very end of the <head> section.

2. Selectores are not supported anymore

It seems that GMail does not like css selectors anymore. Hacks such as using the „lang“ attribute documented by freshinbox here are not working anymore.
It does not matter how the selectors which selector we are using, nor how we write it. GMail shows no mercy: they simply get stripped. None of the following is supported since the last update:

 [title~="gmail-selector"] {display: block !important;}
 div[lang~="gmail-selector"] {display: block !important;}
 *[width~="gmail-selector"] {display: block !important;}
 * [height="gmail-selector"] {display: block !important;}
 * [alt~=gmail-selector] {display: block !important;}
 * [href=gmail-selector] {display: block !important;}

 * div[foo] {display:block !important;}
 * div[foo=bar1] {display:block !important;}
 * div[foo~=bar2] {display:block !important;}
 * div[foo^="bar3"] {display:block !important;}
 * div[foo*="bar4"] {display:block !important;}
 * div[foo$="bar5"] {display:block !important;}

Check my test code out here: https://codepen.io/cygro/pen/gwvqGK?editors=1000#

3. Media queries with multiple rules (comma delimited) are supported

At least something ;-)

4. GMail does not like numbers in class names

Some developers tend to use numbers in class names. Even at the beginning of a class name. This is not among best practices and GMail enforces you now to avoid it: If a class name starting with a number (such as .600-no-max-width) ANYWHERE in your <style> block, GMail will simply strip the entire block. All your other nice classes and media queries are gone.

5. No support for neighbor / sibling operator

The core coding pattern used for interactive email is not supported by gmail. The required combination of the :checked pseudo class and neighbor / sibling operator is stripped out by gmail.

6. Full message view without css

All style definitions in the head are stripped in the full message view.
If your message is beyond 102kB in total size (source size), GMail clips it and adds the following note: „[Message clipped] View entire message
However, in the full message view (that pops up when you click on the link „View entire message“, all <style> blocks are still stripped from the <head> section.

To be continued…


Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>