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.
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
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:
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.
Here’s the JavaScript that powers the utility.