I found out about the CSS3 PIE library a couple of days ago and finally decided to give it a go today. The PIE library site is still a bit sparse in terms of usage guidelines and demos so, I decided to put one together to help other web developers get up to speed quickly.
UPDATE: I got in contact with the creator of CSS3 PIE, Jason Johnston, and if you do not want to go through the process off building the project from source, you can download a pre-compiled version.
The first thing you will note is that on the PIE library website it is stated that you can download the library from Github here and that inside this download you will find a file called PIE.htc. I downloaded both the beta1 and 1.0beta1 files, unzipped and could not find the relevant PIE.htc file in either distribution. I decided to open up one of the demo files and view the source to see where the file is supposed to be located. In the source I found the following line:
behaviorUrl = '../build/PIE.htc';
With that, I realized that the downloads was the source application and in order to get to the PIE.htc file, the project will need to be built. If you look at the root of the application you will find that there is a file called build.xml. This indicates to me that one can build the project using Ant. If you do not already have Ant running on your local machine the follow the next steps to get this set up. Go to the Ant website and download the latest distribution.
Once it is downloaded extract the archive and move the contents to, for example c:\ant. Next go to (My)Computer, right click on it and select properties. From there select ‘Advanced System Settings’ and then on ‘Environmental Variables’. On the resulting dialog click the ‘New’ button under user variables. The variable name should be ‘ANT_HOME’ and the value should point to the root of your Ant installation (c:\ant). Click ‘Ok’ on all of the dialogs and open up your command prompt.
Once opened, type in ant -version. You should see something similar to the screen shot below:
With that, you now have Ant installed and can move on to building the PIE library project. Go to the location where you have extracted the PIE libray using the command prompt window. Once in the root, simply type ant. Ant will now look inside the folder for a file called build.xml and once it find it will execute the default target defined in that files. When it is done building the project, you should see output similar to below:
With the build completed, go back to the folder and you will now see a new folder entitled ‘build’ and inside you will now find the file you need. Now that we have our Internet Explorer DHTML behaviors file (PIE.htc) we can start using it.
Border Radius
First one to try out is border-radius. Create a new HTML file and add the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 PIE</title>
</head>
<body>
<h1>CSS3 PIE</h1>
<p id="rounded_corners">A rounded corners demo.</p>
</body>
</html>
Inside the project folder create a new folder called css and inside create a new CSS file called default.css. Inside this file add the following:
#rounded_corners
{
background-color:#333;
color:#fff;
padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
To the header section of the HTML document link up this style sheet:
<link rel="stylesheet" href="css/default.css" />
If you now open the HTML file in any browser that support the border-radius CSS3 style rule or in Firefox/Webkit, you will be presented with a black bar with nicely rounded corners. If you open this same file in any Internet Explorer browser below IE9 you will not see the rounded corners, this is where the CSS3 PIE library comes into play. Copy the PIE.htc file to a folder inside your current project folder, for example inside a scripts folder.
Now back inside the CSS add the following line inside the #rounded_corners style rule:
behavior: url(scripts/PIE.htc);
Note that the PIE.htc file is here referenced relative to the HTML document and not the CSS file. With the above done, go back to IE and refresh the page. You will now have rounded corners in IE6, 7 and 8.
Box Shadow
Along with rounded corners one of the most enticing features of CSS3 is the box-shadow rule. Currently the box-shadow rule has been removed from the CSS3 spec but, this is said to only be temporary while some uncertainties about the rule is being sorted out. With that said, support for this exists widely through the browser selectors, such as -moz and -webkit. And is therefore also supported by CSS3 PIE. In your HTML file add the following line:
<p id="rounded_with_shadow">Rounded corners with box shadow.</p>
And in your CSS file add the following rule:
#rounded_with_shadow
{
background-color:#333;
color:#fff;
padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow: 5px 5px 20px #333;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
behavior: url(scripts/PIE.htc);
}
Refreshing your page will now show another black bar, with rounded corners as well as the box shadow. And this will also work in all the IE version mentioned.
Border Image
Border image might be one of the CSS3 style rules that you may not have heard about or seen in action but, it is actually very powerful and useful. The mechanics of how border-image works internally is pretty complex and you can read more about it in the W3C spec, however, for our purposes here, I will simply demonstrate how it is used. Unfortunately this seems to be one that is still being worked by the CSS PIE developer(s) as I could not get this to work following the same principles as for the previous style rules. On the documentation for this rule there is a todo comment so, keep an eye on that page.
Because support for this feature is obviously going to be introduced soon, I am here going to demonstrate how this is used in current browsers that support this style rule. In your HTML add the following:
<div id="button"><a href="#" title="search">Search</a></div>
Now, add the following to your CSS:
#button
{
color:#fff;
padding-top:3px;
width:100px;
height:22px;
text-align:center;
border-width:0 5px 0 5px;
border-image: url(../images/button.png) 0 5 0 5 stretch stretch;
-webkit-border-image: url(../images/button.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(../images/button.png) 0 5 0 5 stretch stretch;
behavior: url(scripts/PIE.htc);
}
#button a:link,
#button a:visited
{
color:#fff;
text-decoration:none;
}
As you can see, I am leaving the behavior rule in there and as such, once support is added to a future release, this should simply start working in IE. Go ahead and refresh your page, I believe you agree that this is an awesome new feature of CSS3 and I hope CSS3 PIE adds support for this very soon.
-pie-background
This is the first time where CSS3 PIE uses a selector similar to the browser selectors we’ve seen earlier. The support that this adds is support for multiple background images, linear gradients as background images and more. The reason why this is implemented with the -pie selector is explained in the documentation as follows:
PIE supports CSS3 multiple background images, linear gradients as background images, and some of the new CSS3 background aspects such as background origin and clip. Unfortunately, to get access to these post-CSS2 values, we have to put them in a property other than the standard ‘background’ property, because IE will attempt to parse the value internally and not allow us access to the original value string. Therefore we use a custom -pie-background property for holding these values.
Let’s then look at a sample of this in action. Inside your HTML add the following:
<div id="twitter"></div>
We are going to use the first two images in the sample below and turn it into the result on the right, using only CSS and it will work in all browsers that support the multiple background property as well as in IE6 and up, thanks to PIE.
The code to do this is surprisingly simple. Add the following to your CSS file:
#twitter
{
background:url(../images/1.png) no-repeat 25px 0, url(../images/2.png) no-repeat 0 105px;
height:500px;
-pie-background:url(images/1.png) no-repeat 25px 0, url(images/2.png) no-repeat 0 105px;
behavior: url(scripts/PIE.htc);
}
That is it! Open your HTML page and you should see an image that looks like the combined image above. One of the really great addition that you get with no extra effort on your part is that PIE includes the PNG fix for IE6. So, without including any other scripts or any additional code, the above will work perfectly in IE6.
Besides multiple background images, PIE also brings support for linear gradients as backgrounds. Create a new div to contain your gradient background:
<div id="linear_gradient">A linear gradient demo.</div>
And to your CSS file add the following:
#linear_gradient
{
padding:10px;
background-image: -moz-linear-gradient(90deg, #CCC, #EEE);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
-pie-background: linear-gradient(90deg, #CCC, #EEE);
behavior: url(scripts/PIE.htc);
height:100px;
}
You can now go ahead and refresh the page. To read more about gradients, see the entry in the CSS draft spec. The way gradients are implemented in Firefox and Webkit, in terms of sytax, is very different at the moment and you can read more about each on the MDC and the Webkit blog.
There are some limitations and features that are still to be implemented with regards to background images and linear gradients, some of which include:
- background-attachment (will always use ‘scroll’ even if ‘fixed’ or ‘local’ are specified)
- background-size (will always use the image’s intrinsic size)
- background-repeat values of ‘space’ or ’round’ (the other repeat values are supported)
- background-position values with more than 2 parts
RGBa Color Values
I still remember way back when, when web developers and designers was limited to a palette of 256 colors *sigh*. The freedom we all felt when this limitation was removed was great but now, a new way to specify color on web pages has emerged, RGBa. RGBa support is pretty good but again IE6 – 8 falls short and this usually means you have to either use a hex or plain RGB color as a fall-back. With PIE we can start using RGBa today.
The fourth letter in RGBa stands for alpha, and as you guest it allows you to specify the alpha transparency of the color without effecting any of the elements contained in it. For example if we have a DIV container with text content inside, setting the opacity of the background color of the containing DIV is not going to effect the opacity of the text contained in it. This is great news, so let’s look at a demo.
Add the following to your HTML page:
<p id="rgba_container">Integer elementum arcu magna ultricies ac, turpis, tristique, augue augue porttitor integer pellentesque tincidunt, elementum, elementum montes integer, turpis in? Pellentesque, montes scelerisque? Ac arcu est auctor pulvinar, aliquet. Turpis. Dignissim magna cursus odio duis tincidunt facilisis elementum vel, tempor sagittis purus diam, lectus placerat habitasse sed et scelerisque scelerisque. Natoque augue augue elit? Cursus dolor? Porta in dapibus odio enim amet, et dictumst nec nec urna lectus? Lundium cras? Sed magnis egestas eu dignissim risus natoque turpis, in massa amet nisi enim urna, turpis odio turpis vel tortor egestas. Cras parturient non integer porta vel. Sed dapibus nunc enim? Mid enim nec lundium pulvinar? Scelerisque parturient sociis, nec aliquet! Adipiscing. Parturient! Natoque, pulvinar, sit porttitor aliquet scelerisque! Cras odio.</p>
Inside you CSS add the following:
#rgba_container
{
background: rgba(225, 105, 0, 0.3);
padding:10px;
color:#333;
}
On the demo page below I added three samples. A paragraph that simply sets the background to a RGB color with no opacity:
p
{
background:rgb(225, 105, 0);
}
Another one setting the same RGB color for the background, but then using the opacity CSS rule to set the aplha transparency. This one will clearly demonstrate the benefit of using RGBa to set alpha transparency for background colors as apposed to just opacity.
#opacity
{
background:rgb(225, 105, 0);
-moz-opacity:0.3;
opacity:0.3;
}
With that I have covered all of the aspects that PIE brings to us and I believe you can agree that it is a lot and is going to make developing great looking website just that little bit simpler. There is one more aspect that PIE offers and that is -pie-watch-ancestors. To explain this I am going to use a quick example from the PIE website:
/* JS: */
myElement.onclick = function() {
this.parentNode.className += ' poked';
}
/* CSS: */
#myElement {
behavior: url(PIE.htc);
border-radius: 10px;
-pie-watch-ancestors: 1;
}
.poked #myElement {
border-radius: 20px;
}
The line -pie-watch-ancestors: 1; tells PIE to watch for changes on ancestors one level up from the element. It will attach the propertychange listener to the element’s parent and therefore be notified when the parent’s className gets changed, and update the rendering correctly.
CSS3 PIE in my opinion is an awesome addition to your web developer toolbox and I cannot wait to start using it in projects and watching as this project evolves. What do you think of PIE and will you be using it in your web projects going forward? Looking forward to your comments.
Related Posts
Zebra Tables With The CSS3 :nth-child Pseudo Class
LinkedList : The Web Developer Weekly : September 12, 2011
9 Deceptively Simple But Powerful Tools for Web Developers
Blogged: Installing Node.js On Windows
i18njs : Internationalize Your JavaScript With A Little Help From JSON And The Server
LinkedList : The Web Developer Weekly : September 2, 2011
