How does css3pie work?

Question

What is happening behind the scenes with css3pie that makes it so IE can use css3 features?

Answer 1

The CSS3Pie website has a lot of detail, but I'll try to explain a bit.

Internet Explorer supports a feature called CSS Behaviors. This is an IE-specific feature which allows you to specify Javascript functionality to be run at when a CSS event is triggered.

For this it uses files with a .HTC extension, which is basically Javascript code with a light wrapper of custom XML code. Since Behaviors is an IE-specific feature, it hasn't been used very much, with the notable exception of a handful of hacks similar to CSS3Pie, designed to work around some of the short-comings of the browser.

In the case of CSS3Pie, it implements several features which are missing in IE. These are border radius, box shadow and linear gradient.

All these things can be done in IE (even older versions), but in non-standard ways. For example, IE supports a vector graphics language called VML (again, this is IE-specific). VML allows you to draw graphics using Javascript, and it includes functions to create boxes with rounded corners, gradient fills, and shadows.

CSS3Pie combines these IE-specific features. As a CSS Behavior, it triggers javascript code when specific CSS code is used. This javascript creates extra elements in the page containing VML, which is then styled to match the element that the CSS class applies to. The main element is then modified to remove most of the relevant styles, so that the styles of the VML element behind it can be seen.

At the end of the day, it is a hack. It doesn't actually add new features to IE; it merely makes some existing IE features work in a slightly more standard way.

If you want to dig deeper, CSS3Pie is open source so you can study it. It is quite complex code, though, so you may find it easier to look at some of the other (simpler) HTC files that are also available.

Before CSS3Pie, there was already one available from HTMlRemix.com which offered rounded corners and worked in a very similar way to CSS3Pie. CSS3Pie is a better piece of software, but you may find the HTMLRemix code easier to understand.

There are also a few others you may want to look into:

• Whatever:Hover fixes IE6 so that the CSS :hover feature works with all HTML elements rather than just <a> tags.

• IE PNG Fix makes older versions of IE work better with PNG graphics with transparency.

Hope that answers you question.

Answer 2

It just uses JavaScript to emulate the missing behavior.