Nashville Web Design

CSS3 for IE

Mar 01st   -   Articles, Snippets & Tutorials

CSS3 was introduced 9 years ago and promised to offer web developers the ability to control even more styling from within the style sheets. As you might expect, the browser dragging up the rear has been Internet Explorer. Even the much-used iteration, IE8, doesn´t support CSS3. Let´s look at a few methods that have emerged in order to help the older IEs catch up to the rest of the web.

screen_picor
CSS3 for IE

The CSS3 spec has includes properties for controlling things like border-radius, box-shadow, and linear-gradients, just to name a few. Many browsers have supported these properties for years now, though by introducing their own proprietary properties like -moz-border-radius: for Firefox and -webkit-border-radius: for Safari.

1.) CSS3 PIE Wouldn't it be great if you could just force IE to obey your CSS3 properties? Well now you can, thanks to the folks at CSS3 PIE. They have create a very useful .htc file that you simply reference in your style sheets and viola!

PROS: I really like this method because you're able to define your styling in the .css files.

CONS: It supports a few standard CSS3 properties and then introduces even more pseudo-properties of it's own.

2.) jQuery Plugins You can do just about anything with jQuery including generate CSS3-like styling of your elements. There are many plugins. Here´s one for rounded corners. And one for shadows.

PROS: Because you're defining these styles with jQuery, you can control them all from jQuery for even more interactivity. Ex: Add a shadow from a .click() event.

CONS: You're styling elements not with .css but with jQuery.

Articles, Snippets & Tutorials

CALL (615) 200-8855