juice
juice copied to clipboard
Automattic
<!--[if die msg 9]--> is killing juice for inner contents :(
The HTML at the bottom is a result from running juice on. You will note that the table td has 3 classes, none of which expand into styles
Before Juice
<table width="100%">
<tr>
<td colspan="2" align="center">
<!--[if gte mso 9]>
<table><tr>
<td class="mso-button blueBg montserrat"><a href="http://google.com">TEXT ONLY BUTTON</a></td>
</tr></table>
<![endif]-->
<a href="http://google.com" class="button blueBg montserrat" style="mso-hide: all" title="view full report">view full report</a>
</td>
</tr>
</table>
After Juice
<table width="100%" style="margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-collapse: collapse; border-spacing: 0;" valign="baseline">
<tr style="margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;" valign="baseline">
<td colspan="2" align="center" style="margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;" valign="baseline">
<!--[if gte mso 9]>
<table><tr>
<td class="mso-button blueBg montserrat"><a href="http://google.com">TEXT ONLY BUTTON</a></td>
</tr></table>
<![endif]-->
<a href="http://google.com" class="button blueBg montserrat" style="font: inherit; vertical-align: baseline; font-family: Montserrat, Arial, sans-serif; border: 1px solid #000; font-size: 14px; width: 230px; padding: 5pt 15pt; background-color: #0254A5; margin: 2em 0; border-radius: 5px; color: #ffffff; text-decoration: none; text-transform: uppercase; line-height: 25px; letter-spacing: 2px; display: block; mso-hide: all;" title="view full report">view full report</a>
</td>
</tr>
</table>
It would REALLY help to be able to get around this, Appreciate the effort!
I got around it by running this just prior to saving the file. I know the code sucks, just test code:
In the HTML I replace the open and close with the office-only tag seen below
html = html.replace('<office-only>', '<!--[if gte mso 9]>')
.replace('</office-only>','<![endif]-->')
That TD is inside a COMMENT. Juice doen't consider "IE conditional comments" as something different from a comment.
In my opinion, you don't usually need to inline css in conditional comments, because clients supporting conditional comments usually support "non-inline" styles.
BTW, there is no "right thing": it is just opinions about "how to inline". Please note that when you "uncomment" you're altering the structure so the inlining process can change also outside from the comment and sometimes this is not what you expect.
Let me show a case:
.outlook p { color: red }
<!--[if mso]><body class="outlook"><![endif]-->
<!--[if !mso]>--><body><!--[endif]-->
<p>hello</p>
</body>
Most people won't like to see
<p style="color: red">hello</p>
as the result of the inliner, because that style was meant to be used by outlook only, and inlining it break the spirit of the css rule.
Also, please note that applying the inlining to any conditional comments can also bring more issue. Let me do a second example:
<!--[if mso]<table class="mso"><![endif]-->
<!--[if ie]<table class="ie"><![endif]-->
<!--[if !mso & !ie]--><table class="other"><!--[endif]-->
<tr><td>Cell</td></tr>
</table>
If you replace the comments so to "promote" the commented code to real code then you are breaking the DOM and probably also breaking the whole inlining process because you expose 3 OPENS for the same tag that is closed only one. This will happen more often that you may expect.
So, in my opinion this should be closed as "not a bug" or "won't fix".
PS: IMHO your "workaround" will break things, too... it just work in your specific example but won't work when the code inside the conditional comment is not "a single dom tree"... you may have tags opened inside a conditional comment and closed inside a different conditional comment.. your workaround will break in pieces in this case (your best option is to replace them with other comments
html = html.replace('<!-- officeonly -->', '<!--[if gte mso 9]>')
.replace('<!-- /officeonly -->','<![endif]-->')
This is just a little more solid than your solution, but it will be easy to break it with my previous examples.
PS: I know how most inliners works (see my article there http://mosaico.io/email-client-tricks/email-inliners/ ) and I can tell you than only 1 (campaign monitor inliner) tries to inline styles inside conditional comments.