Curing CSS3 Headaches in Older Browsers

You’ve seen it time and time again on Webdesigntuts+; a CSS3 tutorial which you’re tempted to follow, but lack of support in older browsers stops you from looking any further. There are however, a number of tools to help out in situations like these. Today we’re going to figure out how to conquer CSS3 in older browsers, including Internet Explorer..

Let’s take a look at a range of techniques to render the most important CSS3 properties in older browser versions.

Setting it Up

To begin with, download and include all the necessary scripts for this tutorial. For the purpose of this exercise, place all scripts in the same folder as your CSS files. Here are the tools we’ll need:

• CSS3 PIE
• Selectivizr
• Mootools (will be used for Selectivizr)
• jQuery

CSS3 PIE

CSS3PIE is our IE assistant. PIE stands for Progressive Internet Explorer, and it extends the behavior of Internet Explorer to help it recognize and display CSS3 properties.

Check out the CSS3PIE download folder where you’ll find various files. We’re going to use PIE.htc, and we’ll call it from our CSS, so I suggest you put it in the same folder as our style sheet.

Selectivizr

Selectivizr is used to handle CSS3 Selectors. It’s used in conjunction with a JavaScript library, such as jQuery or Mootools. I recommend opting for Mootools as it supports all the Selectivizr functions (CSS selectors).

For this tutorial, I’m going to use the Google-hosted Mootools library, so, we simply include it in our head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="selectivizr-min.js"></script>

jQuery

We can use jQuery to render an alternative to CSS3′s text-shadow property. We simply need to download the jQuery text-shadow plugin, then, include it with jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textshadow.js"></script>

OK, that’s covered our toolkit, now let’s see how we use those tools to solve our CSS3 headaches..

Border Radius

Border-radius is probably the most familiar of CSS3 properties. Thankfully, rendering it in Internet Explorer is simply a case of using CSS3PIE.

.box {
	border-radius: 10px;
	behavior: url(PIE.htc);
}

As you can see, we have only to “call” the PIE script, after having defined our border-radius rule.

Box Shadow & RGBA Colors

In a similar fashion to border-radius, for Internet Explorer to recognize box-shadow we just have to include the PIE script. Note that we can also declare the shadow color using RGBA values.

.box {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .75);
	behavior: url(PIE.htc);
}

You can also use RGBA colors when declaring a background-color.

Background Gradients

To allow CSS3 PIE to render background gradients, we prepend background: in the following way:

-pie-background: linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

Actually, it’s very similar to the various other browser vendor rules. Remember to call the CSS3 PIE behavior afterwards!

.box {
	background: -webkit-linear-gradient(top, #0072bc, #00bff3); /* Safari, Chrome */
	background: -moz-linear-gradient(top, #0072bc, #00bff3);  /* Firefox */
	background: -o-linear-gradient(top, #0072bc, #00bff3);  /* Opera */
	background: -ms-linear-gradient(top, #0072bc, #00bff3);  /* IE10 */
	-pie-background: linear-gradient(#0072bc, #00bff3);  /* IE6+ */
	behavior: url(PIE.htc);
}

Multiple Backgrounds

Again, in this case, we have to use the -pie- prefix:

.box {
	background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* Modern Browsers */
	-pie-background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
	behavior: url(PIE.htc);
}

Border Image

The last property CSS3 PIE caters for is the border-image:

.box {
	border-image: url(border.png) 27 27 27 27 round round;
	behavior: url(PIE.htc);
}

CSS3 Selectors

Now it’s time to get dirty with Selectivizr. Include the JavaScript library as demonstrated at the start of the tut, then all CSS3 Selectors will be recognized by IE6+!

table tr:first-child {
	background: #252525;
}
table tr:nth-child(2n+1) {
	background: #ebebeb;
}

Text Shadow

This effect can be rendered cross-browser most easily using the jQuery library. Having included it, simply call the textShadow() function, pointing to your selector:

<script type="text/javascript">
	$(document).ready(function(){
	$(".txt").textShadow();
})
</script>

To complete the effect, just add the text-shadow to your CSS.

.txt {
	text-shadow: 2px 2px 2px black;
}

IE Special Filters

To replace some CSS3 properties you can also use IE filters. This first example is for background gradients:

.box {
	background: #FFFFFF;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

This second one, is the equivalent to the transform property. However, the syntax is such a headache that you’re advised to use a generator to calculate it.

.box {
	/* IE8+ - must be on one line, unfortunately */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";
	/* IE6 and 7 */
	filter: progid:DXImageTransform.Microsoft.Matrix(
		M11=0.9848077530122079,
		M12=-0.17364817766693127,
		M21=0.17364817766693127,
		M22=0.9848077530122079,
		SizingMethod='auto expand');
	margin-left: -14px;
	margin-top: -21px;
}

Conclusion

As you’ve seen, with various tools we can ensure reasonable rendering of CSS3 in older browsers. I hope this encourages you to take the bull by the horns and practice many of the effects achievable with CSS3! Thanks for reading.