Automatic CSS Inlining

When sending HTML in emails, some email clients are known to remove <head> and <style> tags from your message, which means that a considerable amount of styling information that was included in these tags may be removed, causing your message to look different than you intended.

Due to this, an established best practice is to write CSS style information inline within the markup. However, following this practice when supplying manually written HTML markup is in most cases tedious work and the resulting HTML code requires repetitive usage of the same style information in various locations, especially when common tags such as <table> or <td> require special styling.

LISTSERV Maestro gives you the option to avoid this tedious work and allows you to continue using linked style sheets or style sheets supplied directly within the <head> tag or elsewhere in the HTML code.

If the Automatic CSS Inlining option is enabled for a mail job, then during delivery, the following happens:

All linked style sheets are converted into <style> tags directly in the code, so that the resulting email no longer accesses any linked style sheets. In the following steps, these converted style sheets are then handled just like other style sheets that were already included directly in the code by the content author.
All styles from all style sheets found in the code are converted into inline styles of the applicable HTML elements. Also, these styles are removed from the style sheets where they were originally declared.
After this style inlining, all style sheets that are now empty are removed from the code. But any style sheets that are not empty (because they contain style declarations that cannot be inlined, see "media queries" below) and that are found in the <head>, are now moved into the <body> of the message (right behind the opening <body> tag, and in the same order in which these style sheets were originally found in the <head>).

This of course means that the resulting message can be considerably larger, but avoids the widespread layout problems that would otherwise be caused by an email client that ignores style sheets.

Advanced Topic: Mixed Usage of Inlined and Non-Inlined Styles

In some situations it may be desirable that the styles from a given style sheet are not inlined but that the style sheet remains in the code.

For example, some older email clients require using certain vendor-specific CSS settings with selectors applying almost to all elements of the markup in your message. If you need to fine-tune your message for such email clients and are at the same time concerned that your message may be too large if these special CSS settings (which frequently have rather long names) are inlined to almost all tags in your markup, then you may want to switch off CSS inlining for some of your settings but want to benefit from it for the rest of your settings.

Maestro supports such a combined usage of inlined and non-inlined style sheets. With the automatic css inlining option enabled for the mail job, supply the data-do-not-inline attribute (as a value-less attribute) for all style tags or style sheet links that shall not be inlined, like so here:

<style data-do-not-inline>
	...
</style>

<link href="sample.css" rel="stylesheet" data-do-not-inline>

If you declare a style element like this and other style elements without this special attribute, then Maestro inlines all other style tags and skips the tag(s) with the special attribute.

Advanced Topic: Media Queries

CSS media queries are typically used to declare styling attributes specifically for certain display devices, for example to achieve different layout variations for small screens (this is also known as "Fluid" or "Responsive" layout). Maestro's CSS inliner detects media queries and leaves all associated styling rules in place, so that they still apply if the message is viewed on a targeted device. So, after inlining, this:

<style>
	hr { height: 1px; color: #dfdfdf; border-style: solid; border-color: #dfdfdf; border-width: 1px 0px 0px 0px; }
	@media only screen and (max-width: 679px) {
		table[class="container"] { width: 100% !important; }
		table[class="cell"] { width: 100% !important; }
	}
</style>

Becomes this (and the "hr" rule has been inlined to all occurrences of "hr" tags in the markup):

<style>
	@media only screen and (max-width: 679px) {
		table[class="container"] { width: 100% !important; }
		table[class="cell"] { width: 100% !important; }
	}
</style>

Advanced Topic: Drop-Ins and Recipient-Specific Content

Maestro performs CSS inlining after drop-ins have been replaced in the message and before recipient-specific mail-merge values are replaced. This means that if you have considerable amounts of HTML markup provided via mail-merge values, then this markup does not undergo CSS inlining.