Have you ever wondered the best way to hide elements in email? Whether you're trying to hide/show images on desktop or mobile versions, or want to hide certain parts from different email clients.
We take a look at how you can target a range of email clients and the attributes you can use to hide elements within them, along with an easy way to show different images on desktop and mobile.
See the Pen Email-inline style code by Jay( @emailjay ) on CodePen .
This blog uses the amazing resource set up by Dylan Smith and contributed to by the awesome email geeks community:
howtotarget.email .
For the article let's assume you are using inline styles and embedded styles in the head of your email.
In the example below I show how we can style an image using inline CSS attributes, then on mobile, using a media query and class I can change the size of the image.
See the Pen Email-inline style code by Jay(@emailjay) on CodePen. In the above example we use a media query to trigger a different image width on screens that have a max-device-width of 600px - you can choose where you would like this media query to kick in and even have multiple media queries to adjust your email at different widths.This is an easy way to control the content of your email.
Using inline CSS styles, by adding style=" css " on an element in the body of your HTML document to do the majority of the styling and using CSS in the of your email, embedding styles, to control the style on mobile, by adding the !important declaration after the CSS attribute value, it will override any inline style you have set.
Hiding elements - HTML5 Hidden element attribute See the Pen Hidden by Jay( @emailjay ) on CodePen .
In HTML5 there is an attribute of hidden.
By adding this to your element it will be hidden even if the CSS doesn’t load.
This is also hidden from screen readers and not selectable with mouse or keyboard.See the Pen Hidden by Jay(@emailjay) on CodePen.
Email Support Applemail Samsung Mail app 4.4+ Outlook app iOS iOS Mail CSS - Display:
none;
See the Pen CSS - Display:none by Jay( @emailjay ) on CodePen .
The CSS display attribute has a number of values, but to hide an object, you can set it to display:
none;
this attribute hides everything within the element including child elements, so if set on a whole table - all of it’s content will also be hidden.
Anything hidden with display: none;
will also remove the space it uses up, so objects below will move up to fill the space.
Like hidden above it is also not visible to screen readers or clickable.
TIP: Elements with display: none;
still load - so hiding a tracking pixel or similar image, will still load and take time/bandwidth, but won’t be seen by the user.
See the Pen CSS - Display:none by Jay(@emailjay) on CodePen.
Email support All email clients Outlook Windows (Desktop) supports display:
none;
but only on parent elements such as or
not on an tag.Another note on Outlook (of course!) any nested tables will not inherit display:none;so you need to add it to every child table element, remember to always test your emails to make sure what you want hidden stays hidden! Opacity: 0; See the Pen Opacity: 0 by Jay( @emailjay ) on CodePen .Opacity changes how opaque an element is, with most elements set to opacity: 1; as default. You can use opacity: 0;to make an element transparent, but unlike hidden and display:none;the element still keeps its shape and size, so blocks underneath won’t move up to fill up the space.This element is still read out by screen readers and still clickable.See the Pen
Opacity:0 by Jay(
@emailjay) on
CodePen.Email support Applemail Outlook Mac Freenet Gmail Office 365 Outlook.com T-online.de IBM Notes 10 Samsung Mail Visibility: hidden; See the Pen Visibility: hidden by Jay( @emailjay ) on CodePen . Visibility:hidden;works the same as opacity above, in that the object is visually hidden, but still keeps its space and is still selectable with the keyboard or mouse and still included by a screen reader.Unlike the other attributes above, you can override the visibility hidden on a child element, and the rest of parent element will be hidden, by setting visibility: visible; on that child element.See the Pen
Visibility:hidden by Jay(
@emailjay) on
CodePen.Email support Applemail Outlook Mac Freenet Yahoo Office 365 Outlook.com T-online.de IBM/Lotus Notes Samsung Mail Web.de Mail.ru Gmx Comcast Aria-hidden="true" Aria-hidden won’t hide an element visually within your email, but will hide it from the accessibility tree and from screen readers.Not all email clients keep aria tags in the HTML.Where this would typically be used is to hide images, so instead leave the alt tag empty e.g. alt="". font-size: 0; line-height: 0;These elements can be used to hide text within email, using just font-size: 0;will leave the line-height spacing still visible in some clients, so are best used in conjunction. All email clients support font-size: 0; line-height: 0;Hiding desktop images on mobile devices See the Pen Hiding dekstop images on mobile - email html by Jay( @emailjay ) on CodePen .See the Pen mso - email hide from Outlook Desktop comments by Jay( @emailjay ) on CodePen .See the Pen Using mso-element:field to hide content from Outlook - email HTML by Jay( @emailjay ) on CodePen . Using display:none;which as you can see above is supported across all email clients, we can hide elements on desktop and mobile.In the example below we can hide the mobile image by creating a container element, in this case a div and setting the div and image to display: none; Outlook (Windows) only supports display: none;on parent elements such as a div or td - not just on an tag.Then using CSS in the within a media query, as soon as a screen gets smaller than 640px it will change the inline style on the mobile image and containing div to display: block;with the corresponding class ‘show’.We then hide the desktop image with the class nomob, and change display: block; to display:none;See the Pen
Hiding dekstop images on mobile - email html by Jay(
@emailjay) on
CodePen.Microsoft Word rendering Outlook desktop Outlook 2007/2010/2013/2016/2019 - Hide all content:See the Pen
mso - email hide from Outlook Desktop comments by Jay(
@emailjay) on
CodePen.The word rendering engine uses numbers to define specific versions and operators:Using the above comment and the different elements we can target specific Outlooks. Operators:gt = Greater thangte = Greater than or Equal tolt = Less thanlte = Less than or Equal to Version Numbers:Outlook 2000 - Version 9Outlook 2002 - Version 10Outlook 2003 - Version 11Outlook 2007 - Version 12Outlook 2010 - Version 14Outlook 2013 - Version 15Outlook 2016/19 - Version 16 (I know not helpful!) Mark Robbins of Salesforce also found that surrounding content with the mso-element attribute will hide it from Microsoft Desktop Outlooks:See the Pen
Using mso-element:field to hide content from Outlook - email HTML by Jay(
@emailjay) on
CodePen.This method is especially useful for ESP’s or development environments that don’t support the MSO conditional comments above.Outlook App (iOS/Android) See the Pen Hide elements from Outlook iOS/Android - Email HTML by Jay( @emailjay ) on CodePen .To hide an element from the Outlook app we can use the below snippet of CSS.The attribute [data-outlook-cycle] is added to the element of all emails in these apps.We can then target elements with a class, such as .outlookhide in the below example:See the Pen
Hide elements from Outlook iOS/Android - Email HTML by Jay(
@emailjay) on
CodePen.Outlook Webmail (outlook.com) See the Pen Hide elements from Outlook.com (Outlook Webmail) - HTML email by Jay( @emailjay ) on CodePen .To target Outlook webmail we take advantage of the way it adds x_ to all classes we use in our HTML.The CSS target attribute can be used to target any class containing x_[your class] by adding the operator ~ .In the example below we use the class “hideoutlookweb”.See the Pen
Hide elements from Outlook.com (Outlook Webmail) - HTML email by Jay(
@emailjay) on
CodePen.Gmail See the Pen Hide elements from Gmail - HTML email by Jay( @emailjay ) on CodePen .Hide content from Gmail - This CSS works due to Gmail converting the tag to so adding class="body" to your tag and then targeting the elements you want to hide from Gmail with a class, in the example below called "nogmail" and using display:none;to hide the content, make it not clickable, hidden from site, take up no space and not be seen by screen readers.Adding a media query around this CSS could choose to hide the content only on mobile screens.See the Pen
Hide elements from Gmail - HTML email by Jay(
@emailjay) on
CodePen.Yahoo and AOL See the Pen Hide elements from Yahoo and AOL - HTML email by Jay( @emailjay ) on CodePen .See the Pen Hide elements from only Yahoo - HTML email by Jay( @emailjay ) on CodePen .Yahoo and AOL fairly recently started to use the same rendering engine and therefore can be targeted together using the below CSS snippet.A wrapping div is added with the class .& so we can target specific elements by chaining the classes together:See the Pen
Hide elements from Yahoo and AOL - HTML email by Jay(
@emailjay) on
CodePen.To target just Yahoo you can add a div around the element with a unicode id name - aol strips that style, so it will only affect Yahoo.See the Pen
Hide elements from only Yahoo - HTML email by Jay(
@emailjay) on
CodePen.Hide stuff!! This isn’t an exhaustive list, but hopefully will help you see the fundamentals to hiding elements from different email clients with CSS targeting.If you want to hide content, choose the best method above and find the CSS target on howtotarget.email - by combining these you should be able to hide almost anything!! Definitely check out howtotarget.email and make sure you thank @dylanatsmith on Twitter if it ever saves you from a jam! Jay Oram coder
