The magic of CSSPIE3 library

Hi friends,

Today i am gonna talk about an interesting tidbit that i came to know very recently.

The Problem :

I was working on installing a gradient for a page. For mozilla, the gradient was written as :

background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);

And the pictorial view of that block of code comes up as something like this :

As you can see from above that the effect of the block of code is : the thick continuous red line that borders the element .

Now linear gradient cannot be used for the browser like IE8, as IE8 does not understand what it is. Hence we need to use filter here like :

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d5d0',GradientType=0 );

The element gradientType = 0 signifies that we here are talking about a linear gradient. That's how IE understands a linear gradient. Now the problem with that is, once such a style is implemented, IE super  imposes that with it's own styles, thus marring the whole effect , like in here :

As you can see from the picture above we get discontinuous red lines even after applying the filter.
So for a long time i was languishing under the knowledge that IE 8 is not letting me bring up the gradient properly.

Reason :

The problem with using filters is that they are old pieces of code of a bygone era. They are not very reliable/good. No one really used them until recently when we got first class gradients/opacity etc. IE's old filter styles are well known for having major bugs and quirks. Hence  i was pondering on the possible solutions when i suddenly came across the CSSPIE3  library.

The way out :

CSS3Pie library is a little Javascript lib that tries to add a few standard CSS features to old IE versions, including CSS gradients. It works internally by using VML graphics, not filter styles, which means that you don't get the bugs thatfilter causes . Hence all i needed to do here was use the linear gradient and couple it to PIE.js. 

I downloaded the PIE.js from : http://css3pie.com/ .

Now to use it , first i described my style in jsp inside a class like :

<Style type="text/css">

   .ieMasterStyle{
     background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);
   }

<Style>

In my jsp , i referred to it as :

<td class='ieMasterStyle'>Border</td>

Now calling this one is a bit tricky and it is a two step process :

STEP 1 :

Include the PIE.js script in your page, surrounded by a conditional comment to prevent it from being downloaded in other browsers:

<!--[if IE]>
<script type="text/javascript" src="path/to/PIE.js"></script>

<![endif]-->

or, in case, you don't want to download it , but just want to refer it from a CDN than do this :


<!--[if IE]>
<script type="text/javascript" src="http://cdn.jsdelivr.net/css3pie/1.0.0/PIE.js"></script>
<![endif]-->

NOTE : Remeber to use PIE.js version 1.0 as it's the most stable version around.

STEP 2 :

Invoke the PIE.attach(el) function for each element that needs CSS3 styling. Make sure you do this after the page's DOM has been fully loaded. For example, using jQuery:


$(function() {
    if (window.PIE) {
        $('.ieMasterStyle').each(function() {
            PIE.attach(this);
        });
    }
});

As you can see from above , i have fed the ieMasterStyle that i created directly o PIE.js, where in the PIE.js will do it's magic and apply the linear gradient for us . Hence the finished product in IE 8 looks like this :

And thus i achieved browser consitency and PIE.js saved my bacon.

That's it guys. Bye .