Improved inline CSS support for @media queries and shorthand CSS

When importing a HTML email campaign (and by default for all client templates), we give you the option of automatically moving all your CSS inline. Given just how crappy some email clients are at rendering HTML email without inline CSS (grrrr, Gmail), this is something we recommend doing for all of your campaigns.

Checkbox to move CSS inline

Until recently, we didn’t do the best job inline @media queries or shorthand CSS.

Better @media support

If you recall a few months back, we showed you how handy @media queries can be when optimizing your emails for mobile devices. At the time, we recommended moving your CSS inline manually if you went down the @media path. That was pretty lame advice, as moving your CSS inline manually is a fairly painful experience.

We recently updated how Campaign Monitor handle inline CSS so that we only move certain types of @media queries inline. Specifically, we only move the following types inline:

@media {all,projection,screen}

All other media types, such as handheld, tv or those that specify a max-device-width will no longer be moved inline and work as intended.

Smarter default values for shorthand CSS

Shorthand CSS is a handy way to simplify your CSS by combining multiple properties, such as padding: 0 8px 3px 7px sets the top padding as 0 pixels, the right padding at 8 pixels,bottom at 3 and left at 7. If you’re not familiar with them, here’s a more complete rundown.

The problem is, shorthand CSS also implies a set of default values for that property if they are not explicitly set in your code. Because some email clients do a bad job of handling CSS shorthand, we expand these into longhand format when we move them inline.

Let’s say you’re using a condensed single font: declaration for a h3 like so:

h3 { font: 24px 'Helvetica Neue Light', sans-serif; }

If a value is not specified in single declaration shorthand, a default value is used (again, this is nicely covered here). For example, we’re not specifying a font-weight above, so it should just default to normal.

The problem is, if this code is moved inline and a font-weight value isn’t set, the font will be bolded (because it’s inside a h3). In our latest update, we now include the default values for all of the properties for any given element if they are not specifically set in your shorthand. So, using the example above, the inline CSS would look something like:

<h3 style="font-size:24px;font-family:'Helvetica Neue Light', sans-serif;font-weight:normal;font-style:normal;font-variant:normal;line-height:normal;">This is a heading</h3>

Sure, a bug like this is not the end of the world. But for those of you who sweat the details, it’s small tweaks like this that can make an already challenging process a little more pain-free. A big thanks must go to Cabel Sasser from Panic Software for helping spot these issues and give lots of constructive advice on the solution. The man knows his stuff.

Posted by David Greiner

1 Comment

  • Jason
    10th December

    Awesome! Both features will save time and heartache down the road. Thanks

Sign up for free.
Then send campaigns for as little as $9/month

Create an account