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 into HTML inline style attributes in your 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 from GitHub and use it in your own applications.
Enter Your Code
- NEW: Emogrifier will grab existing inline style attributes and will grab <style> blocks from your HTML but it will not grab CSS files referenced in <link> elements (the problem email clients are going to ignore these tags anyway, so why leave them in your HTML?).
- Even with CSS inline styles, certain CSS properties are ignored by certain email clients. For more information, review documentation here.
- All CSS attributes that apply to a node will be applied, even if they are redundant. For example, if you define a font attribute and a font-size attribute, both attributes will be applied to that node (in other words, the more specific attribute will not be combined into the more general attribute).
- There's a good chance you might encounter problems if your HTML is not well formed and valid (DOMDocument might complain). If you get problems like this, consider running your HTML through Tidy before you pass it to Emogrifier.
- Finally, 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).
Download Emogrifier from GitHub
Not working for you?
If Emogrifier doesn't work for you, you might want to also try Premailer.