CSS Inline Transformer

Apparently designing emails and email campaigns are a painful process, particularly when it comes to styling them up.. Why? Cause the CSS styles have to be written inline in order to work across all email clients (particularly Gmail) that traditionally strip out potentially malicious tags (script/style,etc..) as a result leaving markup ONLY.

Since IE5 (when stylesheets were finally at a more 'standard compliant' stage for the first time - CSS1) we've been able to easily abstract styles from markup. Web developers have worked hard to maintain CSS's growth by implementing for standards compliant CSS2 browsers (yeah, I know UI engineers just twitched, but generally speaking...) and continue to work even harder in an effort that CSS3 will be embraced more timely than its predecessors.  So now, it appears that all the progress is rendered useless and we have to go back to before IE5 times for a pretty significant revenue generator? shudder.

Remember the days when HTML tags were laden with inline 'style attributes', making it (almost) impossible to decipher tags and attribute settings with content/text?

Web clients available from email campaign providers are notorious for their poor WYSIWYG (what you see is what you get) editors, that do not maintain any tab delineation or document structure, as a result making the email a nightmare to look at while creating.

How about sticking to what we do best? Let marketing create the content, and let the developer create the stylesheet ontop of their semantically defined and clearly written out HTML. Sounds good, right? Right.

With JavaScript and jQuery on fire recently, I thought what better place for implementing a little script that inspects a given stylesheet, traverses through the rules present in that sheet with each selector text utilizing jQuery's awesomeness, and then inspecting the rules only to end up applying them to the selectors defined HTML code, using jQuery's 'css' method - that essentially inlines styles.

So what does the code look like? (Note: This was thrown together on FireFox, and I haven't drilled down to figure out why it doesn't work in Chrome yet, but I will update this when I get a cross browser solution)



I've put it up for use, if ever this comes in handy. Check it out at http://www.tikku.com/css-inline-transformer Alternatively, you can bring the code in house and as long as you utilize jQuery and FireFox.