rohk / PreMailer.Net

C# library that moves your stylesheets to inline style attributes, for maximum compatibility with E-mail clients.

PreMailer.Net

C# Library for moving CSS to inline style attributes, to gain maximum E-mail client compatibility.

Usage

Static method on PreMailer class

string htmlSource = File.ReadAllText(@"C:\Workspace\testmail.html");

var result = PreMailer.MoveCssInline(htmlSource);

result.Html 		// Resultant HTML, with CSS in-lined.
result.Warnings 	// string[] of any warnings that occurred during processing.

Set up PreMailer instance

string htmlSource = File.ReadAllText(@"C:\Workspace\testmail.html");

var pm = new PreMailer(htmlSource);
pm.AddAnalyticsTags(source, medium, campaign, content, domain = null); // Optional to add analytics tags

var result = pm.MoveCssInline(...);

result.Html 		// Resultant HTML, with CSS in-lined.
result.Warnings 	// string[] of any warnings that occurred during processing.

Options

The following options can be passed to the PreMailer.MoveCssInline method to configure it's behaviour:

• removeStyleElements(bool = false) - Removes elements that were used to source CSS (currently, only style is supported).
• ignoreElements(string = null) - CSS selector of element(s) not to inline. Useful for mobile styles (see below).
• css(string = null) - A string containing a style-sheet for inlining.
• stripIdAndClassAttributes(bool = false) - True to strip ID and class attributes.
• removeComments(bool = false) - True to remove comments, false to leave them intact.

Media queries

If you want to apply mobile styles to your e-mail, you should put your mobile specific styles in its own style block that targets the appropriate devices using media queries.

But since you cannot know by the time of sending an e-mail wether or not it will be viewed on a mobile device, the style block that targets mobile devices should not be inlined!

To ignore a style block, you need to specify an ignore selector when calling the MoveCssInline method, like this:

var result = PreMailer.MoveCssInline(input, false, ignoreElements: "#ignore");

And your mobile specific style block should have an ID of ignore:

<style type="text/css" id="ignore">.target { width: 1337px; }</style>

Premailer specific CSS becomes HTML attributes

Premailer looks for the use of CSS attributes prefixed with -premailer and will proxy the value through to the DOM element as an attribute.

For example

table {
    -premailer-cellspacing: 5; 
    -premailer-width: 500;
}

will make a table element render as

<table cellspacing="5" width="500">

Notes

• Pseudo classes/elements are not supported by CsQuery (which PreMailer.Net uses internally). Any that are encountered in your HTML will be ignored and logged to the InlineResult.Warnings collection.

Installation

NuGet: PreMailer.Net

Contributors

• martinnormark
• robcthegeek

Among others

License

PreMailer.Net is available under the MIT license. See the LICENSE file for more info.