{"id":4798,"date":"2016-08-31T19:36:34","date_gmt":"2016-08-31T14:06:34","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=4798"},"modified":"2020-04-07T12:24:35","modified_gmt":"2020-04-07T06:54:35","slug":"gmail-supports-display-none-css","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/","title":{"rendered":"Gmail\u2019s first positive approach towards CSS support"},"content":{"rendered":"

An email coder is afraid of nothing\u2026 if only Gmail and Outlook rendering issues never existed. Hiding content in Gmail, wasn\u2019t 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.<\/span><\/span><\/p>\n

Valiant Efforts to make Gmail hide content<\/h2>\n

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 \u201cdisplay:none;\u201d was not supported by Gmail desktop.<\/p>\n

\"\"<\/a><\/div><\/div>\n

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

All thanks to a grand revelation, it is no longer needed.<\/em><\/p>\n

Gmail didn\u2019t play \u2018Hide and not seek\u201d\u2026. Till now!!!<\/h2>\n

On 29th August 2016 Uplers have made few tests on Gmail & noticed that Gmail has now begun to support the CSS property \u2018display:none;\u2019.<\/p>\n

That\u2019s right\u2026.<\/p>\n

Gmail now supports hiding content using \u2018display:none\u2019 in both desktop and mobile client!!!!!<\/h4>\n

This is a huge revolution towards email development. With support of \u2018display:none\u2019 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).<\/p>\n

But\u2026.<\/h2>\n

As the saying goes \u2018With great power comes great responsibility<\/em>\u2019, with support of \u2018display:none\u2019 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.<\/p>\n

e.g. use of \u2018div\u2019 with \u2018&nbsp;\u2019 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.<\/p>\n

\"\"<\/a><\/div><\/div>\n

Workaround<\/strong>: Apply a class in CSS with display:none property. This way inlining won\u2019t work and thus content meant for gmail app ,would be forced in gmail mobile layout while for rest it would be hidden.<\/p>\n

To learn more about using inline CSS in your emails, follow our blog<\/a>.<\/p>\n

Good to see Google bring in some relief for our email developers. Share your happiness in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

An email coder is afraid of nothing\u2026 if only Gmail and Outlook rendering issues never existed. Hiding content in Gmail, wasn\u2019t 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 […]<\/p>\n","protected":false},"author":1,"featured_media":4799,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382,381],"tags":[507,82,506,508],"class_list":["post-4798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","category-email-design","tag-displaynone-support","tag-gmail-best-practices","tag-gmail-css-coding","tag-gmail-email"],"yoast_head":"\nGmail supports 'display:none' in CSS.<\/title>\n<meta name=\"description\" content=\"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gmail supports 'display:none' in CSS.\" \/>\n<meta property=\"og:description\" content=\"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-31T14:06:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-07T06:54:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/\",\"name\":\"Gmail supports 'display:none' in CSS.\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Gmail Support display:none\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gmail\u2019s first positive approach towards CSS support\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gmail supports 'display:none' in CSS.","description":"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/","og_locale":"en_US","og_type":"article","og_title":"Gmail supports 'display:none' in CSS.","og_description":"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!","og_url":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2016-08-31T14:06:34+00:00","article_modified_time":"2020-04-07T06:54:35+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/","url":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/","name":"Gmail supports 'display:none' in CSS.","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Earlier Gmail ignored certain CSS properties, which was a headache for email coders. But since 29th Aug '16, Gmail supports 'display:none' CSS. Rejoice!!!","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/08\/Gmail-Support.jpg","width":"1170","height":"470","caption":"Gmail Support display:none"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/gmail-supports-display-none-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Gmail\u2019s first positive approach towards CSS support"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/4798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=4798"}],"version-history":[{"count":12,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/4798\/revisions"}],"predecessor-version":[{"id":18885,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/4798\/revisions\/18885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/4799"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=4798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=4798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=4798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}