CSS inliner

Summary

EasyEditor has a built-in CSS inliner, which helps to speed up development and make it easier for you to globally change styles.

Some email clients render CSS only if it is inline, therefore our CSS inliner takes style blocks and converts them to inline styles. For example, the following example does not render correctly in Gmail because the CSS is in a style block:

<style ee-render="inline">
.big-text { font-size: 30px; }
</style>

<p class="big-text">My text</p>

But, this example does render correctly in Gmail because the CSS is inline:

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

Adding a style block to use the inliner

If you want a style block to be inlined at send time by the CSS inliner, you must add the ee-render attribute to that style block and set the attribute's value to "inline":

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

Styles that can and can't be inlined

Warning

Any CSS styles that cannot be inlined and that are in an inline style block are removed before the campaign is sent.

Generally, most CSS styles an be inline, for example:

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

However, pseudo-classes and media queries can't be inlined, for example:

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

These CSS styles are removed before the campaign is sent. The inliner will take an inline style block, inline all those CSS styles, and then remove that inline style block (to make the final HTML size smaller).

CSS style precedence

Our CSS inliner follows precedence rules in the same way as CSS on a webpage; specific selectors overwrite the general selectors.

For example:

<style ee-render="inline">
p { color: black; }
p.coloured { color: green; }
<style>


<p>Black text</p>
<p class="coloured">Green text</p>

Will become:

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

The same is true of CSS styles that are already inlined: they will follow the same rules as CSS on webpages. This means that the inline style will typically take precedence, unless the version in the style block is marked as important! So:

<style ee-render="inline">
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

Comments