Embedded CSS Fixer for HTML Email
June 21, 2008 – 10:45 amFor those of you who code your own HTML email, you probably know that CSS isn’t fully supported in all the different email programs.
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.
12 Responses to “Embedded CSS Fixer for HTML Email”
Sweet.
Too bad you didn’t have this before my re-education program
By Steve Powell on Jun 21, 2008
eeekk eeekk eeek! this is great! you deserve a chocolate covered banana!!
This is going to help save me a lot of time and editing my html email going forward. It’s always time consuming taking my css and inlining it!
By Tinch on Jun 23, 2008
you guys are just AWWWWESOME! Keep it up!
By jon barlow on Jun 24, 2008
I love you chip.
By John on Jun 24, 2008
Nice. Looking forward to trying this out.
By philldo on Jun 24, 2008
You just made my life with this feature!
By Kevin Vess on Jun 24, 2008
Fabulous! That was the big holdout for us. We’re switching to MailChimp soon.
By Craig on Jun 24, 2008
Sweet, but how about the email programs that delete all css code? I use only the old school HTML code and success is guaranteed.
By Steven van der Kwartel (The Netherlands) on Jun 24, 2008
You guys are so good at what you do. What a genius idea!
By Ben on Jun 24, 2008
Great tool!!! Keep up the good work!
By Justin Ewert on Jun 24, 2008
Thanks for all the great commments! The truth is, we’ve been doing this ever since late 2006, when we introduced our built-in HTML email templates.
When you design a template in MailChimp, you can edit your header’s background-color, text-alignment, font-size, etc. Click the “Body” tab in the interface, and you can edit the body’s headline-font, default-text-size, font-color, padding, etc.
The interface you’re using to tweak all that is being dynamically generated, based on the embedded CSS within our base layout code. Which, if you think about it, has wonderful implications for people who love to code their own emails, but also want their clients to have a WYSIWYG to edit them (yep, that’s coming soon).
We were also using this stuff in the free list signup forms you get in MailChimp.
Anyway, we wanted to make this a feature for you advanced coders a long time ago, but we had to get v3 live first.
We’ve got more cool stuff coming soon (already working on v3.2).
By Ben on Jun 25, 2008