Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE conditionals support #27

Closed
vinodkl opened this issue Feb 4, 2015 · 6 comments
Closed

IE conditionals support #27

vinodkl opened this issue Feb 4, 2015 · 6 comments
Labels
type:feature A feature request

Comments

@vinodkl
Copy link

vinodkl commented Feb 4, 2015

I am trying to target IE browsers with some simple IE conditionals, but it seem to fail in marko template.

My template has these simple conditionals, but its not getting targeted properly. I don’t see the classes being added. (works however in plain html)

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="${locale}"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="${locale}"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="${locale}"> <![endif]-->
<!--[if !IE]> --><html lang="${locale}"><!--<![endif]—>

anything to do with the HTML comment’s?
@patrick-steele-idem
Copy link
Contributor

This is a known issue with a clean workaround. Marko ignores HTML comments and this breaks IE conditionals since the comments are never written to the output. I've suggested the following workaround in the past:

Create a custom tag named <app-html> that maps to the following renderer:

module.exports = function render(input, out) {
    var lang = input.lang;

    out.write(
        '<!DOCTYPE html>' +
        '<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="' + lang + '"> <![endif]-->' +
        '<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="' + lang + '"> <![endif]-->' +
        '<!--[if IE 8]> <html class="lt-ie9" lang="' + lang + '"> <![endif]-->' +
        '<!--[if !IE]> --><html lang="' + lang + '"><!--<![endif]—>');

    input.renderBody(out);

    out.write('</html>');
};

Then in your page layout or page template:

<app-html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        ...
    </head>
    <body>
        ...
    </body>
</app-html>

Output:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en-us"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en-us"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en-us"> <![endif]-->
<!--[if !IE]> --><html lang="en-us"><!--<![endif]—>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        ...
    </head>
    <body>
        ...
    </body>
</html>

The benefit of this approach is that the HTML template is cleaner. In theory, we could look into a code change to introduce special handling for IE HTML comments. I'm open to ideas and/or Pull Requests, but hopefully the workaround solves your problem for now.

@patrick-steele-idem patrick-steele-idem added the type:feature A feature request label Feb 5, 2015
ramahadevan added a commit that referenced this issue Jun 5, 2015
@ramahadevan
Merge pull request #87 from patrick-steele-idem/issue-27
3e456c7 
Fixes #27 - Preserve IE conditional comments
@patrick-steele-idem
Copy link
Contributor

New version published with improvement: marko@2.7.0

@patrick-steele-idem patrick-steele-idem mentioned this issue Jun 5, 2015
Closed
@yomed
Copy link
Contributor

yomed commented Jan 8, 2016

Hey @patrick-steele-idem, not a big deal, but you may want to update your code sample above to use renderBody(out) instead of invokeBody()

@patrick-steele-idem
Copy link
Contributor

Thanks for letting me know @yomed. IE conditional HTML comments are automatically preserved now so the workaround discussed is not needed.

@yomed
Copy link
Contributor

yomed commented Jan 8, 2016

I had noticed that even though they are preserved, variables weren't output correctly. I didn't dig into it too much, but I saw this issue and liked your app-html better anyway so I went with that.

So for example:

<!--[if IE 9]>
<html class="ie9" lang="$data.language"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="$data.language">
<!--<![endif]-->

Would end up as:

<!--[if IE 9]>
<html class="ie9" lang="$data.language"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->

@patrick-steele-idem
Copy link
Contributor

That's true, variables inside comments are not resolved. Does keep the template code cleaner as well. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:feature A feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vinodkl @patrick-steele-idem @yomed