What is the CSS Inline Transformer?

Most email clients strip out style tags (styles) in HTML emails making it difficult to implement quality designs in emails. In order to realize these designs, inline styles are an acceptable workaround and helps guarantee that emails will be rendered more successfully.

Any email template designer that has to maintain code for an email will build a CSS stylesheet. Rather than writing style attributes in markup, sticking with the power of cascading rules means sticking with a standard development flow -- with defining CSS and HTML separately.

The CSS Inline Transformer will transform CSS styles + HTML markup into a single HTML payload with all styles applied inline. While there are services out there that offer similar functionality, this utility is unique because it's completely done client side - meaning that your email data isn't transferred to a server or anywhere else.

If you're implementing beautifully designed emails, it is important to incorporate the inline transformer into your workflow. One process might look like:

> Email content and messaging created (and reasonably modifiable) by marketing team
> Deliver messaging + design to email template designer
> Designer implements html markup around content and messaging
> Construct CSS stylesheet corresponding to newly added html markup
> Have the CSS styles apply inline to the email to be sent using CSS Inline Transformer
> Send with email template

What does it do?

Conceptually, it's pretty straight forward -- it is possible to use jQuery and the rendering capabilities of the browser, and then extract the associated HTML with their computed styles defined inline.

First, a new document 'styleSheet' object must be created. Using native Javascript, you can construct the new stylesheet using: document.createElement('style'). Isolate any collisions with the existing browser styles by creating a new window with the HTML, and starting with a clean stylesheet applying the CSS.

After integrating custom styles into the stylesheet object, loop through all the cssRules and get the 'selectorText' field as part of the native cssRule object. This selector text can be used with jQuery (thanks Sizzle), as selector expressions. Passing this selector text into the jQuery object, will return an array of the various different DOM elements to have the styles applied to.

The array of elements that the CSS rule applies to, can be chained with the jQuery.css method to effectively apply those styles, which will result in our HTML with inline styles. So basically with the list of nodes, using jQuery(items).css({prop: value, _prop: _value}).

Once the HTML has inline style definitions the process is complete. As part of this utility, the new window will close, and the original window will be returned  to, and the HTML will be displayed for you to take. Once polishing up, the HTML markup will no longer contain the <style> definition, so it can be used immediately for email.

How to use the tool

Copy and paste your HTML snippet that you want to apply the inline styles to, then hit Build HTML.

(!) You must put the stylesheet in ONE style tag, and define type='text/css'.
(!) You must include the <html>, <head> and <body> tags

Technical details

This tool has been written in JavaScript, and utilizes the jQuery library. Feel free to check out the JavaScript at https://tikku.com/client-side-css-inliner/.

Provide your HTML with a <style> tag containing all your CSS.

Email Ready HTML