Industry Leader in Digital Business

Using CSS3 properties in Internet Explorer 6, 7 and 8

As most of the developers know, Internet Explorer has been lacking the new features of CSS (level 3) for a few years now compared to other A-grade browsers. This has been a problem for many web developers, because Microsoft refuses to update older and recent browsers with features requested by developers worldwide. This week I found a nice article in dutch on Tweakers.net about a recently released behavior library called CSS3 PIE. The library, which will only be loaded in Internet Explorer due to the fact that other browsers do not support behavior files, adds support for various CSS (level 3) properties that are commonly used on Web 2.0 websites in Internet Explorer 6+. Currently only few properties are supported, but the developer is planning to add additional properties in the future. Using a demo from one of my previous articles, I tested some of the features in Internet Explorer 7 and 8 to find out more about this library. The library is still not perfect, but the results below show that the developer is heading in the right direction (something Microsoft should learn from).

Test results

I modified the previously mentioned demo to include the new CSS3 PIE library for Internet Explorer. The loading time for Internet Explorer in this new demo was not really influenced as the additional 26kb (compressed 12kb) was loaded in milliseconds, but the rendering of the page slowed somewhat down (you can see the screen flash from its original behavior to its improved behavior). In Internet Explorer 7 the result was very promising as the form showed normally with rounded corners and shadow added to the box and input-fields. In Internet Explorer 8 the input-fields were missing after adding the library, but the rounded corners and shadows were visible without any glitches. Still lacking support for the ‘text-shadow’-property, the library did not influence the title-tag on the page in both versions.

Reference image

Identified bugs

Though the library successfully added support for two commonly used properties (box-shadow and border-radius), we did note some bugs in the new demo. Some of these bugs will probably be solved in updates by the developer, while other bugs will be more persistent. However, most bugs might be avoided by selective use of CSS3PIE or changing the underlying HTML-code and hierarchy. Some notable bugs:

Internet Explorer 7

  • Input fields are rendered properly with rounded corners, but the cursor seems to be misplaced (onmouseover). You can still click on the input field to focus on it, but you must aim your mouse a few pixels higher than normal.
  • With larger content I noticed a horizontal blue line in the content. Though this line does not in any way change the way the page works (it is still usable) it should of course not be there.

Internet Explorer 8

  • The input fields were missing in the demo. Probably the input fields are placed behind a dynamically rendered component which might be solved in future updates of the library.

Conclusion

CSS3 PIE seems to be a revolution for developers as they are now able to add web 2.0 design features to elements in webpages without using images or CSS hacks. Though some bugs might currently be ‘annoying’ or withholding you from using the library, you must keep in mind that without libraries like CSS3 PIE one could not use the properties at all. Therefor, we hope that the library will be maintained in the coming years so more CSS (level 3) properties can be added and bugs will be solved. If you want to download the library or read more about it, the official website might be a good place to start. You can also download the demo used in this article for offline use or educational purposes.

Update (28/07/2010): A new version (beta2) of CSS3 PIE has been released which fixed some of the bugs mentioned in this article.

Related Posts