4 Replies Latest reply on Jul 1, 2011 12:00 PM by lrpieri

    Conditional CSS include

    joff
    joff May 20, 2009 3:56 AM

      Hi,


      I'm wanting to wrap a CSS include in conditional HTML comments, i.e. I want my output to appear like:


      <!-[if lte IE 6]>
<link href="/siteroot/path/styles/ie6-specific.css" rel="stylesheet" type="text/css" />
<![endif]-->




      Currently in my template I have:



      &#x3c;!--[if lte IE 6]&#x3e;
<a4j:loadStyle src="/styles/ie6-specific.css" />
&#x3c;![endif]--&#x3e;



      However, the loadStyle tag ends up re-positioning the link tag in the head element where it sees fit, so I end up in the resultant HTML:



      <head>
  ...
  <link href="/siteroot/path/styles/ie6-specific.css" rel="stylesheet" type="text/css" />
  ...
  <!-[if lte IE 6]><![endif]-->
</head>




      which, obviously, is no good :(


      So.. is there a way of wrapping the a4j:loadStyle with the correct markup? Or is there a way of getting the correct /siteroot/path/ so I can use an ordinary HTML <link> tag?

        • 1. Re: Conditional CSS include
          amitev
          amitev May 20, 2009 6:40 AM (in response to joff)

          Try:


          <c:if test="#{headers['User-Agent'].contains('MSIE 6.0')}">
    <a4j:loadStyle src="/styles/ie6-specific.css" />
</c:if>



          You could even define a more sophisticated function to extract the browser type and version.

            • Actions
          • 2. Re: Conditional CSS include
            amitev
            amitev May 20, 2009 6:50 AM (in response to joff)


            So.. is there a way of wrapping the a4j:loadStyle with the correct markup? Or is there a way of getting the correct /siteroot/path/ so I can use an ordinary HTML <link> tag?



            Yes you can use #{application.contextPath}

              • Actions
            • 3. Re: Conditional CSS include
              joff
              joff May 20, 2009 7:53 AM (in response to joff)

              Thanks, I'll go with the contextPath approach, as user-agent detection is problematic :)

                • Actions
              • 4. Re: Conditional CSS include
                lrpieri
                lrpieri Jul 1, 2011 12:00 PM (in response to joff)
                I've read a lot until solve my problem as follow

                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"


                <c:if test="#{fn:containsIgnoreCase(request.getHeader('User-Agent'), 'MSIE 9.0')}">
                        <style type="text/css">
                        td.ico-expand-column {
                                padding-top: 1.5em;
                        }
                        </style>
                </c:if>
                  • Actions