TIKKU.COM Home Page » CSS Inline Transformer (Simplified)

CSS Inline Transformer - Simplified

What is this utility?
1. Paste HTML with Styles
2. Inlinify HTML

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'). Since we want to allow the user to include HTML as well as their styles within a style tag, we will create a new window to process the document within and append the stylesheet we're creating.

Place the styles desired to be applied, into a stylesheet. Then loop through all the cssRules 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 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.

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 within the window and then return it to the user by injecting it somwhere in the dom. Make sure to sanitize the "style" tag, and then the HTML should be all set.

How do you use this tool?

Copy and paste your HTML with the CSS in a style tag 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.
Feel free to check out the JavaScript: css_inline_transformer_simplified.js.

Problems / Questions?

Email me, Nirvana Tikku or find me on twitter @ntikku.

Copy and paste your HTML snippet that you want to apply the inline styles to.
Note: You must put the stylesheet in ONE style tag, and define type='text/css'
You must include the <html>, <head> and <body> tags

<html>
<head>
<meta charset="UTF-8">
<title>Example title</title>
<style type="text/css">
	body {margin:0px;padding:0px;}
	header { color:#999; font-weight:bold; }
	header hgroup h1, 
	header hgroup h2 { text-align:center; }
	.test-class { border:1px solid blue; color:blue; }
	.test-class h1 { font-size: 25px; }
	.test-class p { padding: 10px; *padding: 3px; }
	.test-class .link { letter-spacing: 1px; color: #abc; }
	footer .special { color:green; }
</style>
</head>
<body>
	<div class="test-class">
		<header>
			<hgroup>
				<h1>CSS Inliner Demo Header</h1>
				<h2>All in JavaScript!</h2>
			</hgroup>
		</header>
		<section>
			<p>
				This is the HTML that will be converted. It is worth noting, that any elements with 
				href and src attributes that have HTML entities will be decoded. At this time this only
				applies to the '&amp' entity and will be replaced with &. This means you should be 
				mindful of any SRC or HREF attributes with &amp; already baked in; You will have to 
				manually replace them for now. Also, as can be seen with the inlinfication of this paragraph, 
				all HTML entities will be encoded.
			</p>
			<p>
				An example of this can be seen with the following link: 
				<a href="http://site.com?k1=v1&k2=v2&k3=v3&k4=v4&k5=v4_part1&v4_part2" class="link">
					Test Link
				</a>
			</p>
			<p>
				Another example with an image and its src attribute:
				<img src="http://chart.com?w=400&h=300&title=An Example Title" class="link"/>
			</p>
		</section>
		<footer>
			Hope you find the <span class="special">CSS Inliner</span> useful!
		</footer>
	</div>
</body>
</html>

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

That took ms.

CSS Inline Transformer - Simplified

What is this utility?

1. Paste HTML with Styles

2. Inlinify HTML

What is this for? What does it do?

How do you use this tool?

Give me some technical details

Problems / Questions?