Embedded CSS often breaks in webmail apps like Gmail and YahooMail. In order to make it work properly, you have to turn it all into inline CSS. Besides making you feel dirty all over, inlining your CSS in HTML email is just plain tedious.

So we made it automatic in MailChimp.

Details and a demo video after the jump…

• tagname
• class
• has attribute
• attribute value equals
• attribute value is one of
• attribute value contains
• attribute hyphen value
• attribute value begins with
• attribute value ends with
• pseudo-classes first-child
• last-child
• only-child
• empty
• not
• nth-child
• child
• descendant
• sibling

Just a little love for our advanced code monkeys.

So we just upgraded our HTML Email template designer to work for Gmail. It uses inline-CSS to add the padding for proper Gmail rendering. In other email programs, where CSS doesn’t work, our templates fail gracefully to use the old-fashioned cellpadding. Here’s a before-and-after screenshot (click to zoom in):

MailChimp users: This only applies to brand new templates, created after February 15th. Normally, we like to make changes like this retroactive, but this was one of those changes to our code base that just wouldn’t allow for that.  So if you want your templates to work perfectly in Gmail, you’ll need to create all new ones in MailChimp. Otherwise, your templates will work fine in all the other major email programs. If you’re looking for an excuse not to go through the work of creating new templates, you can always say, “That’s Gmail’s problem, because they’re still in friggin’ beta.”

For me, this was just a good excuse to sit down and tweak all my old templates, and to go ahead and make a few more (see: 7 basic email templates every business needs).