Hiding Elements in Email
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.
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.
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 <head> 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
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.
Email Support
-
Applemail
-
Samsung Mail app 4.4+
-
Outlook app iOS
-
iOS Mail
CSS – Display: none;
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.
Email support
- All email clients
- Outlook Windows (Desktop) supports display: none; but only on parent elements such as <td> or <div> not on an <img> 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;
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.
Email support
- Applemail
- Outlook Mac
- Freenet
- Gmail
- Office 365
- Outlook.com
- T-online.de
- IBM Notes 10
- Samsung Mail
Visibility: hidden;
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.
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
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 <img> tag.
Then using CSS in the <head> 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;
Microsoft Word rendering Outlook desktop
Outlook 2007/2010/2013/2016/2019 – Hide all content:
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 than
gte = Greater than or Equal to
lt = Less than
lte = Less than or Equal to
Version Numbers:
Outlook 2000 – Version 9
Outlook 2002 – Version 10
Outlook 2003 – Version 11
Outlook 2007 – Version 12
Outlook 2010 – Version 14
Outlook 2013 – Version 15
Outlook 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:
This method is especially useful for ESP’s or development environments that don’t support the MSO conditional comments above.
Outlook App (iOS/Android)
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 <body> element of all emails in these apps. We can then target elements with a class, such as .outlookhide in the below example:
Outlook Webmail (outlook.com)
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”.
Gmail
Hide content from Gmail – This CSS works due to Gmail converting the <!DOCTYPE html> tag to <u></u> so adding class=”body” to your <body> 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.
Yahoo and AOL
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:
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.
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 @ Action Rocket
-
nicoleH
-
TheSoutheastBeast