Email Development
Gmail Now Supports Display: None
Email Development
Hey email devs! Just wanted to let you know that as of today, Gmail now has full support for “display: none;” when used inline. It also supports “display: none;” in embedded styles, but only if the selector is not a class or ID (as those are stripped).
Display:none is now reversible! Previously, to have display: none function in Gmail you had to use !important. That meant that the style couldn’t be overwritten by media queries. To get around this, email devs used tricks like “max-height:0;overflow:hidden” so that they could then reverse these styles in a media query.
It also means that the hack to force the Gmail app to display a desktop version on mobile no longer works as written. But fear not! Justin Khoo has already come up with a way to make the hack function without messing up your email. Check it out here. Justin also has some advice on hiding mobile content, if you need help with that.
Display:none inline still isn’t supported by some versions of Yahoo! Mail, so make sure to include an embedded style as well.
Most popular clients (Apple Mail, Outlook, Thunderbird, iOS, AOL, Office 365, Outlook.com) fully support all uses of display:none. In other clients, support for display:none depends on if it’s inline or embedded, as well as the selector that’s used. Check out the chart below for more info.
| Email Client | Inline | Embedded (Class) | Embedded (Element) |
|---|---|---|---|
| Gmail (All) | |||
| Google Apps (All) | |||
| Yahoo (Chrome/Firefox) | |||
| Yahoo (IE 10/IE 11) | |||
| Gmail Android App | |||
| Gmail iOS App | |||
| Android 5.1 |
As email clients change, it can cause major headaches for email developers. Start testing your emails today and make sure that everything is looking perfect!
