Conditional CSS Comments for Outlook 2007

The team at SitePoint have recently implemented the use conditional CSS comments in email, targeting Outlook 2007 specifically.

Conditional comments first made their arrival to target specific versions of Internet Explorer. With these comments, you can write specific CSS rules for any internet browser. Check out some quick guidelines here.

The code to target Outlook 2007:


Now you wouldn't use this code all that often. Campaign Monitor gives us an example of using it with unordered lists. Apparently, ULs (with bullets) don't appear with bullets in Outlook 2007, so in this case, it would be a perfect time to incorporate a conditional comment.

If you start using this technique, comment below and tell us your thoughts. We'll start employing this technique as well so check back for any further developments.

Why Can't More ESPs Offer This?

Continuing in their tradition of providing genius features to their interface, MailChimp now offers a CSS Fixer for HTML emails. The CSS inline tool solves the issues of emails breaking when CSS styles are not set inline and are instead embedded towards the top of the HTML within style tags. See their demo video below:



Of course, you still need to know your limits with CSS for email. Don't use padding, margin, position or any other properties found on this page with a red X next to it.

CSS in the Year 2007

The fine folks at Campaign Monitor just recently published their “Guide to CSS Support in Email: 2007 Edition”. Since their last CSS wrap up, a lot has changed – unfortunately in the wrong direction – mostly having to do with Outlook 2007’s refusal to incorporate IE’s HTML rendering engine, instead opting for Word’s mediocre engine.

It isn’t all bad news though. Yahoo!, the leading web-based email client, just released their new interface, which has the most CSS compliance than any of the other competing web-clients such as Gmail and the new Window’s Live Mail service. Lets just hope that the majority of the existing users will adopt the new interface.

They conclude that table-based email designs with inline styles are a sure-fire way to ensure that your emails render correctly for both B2B and B2C purposes.

They wrap up their study quite nicely with this easy-to-reference chart in .pdf format that you can find right here.