Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


CSS3 provides the developer with abilities to manage powerful features such as rounded corners, shadows, gradients, etc. But since not all popular browsers (IE6-8) are aware of the new properties, implementing these kinds of designer ideas sometimes turns into a nightmare. PIE helps Internet Explorer to work with some of the features in CSS3. To be more precise, here's the list:

How does PIE do this?

All the implemented CSS3 features are related to graphics; PIE emulates them using VML: first VML-object is created, in it the desired effect is animated and using absolute positioning it's replaced with the element to which the property was originally used.

How to use it

First, download PIE through software distribution, then add PIE.htc file to your project. Assign CSS rule behavior: url (path/PIE.htc) to the element (if everything goes according to the plan) with one of the properties below.

CSS:

.rounded-corners {
  border: 2px solid #1ABFE5;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -khtml-border-radius: 9px;
  behavior: url(PIE.htc);
}

Note: you have to specify the correct relative or absolute path to PIE.htc.

Live demo

Particular properties

These are relevant only for IE.

1. Changes in the way the element behaves - implementing PIE to an element affects the layout, which in turn can cause bugs. In most cases bugs are corrected by adding properties: position: relative and/or zoom: 1. Optionally, assigning similar properties to the parent element, can be equally effective.

2. Does not always work for non-container elements - such as textarea, input, img. In some cases, some tricks can save the day: img can be replaced with the following construction.

HTML:

<div class="image" style="background-image: url(path-to-image/nature.png); width: 640px; height: 480px;"></div>

CSS:

.image {
  border: 2px solid #1ABFE5;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -khtml-border-radius: 9px;
  behavior: url(PIE.htc);
}

For input.

HTML:

<div class="input">
  <input type="text" value="" />
</div>

CSS:

.input {
  border: 2px solid #1ABFE5;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -khtml-border-radius: 9px;
  behavior: url(PIE.htc);
  zoom: 1;
  float: left;
}

input {
  border: none;
  background: #FFFFFF;
}

3. Problems with z-index may surface if PIE is implemented to elements with position: static. Solution - make element with position: relative or make the parent with position: relative and specify to the parent z-index. Both methods can lead to problems, but there's nothing you can do about it, forget about fair life.

4. Relative path to PIE.htc needs to be specified relative to the current HTML document.

5. Requires correct Content-Type header: in order for IE to begin to understand the behavior, .htc file must be passed with the header text/x-component. Most servers have this as default setting. If this is not the case, find the file .htaccess and add (uncomment) the line:

AddType text/x-component .htc

If for some reason you were not able to change the server configuration (for example, if the site is located on a virtual server), then you can use PIE.php available in distribution. Put it into the same directory as PIE.htc. Now applying PIE will be changed as shown below.

CSS:

behavior: url(PIE.php);

This script simply returns PIE.htc with a correct header.

6. Update 29.04.10. PIE is not compatible with the emulation data: URL through MHTML-inclusions.

7. Update 14.09.11. Doesn't work with pseudo elements in IE8.

8. New plug-in - a lot of bugs, so it may not always work.

Conclusions

The plug-in is amazing in spite of being new. We hope that it will help in many ways to open new features for web developers; and its awesomeness will be tested in "combat" conditions.


 

Read also

Animation in CSS3

Animation in CSS3

Discussion (total 3 comments)

sushil
November 25, 2013 at 04:57 am
We have used pie.htc in our code but it was causing some performance issues. So we removed pie.htc.
Administrator User
Administrator User
November 25, 2013 at 05:15 am
It should only affect to IE, a performance in other browsers must be unchanged. Also for newer versions of IE, styles can be separated by conditional comments (http://basicuse.net/articles/pl/textile/html_css/conditional_comments_for_ie) to avoid applying PIE.
Altaf Hussain
November 28, 2013 at 05:08 am
Nope, PIE only affects IE older browsers. All other browsers are not affected.
@Sushil, Try to fix the path of your pie.htc file. May be your css file is not getting the correct path.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation