Sidecar ) Emogrifier
n. e•mog•ri•fi•er [\ē-'mä-grƏ-,fī-Ər\] - a utility for changing completely the nature or appearance of HTML email, esp. in a particularly fantastic or bizarre manner
This utility was developed as part of Intervals to deal with the problems posed by certain email clients (namely Outlook 2007 and Google Gmail) when it comes to the way they handle styling contained in HTML emails. As many web developers and designers already know, certain email clients are notorious for their lack of CSS support. While attempts are being made to develop common email standards, implementation is still a ways off.
The primary problem with uncooperative email clients is that most tend to only regard inline CSS, discarding all <style> elements and links to stylesheets in <link> elements. Emogrifier solves this problem by converting CSS styles into inline style attributes in your HTML code.
How it Works
Emogrifier automagically transmogrifies your HTML by parsing your CSS and inserting your CSS definitions into tags within your HTML based on your CSS selectors. You can either use the form below to paste your HTML or CSS, or if you're more technically inclined, you can download the PHP source code and use it in your own applications.
Caveats
- Paste your CSS and HTML separately. Emogrifier will grab existing style attributes, but will not grab <style> blocks (or CSS files contained in <link> elements) from your HTML. (The problem email clients are going to ignore these tags anyway, so why leave them in your HTML?)
- Even with styles inline, certain CSS properties are ignored by certain email clients. For more information, review information here and here.
- Emogrifier only supports CSS1 level selectors and a few CSS2 level selectors (but not all of them). It does not support pseudo selectors (Emogrifier works by converting CSS selectors to XPath selectors, and pseudo selectors cannot be converted accurately).
- Finally, Emogrifier parses your CSS selectors in order, meaning later selectors will override earlier selectors that apply to the same element. Ideally they would be applied in order of increasing precedence, but that's not supported yet.
