CSS Browser Extensions in HTML Emails


CSS Browser Extensions in HTML emailsHere at Email on Acid, it’s our number one priority to help you resolve email rendering issues as quickly and efficiently as possible. Our code analysis was specifically designed to process your HTML email and highlight individual lines of code that are not supported in each email client. We have also consolidated the advice from each of our blog articles and added them as tips and tricks to our Acid Test results.

With that said, we’ve recently added support for Mozilla, Webkit and Microsoft CSS extensions (for example: -moz-outline-radius, -webkit-border-radius, and -ms-text-justify). To learn more about the various CSS browser extensions that are available, feel free to check out these resources:

Here is what our research showed:

  HTML5 Button ElementEmbedded Button Appearance PropertyInline Button Appearance PropertyEmbedded Moz ExtensionsInline Moz ExtensionsEmbedded Webkit ExtensionsInline Webkit ExtensionsEmbedded Microsoft ExtensionsInline Microsoft Extensions
AOLyyyyyyynn
Gmailynnnnnnnn
Hotmailynnnnnnnn
Yahoo Betaynnnnnnnn
Yahoo Classicynnnnnnnn
Yahoo Newynnnnnnnn
 
Entourage 04nnnnnnnnn
Entourage 08nnnnny – somey – somenn
Live Mailynnnnnnnn
Lotus Notes 6.5nnnnnnnnn
Lotus Notes 7nnnnnnnnn
Lotus Notes 8yy – moz onlyy – moz onlyyynnnn
Lotus Notes 8.5yy – moz onlyy – moz onlyRemoves Entire Style Blocky – someRemoves Style BlocknRemoves Style Blockn
Mac Mailyy- webkit onlyy- webkit onlynny – somey – somenn
Outlook 2003ynnnnnnnn
Outlook 2007nnnnnnnnn
Outlook 2010nnnnnnnnn
Outlook Expressynnnnnnnn
Thunderbird 2yy – some mozy – some moz yynnnn
Thunderbird 3yy – some moz y – some mozyynnnn
Windows Mailynnnnnnnn
 
Android Mailyy – some webkity – some webkitnny-some (IDs ONLY)y-somenn
Android Gmailynnnnnnnn
iPadyy- webkit onlyy- webkit onlynnyynn
iPad Gmailynnnnnnnn
iPhoneyy- webkit onlyy- webkit onlynnyynn
iPhone Gmailyy- webkit onlyy- webkit onlynnnnnn

Next we are moving on to HTML 5 and CSS3 – Stay tuned for our results!

Author:

5 thoughts on “CSS Browser Extensions in HTML Emails”

  1. What’s the point of “button html element”?

    I can’t find a way to use a “button” with no javascript and no forms support.

    Is your “Yes” related to a working button (working forms) or simply a “visibile” button (even if it doesn’t do anything when clicked)?

    Also, what is, in your opinion, the use case of appearance property in email design?

    Thank you for the great blog!

  2. Stefano, you are right, I should have been more explicit here. The “Button” I am referring to is the new HTML5 Button: .

    It can be styled with several “appearance properties” both using webkit and moz browser extensions. Check the links above for more on those.

  3. I still don’t understand if “y” under the “button” column means.

    Does it work when used inside a form?
    Or does it work using a “formaction” attribute?
    Or simply it is visible but you didn’t test if it works?

    And, what does the “n” means? Is the email rendered like no button is present at all? Or anything else?

  4. Stefano,

    I was just testing to see if the button was visible. If it was, I indicated a “y” – if not, I indicated an “n.”

    From there, I was testing to see if the appearance properties worked within the button itself. If you check out this reference for Mozilla: https://developer.mozilla.org/en/css_reference/mozilla_extensions – there are over 84 appearance properties for the HTML5 button.

    You bring up a good point, I would be happy to do further testing and report back on which clients support forms and form actions.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies