Using Dynamic URL for .htc File in WordPress Theme

As we all know in Mozilla, Chrome or most of the browsers we can use CSS3 properties, but how those  CSS properties can be used in Internet Explorer. A smart way is to use pie.htc or ie-css3.htc file that supports some new styles available in CSS3 standards. While I work on WordPress project I use pie.htc files, so that I can implement some of the CSS3 property for Internet Explorer here is an example how to use it.

Absolute path for .htc file

An absolute path is applied to htc file in the stylesheet for CSS3 support to IE.

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(http://demosite.info/wp-content/themes/twentyten/pie.htc); /*   absolute path  */
}

The above syntax works well, as we have set an absolute path for .htc file in the stylesheet but it becomes inconvenient to move styelsheet from one domain to another.

Relative path will not work in case of .htc file

Indeed Internet Explorer does not interpret the path relative to the CSS file, but it interprets the URL for the behavior property relative to the source HTML document. This causes the PIE behavior inconvenient because the path has to be absolute from the domain root this makes the CSS not easily movable to different directory. (Note : Here pie.htc is in js directory)

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(js/pie.htc); /*  relative path, pie.htc is in js folder  */
}

We can make use of Dynamic URL for accessing .htc file

We can use WordPress function “bloginfo(‘template_directory’)” in header.php file to generate the path dynamically. Put the classes into tag within the section. Now you can use the htc file by adding classes to it separated by commas.

header.php


<style type="text/css" >
        .Class1, .Class2 { behavior : url(<?php bloginfo('template_directory'); ?>/path/to/PIE.htc; }
 </style>

style.css

.Class1 {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

.Class2 {
-moz-box-shadow : 0px 0px 4px #ffffff;
-webkit-box-shadow : 0px 0px 4px #ffffff;
box-shadow : 0px 0px 4px #ffffff;
}

For my WordPress project I tried to access .htc file keeping it at different domain but could not access it, because the IE behavior property does not allow .htc file to access cross domain. You can also visit this link for reference. If you have any updates or idea about this you can share it though your comments.

No related posts.

9 Comments…

 Share your views
  1. FINALLY!!!! A solution that works for WordPress!!! I’m surprised that there are not more comments on your blog here. This worked beautifully. No need for position: relative; or position: absolute;, just simple coding. For it to work for me I have the PIE.htc file in the same location as my other css file titled ie.css. I have my classes named #header banner instead of .class1 and .class2 in both the header.php file and the ie.css. The absolute path to my pie.htc file is in my ie.css and the rest is history. Thank-you thank-you thank-you. :)

  2. I didn’t have to define my classes in front of the style type for it to still round the corners but still have a slight problem with my roll overs. The rollovers do not have rounded corners on them. Do you have solution Huzaifa?

  3. Hi,
    thanx for the tipp but I think this will increase the size of the html-output. Anyway I cannot imagine any other method to get this thing to work within conditional comments…

  4. hmmm did’nt use the ‘template_directory’ path but the style in the header was the key! Thanks a lot!!!

  5. Thanx a lot, man. It works like a charm.

  6. Oh, I forgot one thing: in the above example the closing right brace is missing —-> behavior : url(/path/to/PIE.htc;)

  7. As we know The behavior property requires the URI to the HTC file to be specified using the url() syntax. Multiple HTC files can be referenced with a space-delimited list. so suppose your csshover.htc file is in csshover directory and you can reference multiple htc file or specially same file but from different directories like behavior:url(‘csshover/csshover.htc’) url(‘../csshover/csshover.htc’) url(‘../../csshover/csshover.htc’) url(‘../../../csshover/csshover.htc’); and so on. thanks pradeep lakhina Drey Heights Infotech Pvt Ltd.
    mine code is working properly.

  8. Thanks!!! It works! Only 2 hours spent to get rounded corners in IE (other browsers took 5 minutes… arrghhhh)
    Yes, the htc needs to be in header.php

    This solution worked for me (I entered it after tag):

    #branding, #page { behavior:url(‘/border-radius.htc’);

Leave a Comment

  • Facebook
  • GitHub
  • Twitter
  • LinkedIn
  • Google

Your email address will not be published.

*