Silly way to make CSS3 Pie work in CQ5 / AEM - http://css3pie.com

aem-css3pie.md

CSS3 Pie in AEM / CQ5

Perhaps this has changed in 5.6 but these were the steps I went through to enable CSS3 Pie pie.htc on the Author, Publish, and Dispatcher when I got it working in 5.4 and still works in 5.6.

The main problem I believe is that IE7 / 8 want the HTC Behavior to be sent with a very specific mime type of text/x-component.

So in order to do that I'm sure there is some way to add a Mime type in Sling, but I couldn't make heads or tails of it at the time, so I just did something silly and turned pie.htc into a component that manually sets the mime type.

In /etc/designs/myapp/pie I have an nt:unstructuered node with:

{
    "sling:resourceType":"myapp/components/csspie",
    "jcr:primaryType":"nt:unstructured"
}

At /apps/myapp/components/csspie I have a cq:Component node with:

{
    "jcr:title":"Pie Component",
    "sling:resourceSuperType":"foundation/components/parbase",
    "componentGroup":".hidden",
    "jcr:primaryType":"cq:Component"
}

And at /apps/myapp/components/csspie/csspie.htc.jsp I have the JSP set the mime type and then output the contents of the pie.htc which means you just copy and paste the text of pie.htc into csspie.htc.jsp:

<%@include file="/libs/foundation/global.jsp"%><%

    response.setContentType("text/x-component");
    
%><!--
PIE: CSS3 rendering for IE
Version ...
http://css3pie.com
!!! And the paste of the contents of pie.htc directly into the JSP

Then in my CSS I just include CSS3 Pie in the similar way as their docs describe:

#page-container {
  /* CSS3 Multiple Backgrounds */
  background: url(...), url(...), url(...);
  -pie-background: url(...), url(...), url(...);
  behavior: url(/etc/designs/myapp/pie.htc);
}

For the dispatcher I had to also allow htc extenstions so my dispatcher.any had this added:

# enable specific mime types in non-public content directories 
/0049 { /type "allow" /glob "* *.htc *"   }  # enable pie htc

Also my Apache version didn't have the mime type so I had to add the mimetype in my Dispatcher Apache dispather.conf:

AddType text/x-component .htc