IE hacks aren't processed

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

IE hacks aren't processed

omaroman
CSS or JS hacks for Internet Explorer are not processed.

Example,



What should I do in order to have it processed? Or could you add support for that?

OMAROMAN
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

danielfernandez
Administrator
Sorry, your example does not display correctly on the forum. Could you please use HTML syntax and < escaping plus the preview tool in order to show the kind of code that is not being correctly processed?

I assume you mean IE conditional comments, but... could you specify the version of thymeleaf you are using?

Thanks,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

omaroman
I'm so sorry, here's the complete description.

Thymeleaf: 2.0.7

I'm working on application that must run on Internet Explorer 6.  I'm using 52Framework for the layout and Formee (http://www.52framework.com) for the forms (http://www.formee.org). But IE6 is so old and not fully compliant with CSS, HTML and JS, so I have to use ie7-js (http://code.google.com/p/ie7-js) and some other javascripts (html5.js, modernizr.js and selectivizr.js).

TEMPLATE:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>NLR - Promociones</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="../public/stylesheets/52/reset.css" th:href="@{/stylesheets/52/reset.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/52/css3.css" th:href="@{/stylesheets/52/css3.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/52/general.css" th:href="@{/ stylesheets/52/general.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/52/grid.css" th:href="@{/stylesheets/52/grid.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/52/grid-ext.css" th:href="@{/stylesheets/52/grid-ext.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/layout/layout.css" th:href="@{/stylesheets/layout/layout.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/menu.css" th:href="@{/stylesheets/menu.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/font.css" th:href="@{/stylesheets/font.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/formee/formee-structure.css" th:href="@{/stylesheets/formee/formee-structure.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/formee/formee-structure-ext.css" th:href="@{/stylesheets/formee/formee-structure-ext.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/formee/formee-style.css" th:href="@{/stylesheets/formee/formee-style.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/formee/formee-style-ext.css" th:href="@{/stylesheets/formee/formee-style-ext.css}" media="screen" />

   
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/nextel-style.css" th:href="@{/stylesheets/nextel-style.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/my-header.css" th:href="@{/stylesheets/my-header.css}" media="screen" />
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/my-footer.css" th:href="@{/stylesheets/my-footer.css}" media="screen" />

   

   
   
</head>
<body role="application">
<div role="container">

    <div th:substituteby="layouts/_header2 :: header"></div>

   
    <section id="content" role="container" class="row">

       
        <section id="maincontent col col_16">

            <div class="clearfix" style="height: 50px;"></div>
            <p th:if="${loginError}" class="error">Wrong user or password</p>

            <form class="formee col col_8 push_4 alpha omega" action="#" th:action="@{/j_spring_security_check}" method="post">
                <fieldset>
                    <legend>Login</legend>
                    <ul class="formee-list">
                        <li class="grid-4-12">
                            <label for="j_username">Username</label>:
                            <input type="text" id="j_username" name="j_username" autofocus="autofocus"/> <br/>
                        </li>
                        <li class="grid-4-12">
                            <label for="j_password">Password</label>:
                            <input type="password" id="j_password" name="j_password"/> <br/>
                        </li>
                        <li class="grid-4-12">
                            <label><br/></label>
                            <input class="grid-full" type="submit" value="Log in"/>
                        </li>
                    </ul>
                </fieldset>
            </form>
            <div class="clearfix"></div>
            <div class="col col_2">
                Inicio
            </div>
         </section>
    </section>
   

    <div th:substituteby="layouts/_footer2 :: footer"></div>

</div>
</body>
</html>

=========================

RENDERED HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>NLR - Promociones</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/52/reset.css" media="screen" />
   
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/52/css3.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/promociones/ stylesheets/52/general.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/52/grid.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/52/grid-ext.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/layout/layout.css" media="screen" />
   
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/menu.css" media="screen" />
   
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/font.css" media="screen" />
   
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/formee/formee-structure.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/formee/formee-structure-ext.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/formee/formee-style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/formee/formee-style-ext.css" media="screen" />
   
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/nextel-style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/my-header.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/promociones/stylesheets/my-footer.css" media="screen" />


 
</head>
<body role="application">
<div role="container">

    <header class="row">
        <div class="clearfix" style="height: 12px"></div>
        <div class="col col_4">
           
        </div>

        <div class="clearfix" style="height: 8px"></div>
       
       
    </header>

   
    <section id="content" role="container" class="row">

       
        <section id="maincontent col col_16">

            <div class="clearfix" style="height: 50px;"></div>
           

            <form class="formee col col_8 push_4 alpha omega" action="/promociones/j_spring_security_check" method="post" enctype="application/x-www-form-urlencoded">
                <fieldset>
                    <legend>Login</legend>
                    <ul class="formee-list">
                        <li class="grid-4-12">
                            <label for="j_username">Username</label>:
                            <input type="text" id="j_username" name="j_username" autofocus="autofocus" /> <br />
                        </li>
                        <li class="grid-4-12">
                            <label for="j_password">Password</label>:
                            <input type="password" id="j_password" name="j_password" /> <br />
                        </li>
                        <li class="grid-4-12">
                            <label><br /></label>
                            <input class="grid-full" type="submit" value="Log in" />
                        </li>
                    </ul>
                </fieldset>
            </form>
            <div class="clearfix"></div>
            <div class="col col_2">
                Inicio
            </div>
         </section>
    </section>
   

    <footer class="row align_center copyright" role="contentinfo">
        <div class="col col_16">
            <small>
                All rights reserved © Nextel Loyalty Reward by <strong>CPS</strong>
            </small>
        </div>
        <div class="clearfix" style="height: 10px"></div>
    </footer>

</div>
</body>
</html>

============

Notice the commented tags that only IE recognizes are not processed by thymeleaf.




===========

How can I get those commented tags processed?

Thanks ahead for your help.

OMAROMAN
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

danielfernandez
Administrator
Sorry, I still cannot see any "IE hacks" in your code... are they conditional IE comments? maybe the forum formatter is hiding them...

Anyway, if the problem is you are using expressions (like ${...}) inside comments, Thymeleaf standard dialects do not process comments at all --they should just let them pass--, but you can create Processors (classes implementing IProcessor) specifying the type of node they will act on: org.thymeleaf.dom.Comment.

If the problem is other, please post the specific code of those "IE hacks" again...

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

hubbardr
I'm also having this issue...I imagine anyone who uses html5shiv.js for example would have issues with this. Whether its an expression or a namespaced attribute, it should ALWAYS be processed. Just because it happens to be within an html comment should not influence whether or not it gets parsed.

For example (and hopefully wrapping in raw tag makes it viewable...it shows correctly in the preview):

<!--[if lt IE 9]>
    <script src="../../js/html5shiv.js"	th:src="@{/js/html5shiv.js}"></script>
<![endif]-->

We need this in our html5 pages in order to support the IE8 browser. I can implement a Processor but why is the "th:src" in this example ignored in the first place?
x_x
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

x_x
TAB charactor detected before "th:src".
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

Emanuel
Administrator
In reply to this post by hubbardr
The th:src gets ignored because it's in a comment, and Thymeleaf doesn't do any processing of comments at all (I had a look at the Comment class (representation of a comment in a document) and the method where processing is done is empty).  I think you'll want to raise an enhancement request on the Thymeleaf GitHub page to get comments processed.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

hubbardr
Thanks Emanuel. I'm new to Thymeleaf. Any recommendations on how best to implement the processing of comments?
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

danielfernandez
Administrator
Hi,

I'm scheduling the processing of conditional comments for Thymeleaf 2.1. This seems to be a very needed feature: https://github.com/thymeleaf/thymeleaf/issues/79

For now, the only way to process them is:

    * Create your own dialect (implementation of IDialect, preferably by extending AbstractDialect)
    * Make your dialect include this processor: https://github.com/thymeleaf/thymeleaf/blob/2.0-master/src/main/java/org/thymeleaf/processor/document/ProcessAllNodesDocumentProcessor.java appeared in version 2.0.13, which will allow the Thymeleaf engine to process every node in the DOM tree, not only elements (you need to process Comments, and that's not the default behaviour for performance reasons)
    * Create your own processor for these conditional comments and add it to your dialect. This processor must be an implementation of IProcessor that returns as IProcessorMatcher a matcher that matches org.thymeleaf.dom.Comment nodes.
    * In this processor, create the logic you need. You will not have your inner tags as such, so you will probably need to parse your comment by yourself -e.g. using regular expressions-.
    * In order to execute Thymeleaf Standard Expressions (like ${...}), you should use the StandardExpressionProcessor class, with static methods for processing these expressions.

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

hubbardr
Thanks! One of the reasons we (Garmin) are comfortable moving to Thymeleaf is the responsive and detailed support provided by the dev community and this forum. Much appreciated.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

danielfernandez
Administrator

FYI.

A new module has been released that allows Thymeleaf to process conditional comments:

https://github.com/thymeleaf/thymeleaf-extras-conditionalcomments

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: IE hacks aren't processed

liuhuan
In reply to this post by danielfernandez

We charge new pairs of cossack every now and then. We buy new shoes if the division changes or if we feel we do not accept a acceptable brace of shoes for some appropriate accident which we accept to appear and sometimes we just fell in adulation with a accurate brace of http://tomsleader.com/ toms women shoes shoes or shoe appearance and we cannot abide that account to own them and accordingly we buy them. But the shoe abutting Toms Shoes gives us an altogether altered acumen to buy shoes which is blue-blooded and humane. The accepted all-embracing shoe cast gives abroad a brace of new shoes to a adolescent in charge for every brace they sold. Accordingly they accord as abounding new shoes to beggared accouchement as abounding they sold.