Web developers need to continually keep up to date with the latest developments in HTML and CSS, with CSS3 being the latest on the scene. However only the latest versions of browsers support the new features of HTML and CSS, redundant old browsers such as IE6, IE7 and IE8 do not support the new features.

This causes a bit of an issue, as the new features in CSS3 can dramatically save development time, border-radius being a common usage. If you want your website to display the same across all browsers including the older versions of IE you can’t use the CSS3 methods… well not until now!

Thankfully CSS3 PIE (Progessive Internet Explorer) has emerged to help us out. PIE makes Internet Explorer versions 6 – 9 capable of rendering several of the most useful CSS3 decoration features, meaning we can go ahead and use our CSS3 methods and they will render perfectly in old IE browsers.. pretty neat. Head over to the CSS3 PIE website for further information and for a full list of the supported CSS3 decorations.

Today I will show you how to use CSS3 PIE within the e-Commerce platform Magento.

Step One

Depending on your Magento theme set-up it might be slightly different to my example, however within your theme directory in the layout folder create a new file called local.xml:

app > design > frontend > default > yourThemeName > layout > local.xml

Then copy and paste the following and save:

skin_jsPIE/PIE.js lte IE 8

This basically tells Magento to load in PIE.js but only if the version of IE is IE8 or older.

Step Two

The next step is to download the latest version of CSS3 PIE from their website. Once downloaded drop all the files in a folder called PIE within your theme skin directory like so:

skin > frontend > default > yourThemeName > PIE
skin > frontend > default > yourThemeName > PIE > PIE.htc
skin > frontend > default > yourThemeName > PIE > PIE.js
skin > frontend > default > yourThemeName > PIE > PIE.php
skin > frontend > default > yourThemeName > PIE > PIE_uncompressed.htc
skin > frontend > default > yourThemeName > PIE > PIE_uncompressed.js

We are only really interested in PIE.js but it won’t do any harm putting all the files into the folder in case you need them at a later date.

Step Three

In some versions of Magento, CSS3 PIE can cause the site to crash in some browsers, to overcome this problem we need to use the JavaScript method to initialise it. For this we need to create a JavaScript file and reference it in the xml.

Within your skin JS directory create a new folder called custom and within this create a file called pie-functions.js

skin > frontend > default > yourThemeName > js > custom > pie-functions.js

Then paste the following code within pie-functions.js:

You can see from above within the PIE function you accumulate the class names or id names in a comma separated list. So if for example in your CSS file you have .pie { border-radius: 10px; } and then you have .pie in the PIE function it will render the CSS3 decoration correctly in older IE browsers.

Step Four

Before we see anything work however we need to include our pie-functions.js in the xml so that Magento includes it within the page. Open up local.xml we created in step one and paste the following snippet within the head reference tags:

skin_jsjs/custom/pie-functions.js

Once saved this will have included the pie-functions.js within the head tags in your website.

Conclusion

That’s all there is to it, you can now safely use CSS3 decorations that will render correctly in older IE browsers. N.B. – Do not forget to put the classes / ids in pie-functions.php for it to work.