As I explained in this recent post, the current browser situation is a mess. Some browsers support most of HTML5 and CSS3. Other browsers barely even support CSS2. The problem is, many people still use these old browsers, and as a result, developers cannot simply ignore them and build applications for newer, standards compliant browsers.
This creates a problem for application developers. If they want to use CSS3 in their web apps right now, they must go through the frustrating and time-consuming process of fixing their apps for all browsers. This isn’t easy. It also makes you hate certain browsers (I’m looking at you, IE7).
The question is: Is there any way around this issue? Is there any way developers can use CSS3 in their web apps right now, while avoiding the browser mess entirely?
The big question: How well does it work?
Let’s find out. To test it, I’m going to apply PIE to the form I created to illustrate the browser differences (Found in this post). To refresh your memory, here are a couple of screenshots of the form I created last time. The screenshot on the left is from the Chrome browser, while the screenshot on the right is from Internet Explorer 7. As you can see, the CSS3 styles do not appear in IE7.
Now, let’s see if we can fix the form on the right with PIE. To apply PIE, we must follow these steps:
Step 1: Get PIE
Before you begin, you must download PIE and then upload the files to your server. This page has all the instructions for downloading the files and placing them in the proper location: http://css3pie.com/documentation/getting-started/
Step 2: Apply PIE
Now that we’ve downloaded and setup PIE in the correct locations, let’s apply it to our form and see if it will translate those CSS3 styles to older browsers. Which CSS3 styles are we focusing on? In this example, I’ve used a few different CSS3 styles. Here’s a list and a brief description of each:
- border-radius: This style creates rounded corners.
- box-shadow: Produces a nice shadow effect. It defaults to a drop shadow, but if you would like to create an inner shadow like you see in the input fields, just add “inset” to the style.
- background: linear-gradient: This style creates a nice gradient effect on an element.
The above styles are all supported by PIE, and should work in IE7 when we’re all said and done. To use PIE, we’ll need to do two things.
1. Add the following style to every CSS rule that uses CSS3 elements.
**Very important note: The pathname should be relative to the HTML file location, not the CSS file.
Obviously, you’ll replace “pathname” with whatever folder path you’ve placed the PIE files.
2. Add a “-pie-background” style to every rule that uses a gradient. To do this, just copy the “background” style, and add a “-pie-” prefix to the copied style. That probably sounds confusing, so here’s a before and after example of what this would look like in your CSS:
Here’s the styles for the “Submit” button without PIE.
Now, here are the same styles with PIE applied. I’ve highlighted the differences.
One more thing to note: You’ll notice that some of these CSS3 styles are preceded by “-webkit-”, “-moz-”, “-o-”, or “-ms-”. This is necessary because not all browsers handle CSS3 the same way. As a result, we have to add these browser-specific prefixes. Here’s a short list of each prefix and its corresponding browser(s):
- -webkit- = Safari and Chrome
- -moz- = Firefox
- -o- = Opera
- -ms- = IE
That being said, the latest browser versions claim to offer support for these CSS3 styles without using the prefixes. However, since we don’t know which browser versions our users will have, it’s still a good idea to add the prefixes.
Step 3: Testing
Okay, so I’ve added PIE to every style containing a CSS3 element. Now let’s test it out. If you have multiple browsers, here’s a link to a live demo so you can test it out on your own. Otherwise, here are screenshots of the form in Chrome and IE7:
As you can see, PIE worked! While the forms do look a little different, IE7 now displays most of the CSS3 styles. Now, it’s not a perfect fix, and doesn’t translate every CSS3 style. In this example, you’ll notice that the inset shadows on the input boxes do not display in IE7. Unfortunately, PIE does not yet support that feature. For a full list of supported features, visit this page: Supported Features
If you want to use CSS3 styles in your web applications right now, PIE offers a decent solution. Without much effort on your end, it translates many new CSS3 styles to the older, yet still popular browsers. While it doesn’t currently support every CSS3 feature, it does let you use some of the more popular ones. In my opinion, PIE is one of the simplest ways to use many CSS3 styles in your web apps, while avoiding the browser mess.
In the coming weeks, I’ll be exploring other ways to avoid the browser mess. Stay tuned…