boxsizing.htc guide

Support for legacy browsers like IE7,  is a serious deadlift.

If you are one of the developers who is struggling with .HTC files like pie.htc or boxsizing.htc, this post might help you.

What is HTC file and why do you need it?

Microsoft HTC Reference says:

HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. The component is saved with an .htc extension

We use htc files to support and fix issues like:

  1. PNG transparency.
    cheetah
  2. Border radius or curved edges.
    curved_edges
  3. Box-sizing of DOM elements.
    Box-sizing specifies that DOM element should have  padding and border included in the element’s total width and height.


How to use HTC files?  (boxsizing as example)

  1. Create a stylesheet specifically for IE7 and other lower  versions. Use following code in <head> section of your HTML file.

    This conditional stylesheet is targeted and read by IE7 (and lower version) browser only. You can always change the name.
  2. Download boxsizing.htc polyfill and put it in root of your website.
    So, folder structure looks like:
    folder_structureI prefer HTC files in root to avoid any confusion.
  3. Add this rule to your conditional CSS.

    It should be noted that HTC files need to be relative to the document and not CSS file. This is one primary reason why I map htc files from root. We can conclude that the following rule is inappropriate:
  4.  Define box-sizing CSS rule like:

    Test your page, if things don’t work, try to use web inspector of IE, click network tab and reload your page to check if HTC’s path is correct.

Pros of boxsizing.htc:

  1. Almost same and modern UI on IE browsers.
  2. If clubbed with htmlSHIV(or htmlSHIM), this polyfill can make really responsive website for older IE variants.

Cons of boxsizing.htc:

  1. Performance issues. Major.
  2. Highly unstable and unsuitable for applications that manipulate DOM elements frequently.
  3. Devs need to check console more often.
  4. If your document has a number of DOM elements, this polyfill will literally FREEZE all tabs and browser activities.
  5. It seeks all the CPU attention.