The idea of “progressive enhancement” is to get a site looking the way to want in all of the current browsers, then add some enhancements that most of those browsers can understand. It’s kind of like a bonus for the users of the more progressive browsers. Since they are savvy enough to know what browsers are on top, they can reap the rewards of the polish that CSS3 allows for a website.

Border Radius

Supported Browsers: Chrome, Firefox, Safari, IE9

Border-radius is probably the most useful of the CSS3 attributes. It allows you to add rounded corners to any box item. Using this new property saves a lot of time and divs from the old way of achieving rounded corners with background images. The great thing about border-radius is that it works in all of the major browsers (I’m not including Opera in this category) except IE8 and below. So, most likely, the majority of your site visitors will see your snazzy rounded corners.

You can also target specific corners.

Notice that we use the border-radius attribute (which will eventually be the standard, and which Chrome already understands), but we also include the proprietary attributes -moz-border-radius for Firefox and -webkit-border-radius for Safari.

Text Shadow

Supported Browsers: Chrome, Firefox, Opera, Safari

By far my favorite method for adding that last little bit of polish to your site. It’s amazing how much better a heading or body text looks with a subtle text-shadow added to it. I think it adds a nice level of depth to the text.

It’s as simple as adding the following line to your CSS:

text-shadow:1px 1px #ddd;

RGBA

Supported Browsers: Chrome, Firefox, Opera, Safari, IE9

Another great example of a progressive enhancement that makes a site look great, but one that a user of an old browser won’t miss. RGBA just allows to you define a color with an opacity value (between 0.0 and 1.0) for any place you would normally use a regular RGB color (or hex color). It’s main uses are for making background or text colors semi-transparent.

Closing Thoughts

Using CSS3 to add subtle enhancements to your site is a great way to reward your forward-thinking users who are smart enough to run the latest web browsers.

The first thing that stands out in the new Firefox is the more modern, snappier look and feel. Everything is more shinny, more playful and more clickable.

Can anyone tell me what this means? This is followed by:

Tabbed browsing was a major browser innovation that Firefox popularized

No. Opera popularized tabs. But that’s a forgiveable mistake. It looks like Firefox 2.0 will of course be a decent browser and a vastly superior choice to even IE 7, but it doesn’t look substantially different from Firefox 1.5. This appears to be a “hey let’s make this a major number release for some reason” release — i.e. marketing.

I’ll continue to stick with Opera.

I posted as much here. I’m hoping this gets fixed soon — I wasn’t surprised to see this in a technology preview, but it’s a little unnverving to see it in a beta. It’s a minor issue, but one that prevents me from trying it out.

Get it while it’s hot!

So, as discussed here, all you have to do is manually edit your opera6.ini to set your cookie preferences how you want them and leave it alone. The table of values for “Enable Cookies” can be found here.

Naturally, this won’t be an issue in the official release, but for all you bleeding-edgers like myself, this tip may come in handy until the bug is fixed.