The clever team over at SitePoint recently discovered a neat way to target Microsoft Office, and most importantly Outlook 2007 using conditional comments in your CSS.
For those new to the concept, conditional comments are a Microsoft only technique historically used to target specific versions of Internet Explorer. For example, you can write a separate set of CSS rules that will only be applied to Internet Explorer 6. You can read all about them and see examples here.
Importantly for us email designers, James Edwards from SitePoint has discovered that using the following conditional comment, you can actually target Outlook 2007.
<!--[if gte mso 9]>
// This CSS will only be seen in Outlook 2007
<![endif]-->Why would I use this?
Most of the time you probably wouldn’t. As Mat recommended back in May, you really should be coding your email newsletters using tables and inline CSS to get the best results across the board anyway. This approach generally leads to a good result in Outlook 2007 without the need for special hacks (see exactly what CSS properties and selectors Outlook 2007 supports here).
However, there are plenty of times when every email client plays nice with your design, but for some reason Outlook 2007 just won’t come to the party. We see plenty of examples of this when helping our customers with coding issues. If you’re in this frustrating position, this conditional comment method is a handy way to add Outlook 2007 specific code to try and fix the rendering issue without messing your design up in all other email clients.
An example of the method in action
To illustrate how handy this technique can be, I created a simple test email shown below. If anyone has tried to design an email with unordered lists , you’ll know that Outlook’s support is shaky at best. Here’s the code for my test:
The CSS
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-position: inside;
}
ul li {
font: normal 12px arial, helvetica, sans-serif;
}
</style>The HTML
<p>Here is a list:</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>The screenshot on the left is how my email rendered in Outlook 2003, and on the right in Outlook 2007.
As you can see, Outlook 2007 refuses to show my bullets, whereas Outlook 2003 (and all other email clients) show them just fine. Using the conditional comment, I’ll add some extra CSS for Outlook 2007 only that fixes the issue by adding an additional left margin to the unordered list.
The updated CSS with conditional comment
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-position: inside;
}
ul li {
font: normal 12px arial, helvetica, sans-serif;
}
</style>
<!--[if gte mso 9]>
<style>
ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->With the new Outlook 2007 only CSS, I get the following results. Notice that the bullets are now visible because it recognizes the conditional CSS and applies the required left margin.
Impact on other email clients
When running these tests I also had a look at the impact of the conditional comments on other email clients including all flavors of Outlook, Gmail, Yahoo! Mail,
Lotus Notes, Thunderbird, Apple Mail, Hotmail and AOL. From what I could gather, they didn’t have any negative impact on these clients, but I recommend testing against them with your version before sending.
While the unordered list bug was the first example I could think of that would take advantage of this hack, I’m sure there are plenty of others. I think it’s also worth echoing that this certainly isn’t something you’ll need to use all the time. But, for those odd occasions that Outlook 2007 is making life difficult, this could just be your saving grace.
