2

HTML emails cheatsheet

 2 years ago
source link: https://devhints.io/html-email
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Properties to avoid

position (Outlook, Gmail, Yahoo) display (Outlook, Gmail) float (Outlook) height (Outlook) width in p/div (Outlook) padding in p/div (Outlook) background (Outlook, Gmail) min-width (Outlook) max-width (Outlook) opacity (Outlook, Gmail, Yahoo) box-shadow (Outlook, Gmail, Yahoo) rgba() (Outlook) data-uri (all webmail)

Selectors to avoid

E[attr] (Outlook, Gmail) E:nth-child(n) (Outlook, Gmail) ::before and ::after (Outlook, Yahoo, Gmail) E F (Gmail) E + F, E > F etc (Outlook, Gmail)

Inline your CSS as much as possible.

Basic layout

<table cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td width="auto"></td>
    <td width="600" background="#ffffff">
      ···
    </td>
    <td width="auto"></td>
  </tr>
</table>

Responsive

<style>
@media only screen and (max-device-width: 480px)
</style>

<style> is supported in the head and body by everything except Gmail. Only use them for responsive styles.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK