Warning:
This wiki has been archived and is now read-only.
Status Quo Email
From HTML for email Community Group
This Page will give a overview about thinks that Works and didn't works in the current standard
Contents
What is the latest Standard of HTML for Emails?
The latest difine standard ist based of the convention in 1998 (--Stefan Mies (talk) 07:46, 25 September 2014 (UTC)http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105). That includes HTML 4.0 and CSS 1.0.
Which CSS Clients support which css tags
| Outlook 2007/10/13 + | Outlook 03/Express/Mail | iPhone iOS 7/iPad | Outlook.com | Apple Mail 6.5 | Yahoo! Mail | Google Gmail | Android 4 (Gmail) + | |||||||||||||||||
| Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | Standard | Mobile | CSS3 | |
| @Media | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| Style Element | ||||||||||||||||||||||||
| <style> in <head> | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||
| <style> in <body> | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| Link Element | ||||||||||||||||||||||||
| <link> in <head> | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| <link> in <body> | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| Selektoren | ||||||||||||||||||||||||
| * | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| E | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| E[foo] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| E[foo="bar"] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| E[foo~="bar"] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| E[foo^="bar"] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| E[foo$="bar"] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| E[foo*="bar"] | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| E:nth-child(n) | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:nth-last-child(n) | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:nth-of-type(n) | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:nth-last-of-type(n) | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:first-child | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| E:last-child | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:first-of-type | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:last-of-type | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:empty | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:link | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| E:visited | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:active | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:hover | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:focus | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| E:target | 1 | |||||||||||||||||||||||
| E::first-line | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| E::first-letter | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| E::before | 1 | 1 | 1 | |||||||||||||||||||||
| E::after | 1 | 1 | 1 | |||||||||||||||||||||
| E.classname | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||
| E#id | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| E:not(s) | 1 | 1 | 1 | |||||||||||||||||||||
| E F | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| E > F | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||
| E + F | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| E ~ F | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| Text & Fonts | ||||||||||||||||||||||||
| @font-face | ||||||||||||||||||||||||
| direction | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| font | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| font-family | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| font-style | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| font-variant | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| font-size | 1 | 1 | 0,5 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| font-weight | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| letter-spacing | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| line-height | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| text-align | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| text-decoration | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| text-indent | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| text-overflow | 1 | 1 | 1 | 1 | 0,5 | 0,5 | 1 | 1 | 0,5 | 0,5 | 0,5 | 0,5 | 1 | 1 | ||||||||||
| text-shadow | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| text-transform | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| white-space | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| word-spacing | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| word-wrap | 0,5 | 0,5 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||
| vertical-align | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| text-fill-color | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| text-fill-stroke | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| Color & Background | ||||||||||||||||||||||||
| color | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| background | 0,5 | 1 | 1 | 0,5 | 1 | 1 | 1 | 1 | ||||||||||||||||
| background | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| background-color | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| background-image | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| background-position | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| background-repeat | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| background-size | 1 | 1 | 1 | 1 | 0,5 | 0,5 | 0,5 | 0,5 | ||||||||||||||||
| HSL Colors | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||
| HSLA Colors | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| Opacity | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| RGBA Colors | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| Box Model | ||||||||||||||||||||||||
| border | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| border-color | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| border-image | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| border-radius | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| box-shadow | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| height | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| margin | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| padding | 0,5 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| width | 0,5 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| max-width | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| min-width | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| Positioning & Display | ||||||||||||||||||||||||
| bottom | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| clear | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| clip | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| cursor | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| display | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| float | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| left | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| opacity | 1 | 1 | 1 | 1 | ||||||||||||||||||||
| outline | 1 | 1 | 0,5 | 0,5 | 1 | 1 | 0,5 | 0,5 | 0,5 | 0,5 | 1 | 1 | ||||||||||||
| overflow | 1 | 1 | 0,5 | 1 | 0,5 | 0,5 | 0,5 | |||||||||||||||||
| position | 1 | 0,5 | 1 | 1 | 1 | |||||||||||||||||||
| resize | 1 | 1 | 1 | 1 | 0,5 | 0,5 | 1 | 1 | 0,5 | 0,5 | ||||||||||||||
| right | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| top | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| visibility | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||
| z-index | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| Lists | ||||||||||||||||||||||||
| list-style-image | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||||
| list-style-position | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| list-style-type | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |||||||||||||||||
| Tables | ||||||||||||||||||||||||
| border-collapse | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| border-spacing | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| caption-side | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| empty-cells | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||||
| table-layout | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | ||||||||||||||||
| HTML 5 | ||||||||||||||||||||||||
| <canvas> | 1 | 1 | ||||||||||||||||||||||
| <audio> | 1 | 0,5 | 1 | |||||||||||||||||||||
| <video> | 1 | 0,5 | 1 | |||||||||||||||||||||
| Sum | 33,5 | 3 | 1 | 74,5 | 14 | 3,5 | 106 | 15 | 16 | 76,5 | 9 | 7,5 | 107 | 15 | 16 | 63,5 | 7 | 6 | 52,5 | 7 | 4 | 94 | 14 | 10,5 |
| Counted tags | 111 | 111 | 111 | 111 | 111 | 111 | 111 | 111 | ||||||||||||||||
| Counted CSS3 tags | 16 | 16 | 16 | 16 | 16 | 16 | 16 | 16 | ||||||||||||||||
| Counted needed CSS Tags for mobile | 15 | 15 | 15 | 15 | 15 | 15 | 15 | 15 | ||||||||||||||||
| Outlook 2007/10/13 + | Outlook 03/Express/Mail | iPhone iOS 7/iPad | Outlook.com | Apple Mail 6.5 | Yahoo! Mail | Google Gmail | Android 4 (Gmail) + | |||||||||||||||||
| Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | Standard | CSS3 | |||||||||
| relativ counts to all tags | 0,30 | 0,2 | 0,06 | 0,67 | 0,93 | 0,21 | 0,95 | 1 | 1 | 0,68 | 0,6 | 0,46 | 0,96 | 1 | 1 | 0,57 | 0,46 | 0,37 | 0,47 | 0,46 | 0,25 | 0,84 | 0,93 | 0,65 |
CSS Landscap based of the Tag Overview
Email CSS Landscape CSS vs. CSS http://www.stefan-mies.com/wp-content/uploads/2014/09/2014-09-25-10_18_32-css-email-landscap-css-vs-css3.xlsx.png
Email CSS Landscape CSS vs. Mobile http://www.stefan-mies.com/wp-content/uploads/2014/09/2014-09-25-10_18_32-css-email-landscap-css-vs-mobile-needed-css.png
