CSS3 Pie, Instant CSS3 for IE6, 7 and 8.

Posted by Dean Thomas on 2nd March 2011 Leave a comment (0) Go to comments

Reading an article on my commute home this evening about CSS3 and how many super-cool features it had and that it was a shame more developers weren’t using it, purely because of IE6/7/8 and their lack of implementation. Now fair enough, it’s not 6′s fault, or 7′s really, but Microsoft should have implemented this stuff into 8. Either way, they didn’t.

A lot of developers (myself included) refused to use CSS3 because of the lack of support. What is the point in burning several hours/days/weeks(/months in IE6′s case) implementing stuff for the smaller portion of browsers? Yes it might look amazing, but if 80% of your visits are Internet Explorer users, you’ve wasted your time. Until now, or at least July 2010.

Jason Johnston over at css3pie.com has been working hard on a CSS ‘script’ for IE 6, 7 and 8 which helps implement the missing features. There are two versions, a .htc file (best) and a .js file. The JS file does the same job, however it does it once the page has finished, so you will see a flicker between a square box and a rounded box. The htc file, will be loaded and processed during render, in turn minimizing any flicker. Check out css3pie for more information.

Let us see just how easy it is to use. I have a paragraph tag and i would like it to have a red rounded corner border and a drop shadow. This should be fun.

Simple html page, see markup below. All should be fairly clear and obvious.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>CSS Pie, can IE really work in a reasonable manor?</title>
	<style type="text/css">
	p
	{
		border: 1px solid red;
		width: 150px;
		padding: 5px;
                background: white;

		/*Rounded Corners*/
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

		/*Drop Shadow*/
		-webkit-box-shadow: black 0px 5px 6px;
		-moz-box-shadow: black 0px 5px 6px;
		box-shadow: black 0px 5px 6px;
	}
	</style>
</head>
<body>
	<p>Will this paragraph, be inside a nice rounded cornered box, with a bit of drop shadow? You bet, in everything except IE.</p>

	<p>This paragraph however, will be pretty (ish) in every browser from IE6 and up. Awesome.</p>
</body>
</html>

Now, let’s run it in IE and Chrome, see which one fails.

As you can see, IE has clearly failed, because it hasn’t implemented the CSS3 rounded corners or drop shadow. This is where CSS3Pie shines through. Let’s add one line into the end of the p CSS rule in. Which will make it appear like so…

	p
	{
		border: 1px solid red;
		width: 150px;
		padding: 5px;
                background: white;

		/*Rounded Corners*/
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

		/*Drop Shadow*/
		-webkit-box-shadow: black 0px 5px 6px;
		-moz-box-shadow: black 0px 5px 6px;
		box-shadow: black 0px 5px 6px;                

		/*IE Specific*/
		behavior: url(PIE.htc);
	}

Notice the ‘behavior’ rule. This is what tells IE to go and run this script, which will process what it needs to. Now if we re-fresh our page, we can see that IE and Chrome are on a level pegging, both displaying nice rounded boxes, both with a drop shadow on them.

Et voila. Amazingly simple, amazingly easy.