Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Handle <link> within conditional comments #19

Closed
blowsie opened this Issue · 7 comments

3 participants

@blowsie

It would be great if this could handle styles within conditional comments for example;

Input:

    <!-- Target Windows Mobile -->
    <!--[if IEMobile 7]>
         <link href="..."  rel="stylesheet" />
    <![endif]-->

    <!--Target Outlook 2007 and 2010-->
    <!--[if gte mso 9]>
          <link href="..."  rel="stylesheet" />
    <![endif]-->

Output:

    <!-- Target Windows Mobile -->
    <!--[if IEMobile 7]>
    <style type="text/css">
        body {
            background: red;
        }
    </style>
    <![endif]-->

    <!--Target Outlook 2007 and 2010-->
    <!--[if gte mso 9]>
        <style type="text/css">
        body {
            background: blue;
        }
        </style>
    <![endif]-->
@blowsie blowsie changed the title from Handle Styles within comments to Handle Styles within conditional comments
@blowsie blowsie changed the title from Handle Styles within conditional comments to Handle <link> within conditional comments
@yargalot yargalot self-assigned this
@yargalot
Owner

Makes sense, I'll look into it

@jeremypeter
Owner

I think it would be hard to parse conditional comments. We could probably give the link an attribute and pull the styles that way.

My thoughts are commenting out the link tag so it doesn't interfere with any other css and adding a conditional attribute with the target application as the value.

Example:

<!-- <link href="..."  conditional="IEMobile 9"> --> 
<!-- <link href="..."  conditional="gte mso 9"> -->

Doing it this way would probably work.

@blowsie

I ended creating a asp.net implementation of this, almost exactly as your example. Except, I don't comment the elements, and remove them from the page, based on the ignore attribute.

Examples.

<!-- Wrapper CSS -->
<link data-commment="The Wrapper CSS"
        href="{{BASEFOLDERURL}}/wrapper/123/css/styles.css"
        rel="stylesheet"
        data-ignore="ignore" />

<link data-commment="The Wrapper Inline CSS"
        href="{{BASEFOLDERURL}}/wrapper/o2/css/inline.css"
        rel="stylesheet" />

<link data-commment="The Wrapper CSS For Outlook"
        data-conditional="if gte mso 9"
        href="{{BASEFOLDERURL}}/wrapper/123/css/outlook.css"
        rel="stylesheet"
        data-ignore="ignore" />

I would like to move back to email-builder in the future, but for now, I have a handmade .net solution.

@jeremypeter
Owner

I was able to figure out a way to do it without using my recommended way. So any link tags within conditional comments will be put into a style tag

So look forward to that perhaps in the next release.

@jeremypeter
Owner

Fixed. Release 2.0.2 will have this feature

@blowsie

Great news!

@jeremypeter
Owner

Release 2.0.2 has been published. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.