Search code examples
htmlcssemailhtml-email

How is CSS in emails treated by different email clients and in different reading formats?

I'm currently customising my first (woocommerce) email template and I'd like to hide data via CSS display: none

However, I'm wondering what the support of CSS and display: none is, i.e.

  1. do all email clients support basic CSS such as display: none or is it too much?
  2. what happens if a receiver views emails only in text format (not HTML)? Does the email client convert the HTML to text (i.e. the display: none is still not shown) or does the the email client just put out the plain text it can find without HTML conversion (i.e. display: none content is still shown)?
  3. is there a website to test how emails will look across email clients (outlook, gmail, yahoo, spark, mac etc)?

I know this may be very basic, but I'd truly appreciate any help !

Many thanks

Update:

This website provides some details on hiding elements: http://www.emaildesignreview.com/email-code/hiding-elements-in-email-4922/

I'm currently using the following to try hiding on as many clients as possible:

font-size: 0; /* in case display-none isnt working */
max-height:0px; overflow:hidden; /* for gmail */
opacity: 0;
visibility: hidden;
display: none; 
mso-hide: all; /* for outlook */
Solution
    1. You can check how display:none is supported across email clients on Can I email. (Disclaimer: I'm the maintainer of the site.)

    Can I email… display:none

    1. HTML and plain text are two separate versions of an email. It’s up to you to send both versions and make sure that the content is relevant. From what I see from a WooCommerce I have, with the Storefront theme, it is set up by default to only send a text/html. You can change this WooCommerce > Settings > Emails, select an email and change the "Email type" value to Multi-part. You can then see in your admin the file you need to edit for the plain text version in your theme.

    2. You can use screenshots testing tools like Litmus (the biggest, well-known tool in the community), Email on Acid (my personal favorite) or Testi.at (good to have if you have a low budget).