Add conditional mso attribute to MJML elements

[viktorix]

Is your feature request related to a problem? Please describe.
Right now there's no easy way of adding conditional statements since they are comments and MJML strips them out from HTML, and if it's wrapped around mj element it's not parsed. So it requires extra mj-raw and hacky way of adding conditional statements.

Describe the solution you'd like
It would be very helpful to add an attribute to certain elements to specify conditional statement. For example:

<mj-style condition="lte mso 11">
    .class { width:100%; }
</mj-style>

This would result in:

<!--[if lte mso 11]>
  <style type="text/css">
    .class { width:100%; }
  </style>
  <![endif]-->

An alternative to adding new attribute to existing element is to create a new element like <mj-condition value="lte mso 11"> ... </mj-condition>

Describe alternatives you've considered
Right now to be able to add conditional statements (unless I missed something?) that somewhat works is:

<mj-raw><!--[if !mso]><!-- --></mj-raw>
    <mj-image src="image.png" align="center" />
<mj-raw><!--<![endif]--></mj-raw>

I've had some issues with closed comments in order to make work in certain non-Outlook clients. Hence my proposal.

Additional context
MJML already adds automatic conditional statements when HTML is generated, so this would give user control over adding their own very easily.

[iRyusa]

Well, I keep this one open but here's my POV on that :
I think we shouldn't add client tied attribute in MJML (like owa="desjktop" on root tag) because it would re-add some of complexity that we want to abstract. I understand that today it's a bit verbose to add some conditionnal but, IMO, it keep a "warning" that you know what you're doing using mj-raw.

However, if you want so, you can still do a custom component that do the same.

Let's try to discuss a bit on this before closing/working on it

[kmcb777]

I agree, as an attribute it would add complexity, and some users could misunderstand the use of this.
Maybe a new element <mj-condition condition="!mso"> (some mjml) </mj-condition> ?
It would be prettier, and easy to make it work in mj-body, but for now handling it in mj-head would have the same limitations as the mj-raws in mj-head, they wouldn't respect the same order as in the mjml

[iRyusa]

I think the name would be misleading for a lot of people (would condition be a templating feature ?)

I doubt it should be in the default MJML build ( with column/text/... )

[torncheesecake]

Why would you need extra conditional statements over the ones already generated by MJML? I've build over 50 emails in MJML and have never once needed this. Can you give me a use case as to why you use and need this?

[viktorix]

The name can be changed to something more specific, as in <mj-mso value="!mso">...</mj-mso> or if an attribute <mj-text mso="!mso">...</mj-text>.

@matthewahillman the specific example I was working on that got me thinking is a GIF. Outlook doesn't play animated GIFs, only displays first frame. It was nothing almost. So for Outlook, I wanted to hide GIF and display JPG image of a good frame.

Partly, my problem was not realizing were combined. So I can't use if I need a condition, and have to specify <style> directly inside .

The problem becomes a bit more apparent trying to wrap condition around element in . I don't want to use HTML, I want to use MJML elements. So here's what I ended up with, in case someone will be stuck on this:

Body part:

          <mj-raw><!--[if !mso]><!-- --></mj-raw>
          <mj-image src="image.gif" width="319px" align="center" />
          <mj-raw><!--<![endif]--></mj-raw>
          <mj-raw><!--[if mso]><!-- --></mj-raw>
          <mj-image css-class="mso-hide" src="image.jpg" width="319px" align="center" />
          <mj-raw><!--<![endif]--></mj-raw>

And I had to add style too, as I had a problem with non-Outlook clients:

    <mj-raw>
    <!--[if mso]>
    <style type="text/css">
    .mso-hide {
        display: block !important;
    }
     [class*="mso-hide"] {
            display: none !important;
        }
    </style>
    <![endif]-->
    </mj-raw>

[class*="mso-hide"] might not be necessary, but since classes were modified I added that there just in case.

This might not be the best solution, but it works well across multiple clients consistently.

So back to my suggestion. Instead of doing this:

<mj-raw><!--[if mso]><!-- --></mj-raw>
<mj-image css-class="mso-hide" src="image.jpg" width="319px" align="center" />
<mj-raw><!--<![endif]--></mj-raw>

This can be done with:

<mj-image css-class="mso-hide" src="image.jpg" width="319px" align="center" mso-condition="mso" />

Even if this doesn't turn into a feature, hopefully some people will find conversation helpful. There's no documentation on how to deal with mso conditions inside MJML or any recommendations.

[iRyusa]

Well changing the name won't really change the fact that if we keep adding client specific attributes it would start to re-introduce what we want to abstract.

I feel like this need is really specifc, you should just do a custom component at this point if you want to be safer about opening/closing mso conditionnal

[tpetry]

I need something @viktorix suggested very often too. 90% of my mails and mail contents can be built perfectly with mjml. But sometimes clients request much more special emails where you have to do the hard work by yourself. Most often this could be done with conditionals, sometimes i would have to do use raw html.

Examples coming to my mind of things i had to do in the past:

• Different content whether mail was displayed on mobile or desktop (responsive condition)
• Very often the functionality to display or not display content on some outlook versions because different markup was needed
• Targeting for example only ios users (which could be done with some css rules but a more generic solution would be nice.)

I would not say that this feature should be omitted because it would making designing mails harder. You dont have to use it. But this feature would enable to build much more complex designs within mjml without having to use mj-raw.

[iRyusa]

I would not say that this feature should be omitted because it would

making designing mails harder. You dont have to use it. Don't get me wrong on this, i wouldn't mind if those client specific stuff would be "easy" to solve by just adding much more components/attribute. It's a bit counter logical on the framework philosophy where we want to abstract as much thing as we can and remove. IMO it's the same issue with custom attribute, it's like everyone want it, but no one came with a solution where it can work for everyone and no one has yet tried to implement this. However, it's still available as the framework offer a full support of custom component. Anyone can build a solution to this issue a open a PR so we can discuss about code, implementation markup usage & conveniance and drawbacks. And even if it's not merged, it can live its own life as a component package where we can talk about on the official documentation. There's still limitation to the current as stated in #1565 that mostly why this is still open to suggestion & fix