CSS Browser Extensions in HTML Emails

5

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 Element Embedded Button Appearance Property Inline Button Appearance Property Embedded Moz Extensions Inline Moz Extensions Embedded Webkit Extensions Inline Webkit Extensions Embedded Microsoft Extensions Inline Microsoft Extensions
AOL y y y y y y y n n
Gmail y n n n n n n n n
Hotmail y n n n n n n n n
Yahoo Beta y n n n n n n n n
Yahoo Classic y n n n n n n n n
Yahoo New y n n n n n n n n
Entourage 04 n n n n n n n n n
Entourage 08 n n n n n y – some y – some n n
Live Mail y n n n n n n n n
Lotus Notes 6.5 n n n n n n n n n
Lotus Notes 7 n n n n n n n n n
Lotus Notes 8 y y – moz only y – moz only y y n n n n
Lotus Notes 8.5 y y – moz only y – moz only Removes Entire Style Block y – some Removes Style Block n Removes Style Block n
Mac Mail y y- webkit only y- webkit only n n y – some y – some n n
Outlook 2003 y n n n n n n n n
Outlook 2007 n n n n n n n n n
Outlook 2010 n n n n n n n n n
Outlook Express y n n n n n n n n
Thunderbird 2 y y – some moz y – some moz y y n n n n
Thunderbird 3 y y – some moz y – some moz y y n n n n
Windows Mail y n n n n n n n n
Android Mail y y – some webkit y – some webkit n n y-some (IDs ONLY) y-some n n
Android Gmail y n n n n n n n n
iPad y y- webkit only y- webkit only n n y y n n
iPad Gmail y n n n n n n n n
iPhone y y- webkit only y- webkit only n n y y n n
iPhone Gmail y y- webkit only y- webkit only n n n n n n

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

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

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.

Comments are closed.