Gmail’s first positive approach towards CSS support

An email coder is afraid of nothing… if only Gmail and Outlook rendering issues never existed. Hiding content in Gmail, wasn’t easy earlier unlike other email clients.  With majority emails being opened in mobile devices, coder most of the time faced a dilemma to sacrifice content for mobile layout or to show only in mobile and not in desktop.

Valiant Efforts to make Gmail hide content

To hide and show different content on mobile was a pain for email developers in case of Gmail (Desktop and Mobile app). All the email developers are well aware regarding the struggle involved in hiding the content in Gmail, as the CSS property “display:none;” was not supported by Gmail desktop.

Coders adopted methods to tackle the issue of hiding content for one layout while making it visible on the other. One sure-shot way was providing height 0 on a div that got the content hidden in Gmail app. Interestingly, some of blogs out there were ready to help you get it done, but the frustration was evident.

All thanks to a grand revelation, it is no longer needed.

Gmail didn’t play ‘Hide and not seek”…. Till now!!!

On 29th August 2016 Uplers have made few tests on Gmail & noticed that Gmail has now begun to support the CSS property ‘display:none;’.

That’s right….

Gmail now supports hiding content using ‘display:none’ in both desktop and mobile client!!!!!

This is a huge revolution towards email development. With support of ‘display:none’ we can plan to send out interactive email with an appropriate fallback for Gmail (Gmail still has no support for interactive email, but Uplers have their fingers crossed).

But….

As the saying goes ‘With great power comes great responsibility’, with support of ‘display:none’ in Gmail app, there is some challenge as well that need to be taken care. Anything to be hidden from Gmail desktop client, but to be visible in Gmail app, would be also hidden in app.

e.g. use of ‘div’ with ‘ ’ to render desktop in gmail app. Since display:none property is now supported in Gmail app, this nbsp in div would be hidden and thus the layout get disturbed in Gmail app.

Workaround: Apply a class in CSS with display:none property. This way inlining won’t work and thus content meant for gmail app ,would be forced in gmail mobile layout while for rest it would be hidden.

To learn more about using inline CSS in your emails, follow our blog.

Good to see Google bring in some relief for our email developers. Share your happiness in the comments below.