Overview

Developers looking to send content-rich HTML emails should know that numerous email clients do not support the transfer of HTML emails with CSS style blocks. Instead, developers are required to utilize inline style definitions and provide the complete markup in order to guarantee the widest coverage.

There are a variety of utilities available online that take CSS style definitions, along with HTML markup, and return usable HTML with the styles applied inline.

These services require sending your data over HTTP to a third party service, which you may not want to do. The CSS Inliner utility that I have created is entirely client side; there’s no need to worry about sending your content to anyone.

In the implementation I present, developers can continue to maintain their styles and markup separately (CSS and HTML files), and then use this utility to produce a single HTML output.

Code

Here’s the JavaScript that powers the utility.

Converter

The utility is available here. Chrome and FireFox are the recommended browsers.