For 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.
Sweet.
Too bad you didn’t have this before my re-education program :)
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!
you guys are just AWWWWESOME! Keep it up!
I love you chip.
Nice. Looking forward to trying this out.
You just made my life with this feature!
Fabulous! That was the big holdout for us. We’re switching to MailChimp soon.
Sweet, but how about the email programs that delete all css code? I use only the old school HTML code and success is guaranteed.
You guys are so good at what you do. What a genius idea!
Great tool!!! Keep up the good work!
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).
[...] CSS-Inliner – we take your embedded CSS code, and automatically turn it into inline-CSS, so it renders properly in all the email readers [...]
Can I get source code of this converter tool
We don’t provide source code for this. I believe there are places on the intertubes where you *can* get source code. If you just want to access our css inliner w/out getting into MailChimp, we offer it as a standalone tool here: http://beaker.mailchimp.com/inline-css
essential post…many thanks
This link to the inline css converter – SAVED ME HOURS OF WORK! Thank you ever ever so much – I’m already a fan and member – but really this just puts you over the top :)
Is this functionality still in place with the new design? I don’t seem to see it in the current Campaign Builder.
I uploaded zip file,which made by Publisher, but when i click popup review, it showed that out of 600 pix, but i design size of htm file following email size in Publisher. So i cannot uploaded properly, if possible, could i just send my original file to you guys, ang can you help me to upload!
Hi,
I can’t find your CSS inliner tool which was located
on http://blog.mailchimp.com/labs/inlinecss.php
Ah, when we moved our blog, a lot of relative links got re-arranged improperly.
Since we innovate and move things a lot, it’s best to point you here:
http://mailchimp.com/labs/
where you can find the inliner (and other experiements) listed.
Direct link is:
http://beaker.mailchimp.com/inline-css
[...] 99% of your CSS won’t work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.). That means no CSS-positioning, DIVs, etc. Before you ask me for a detailed list of what works and what doesn’t, just remember this (it’ll save us all a lot of time): When your email is opened in Gmail, for example, the CSS in your HTML email could potentially override the CSS on the rest of their page. So they disable a lot of it. Inline CSS is safer, and plain-old FONT tags are safest (code like it’s 1996, remember?). Or check out MailChimp’s CSS inliner tool. [...]
wts the fun of this feature if it is not available in design view of mailchimp,if i design my template which supports mailchimp inbuilt themes,i have to use classes,ids for that …and when i import it in design view there is no feature of inline css after editing is done..