CSS inliner

Summary

EasyEditor now has a CSS inliner to speed up development and make it easier for you to globally change styles.

We have made sure our new-style responsive templates make full use of this feature, but it is available for use in our older style templates too.

What is a CSS inliner?

Emails, in many email clients, require styles to be inline, rather than in a style block. For example, in Gmail, this will work:

<p style="font-size: 30px;">My text</p>

But this will not:

<style>
.big-text { font-size: 30px; }
</style>
<p class="big-text">My text</p>

Our CSS inliner will take the latter example, and turn it into the former when you send your campaign. So this:

<style>
.big-text { font-family: arial; }
</style>
<p class="big-text">My text</p>
<p class="big-text">Some more text</p>

Will become this when you send:

<p class="big-text" style="font-size: 30px;">My text</p>
<p class="big-text" style="font-size: 30px;">Some more text</p>

Adding a style block to use the inliner

By default, a style block will not be inlined. If you want a style block to be inlined at send time, simply add the ee-render attribute to your style block:

<style ee-render="inline">
.big-text { font-size: 30px; } /* this will be inlined at send */
</style>

What styles can and can't be inlined?

Warning

Any styles in an inline block that cannot be inlined will be removed.

In general, most styles can be inlined. Here are some examples of styles that will be inlined at send time:

p { font-size: 14px; }
.my-class { font-size: 14px; }
table td.some-class p { font-size: 14px; }

However, pseudo-classes and media queries cannot be inlined. Here are some examples of classes that will not be inlined:

a:hover { color: red; }
p:before { content: '-'; }
@media only screen and (max-device-width: 767px) {
  .red-mobile-links { color: red; }
}

These styles will be removed from the final email. The inliner will take an inline style block, inline all those styles, and then remove the style block entirely (to make the final email smaller).

However, the upshot of this is to remember to keep styles that can't/shouldn't be inlined outside of inline style blocks.

Inline style precedence

Our style inliner follows precedence rules much the same as CSS on a web page. Essentially, more specific classes will overwrite the more general ones.

For example:

<style>
p { color: black; }
p.coloured { color: green; }
<style>
<p>Black text</p>
<p class="coloured">Green text</p>

And, of course, that will become:

<p style="color: black;">Black text</p>
<p class="coloured" style="color: green;">Green text</p>

The same is true of styles that are already inlined: they will follow the same rules as CSS on web pages. That means that the inline style will usually take precedence, unless the version in the <style> block is marked as important! So:

<style>
p { color: black; }
p.coloured { color: green!important; }
</style>

<p>Black text</p><p style="color: red;">Red text</p>
<p class="coloured" style="color: red;">Green text</p>
<p class="coloured" style="color: red!important;">Red text</p>
Have more questions? Submit a request

0 Comments

Article is closed for comments.