Status Quo Email

From HTML for email Community Group
Jump to: navigation, search

This Page will give a overview about thinks that Works and didn't works in the current standard


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

Supported Tags in email clients
  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

Email requiements