TIKKU.COM Home Page   »   CSS Inline Transformer

CSS Inline Transformer

Disclaimer

1. Do not include the 'body' tag in the HTML or CSS

What is this for? What does it do?

Inspired by MailChimp's CSSInliner --

Apparently email clients strip out style tags (stylesheets) if included in pretty, HTML emails. This is painful for any email template designer as that means to ensure that the actual design is maintained, the CSS styles have to be written inline. Ouch!

The ideal scenario would be:

> Email content and messaging created (and reasonably modifyable) 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
> Ready with email template

After seeing what MailChimp was offering, I figured maybe I could do the same thing using Javascript and jQuery, and open it up.

Conceptually, it's pretty straight forward.

First, you want to create a new document 'styleSheet' object. Using native Javascript, you can construct the new stylessheet using: document.createElement('style').

Place the styles desired to be applied, into the created stylesheet and append it to <head>. Once appended, loop through all the cssRules from the stylesheet and get the 'selectorText' field as part of the native cssRule object.

This selector text can be applied to what jQuery is notorious for thanks to Sizzle, as a selector expression. Passing this selector text into the jQuery object, will return an array of the various different dom elements to have the styles applied to.

Once the array of elements to be modified are returned, put the styles into an 'Object' so that it can then be applied to the array of elements by using the handy jQuery css method, jQuery.css({prop:value, _prop:_value}); Once applied, the styles will appear inline.

Grab the inline HTML and then return it to the user by injecting it into some sort of div.

How do I use this tool?

First, copy and paste your CSS into the textarea (Tab 1).
Second, copy and paste your HTML into the textarea (Tab 2).
Finally, select the third tab and observe the re-processed inline styled HTML.

Give me some technical details

This tool has been written in JavaScript, and utilizes the jQuery library.
To check out the JS: css_inline_transformer.js.

Problems / Questions?

Feel free to email me, Nirvana Tikku.

Copy and paste your CSS snippet into this textarea Don't include the <style> tags. Just paste the CSS .

Copy and paste your HTML snippet that you want to apply the inline styles to. Don't include the <body> tag

Here you go. Below is your HTML with inline styles.


Nirvana Tikku, Tikku.com © 2010-2012