Gmail (or something) is changing my class names?

Question

Ok, this is weird. I have an HTML email template that I am trying to adjust. In the template, I have a standard

. But, the client has requested tha

Answer 1

For best support, you should probably use <table> and not <ul>. Also, margins aren't as widely supported as padding, so I'd try something like this:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="5">&middot;</td>
        <td align="left" style="padding-top: 10px;">This is a test</td>
    </tr>
</table>

Answer 2

Gmail absolutely changes classnames in your email. If you create a style sheet and send it out, it will change the classnames in the style sheet and in the email body. It will also strip out any styles that it doesn't support, sometimes the entire sheet.

These are the CSS properties and queries supported by Gmail:

https://developers.google.com/gmail/design/reference/supported_css

Good luck.

Answer 3

To expand on the answer from @gwally, I believe the REASON Gmail does this is to avoid your email from affecting the outer DOM elements of Gmail itself. If you could do this, you could effectively craft a malicious email to steal information from users with some clever CSS trickery, or 'redress' Gmail's appearance to launch some pretty nasty phishing attacks. The limitation of CSS properties is likely also as much of a security decision as a UI/UX one.

Out of curiosity, i just spent an hour fuzzing class names in emails to myself, in an attempt to bypass this mechanism. It doesn't seem possible, although I wouldn't claim any solution is bulletproof.