Button wrapped in a Outlook conditional doesn't render

Hi,

I’ve had some issues with button alignment in Outlook so tried wrapping a working MSO specific button in the conditional below:

 <!--[if mso]>
<button href="http://example.com" class="outlook"></button>
<![endif]-->

However, when building, the button isn’t compiled as it sees everything within as a comment. Anybody have any ideas for an elegant workaround? Currently, I’m removing the opening < and this allow the button to compile. I then copy-paste the compiled HTML into my src which is a bit messy!

Thanks

See https://github.com/foundation/foundation-emails/blob/0642710cb4c7acfe6569f1f948596d15fc9e21f6/docs/pages/visibility.md for the correct syntax.

Hi DanielRuf

Thanks for your reply. Unfortunately, that doesn’t help in this scenario. I am trying to show one button in ‘well-behaved’ clients using <!--[if !mso]><!--> and showing another version for Outlook clients using <!--[if mso]>.

The first button is compiled the second is ignored as the compiler likely sees it as a regular comment.

Try to set removeComments: false or ignoreCustomComments.

But I’m not sure if this is the cause. Can you share your package.json, the used gulpfile and the gulp-htmlmin version that is installed?

Hi,

I set removeComments: false and also tried the more promising processConditionalComments: true but no luck.

FWIW I did find a better workaround which involved wrapping the conditional with <!-- htmlmin:ignore -->. So in this example:

<!-- htmlmin:ignore -->
<!--[if mso]>
<!-- htmlmin:ignore -->
<button href="http://example.com" class="outlook"></button>
<!-- htmlmin:ignore -->
<![endif]-->
<!-- htmlmin:ignore -->

I’m sure there’s a setting in HTMLMinifier somewhere but this will do for now. Thank you for your assistance.

I guess it is fixed in later versions of html-minifier.

See also https://github.com/kangax/html-minifier/issues/838