What html/css attributes are mail safe?

问题

I have recently been developing a newsletter for a client of mine. How ever I can't seem to find good information on what css and html are safe to use in the major mail clients.

I thought that maybe there are people here that have the knowledge and we can create some sort of list of things that work in major mail clients.

This is a list of popular mail clients I borrowed from campaign monitor. (If I forgot somthing please tell me)

Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail

The question is what tags, attributes, special quirks are there in these major browsers and how can they be easily avoided.

Thanks for the help,

回答1:

Here are a couple of posts to get you started:

http://css-tricks.com/using-css-in-html-emails-the-real-story/

http://www.sitepoint.com/code-html-email-newsletters/

回答2:

There is a detailed and comprehensive list of CSS support in common mail clients at Campaign Monitor.

http://www.campaignmonitor.com/css/

回答3:

You can find a comprehensive list of supported and non-supported CSS features for all major email clients at Email Standard Project

A really useful bootstrap for developing HTML emails, which has a ton of discrepancy eliminators is HTML Email Bolerplate

And as a general rule - always use tables and all the old-school HTML tags ( align, center, valign, color etc. ). Some reading on the topic.

回答4:

Here is an email css cheat-sheet. http://intenseminimalism.com/2010/email-css-cheatsheet/

回答5:

PDF providing table format for CSS Support in different mail clients: Gives information for Web Clients, Desktop Clients on Different OS and Mobile Mail Clients.

CSS support by Different Email Clients

https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5320&_ga=1.228308635.745708791.1442556968

回答6:

Gmail already supports the style tag in the head

You can use a subset of CSS selectors to apply styles. Gmail supports class, element, and id selectors.

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>This text is blue.</p=>
      <p>Jerry</p>
    </div>
  </body>
</html>

And media queries:

You can use standard CSS media queries to adjust the styling of an email to suit the user's current device. Gmail supports queries against the screen width, orientation, and resolution.

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

来源：https://stackoverflow.com/questions/12921616/what-html-css-attributes-are-mail-safe

标签

html

css

outlook

gmail