Progressive enhancement enables different browsers deliver different user experiences. Thanks to progressive enhancement, anyone can access the content in any browser, but people with more advanced browsers get more advanced features. That way, we’re able to deliver an optimal browsing experience across the board.
Say you go to a site that has a lot of data in a table form and you have the option to filter that data. Every time you click a filter, the page reloads to show you the filtered data. For browsers that have Javascript enabled, the new filtered data will show up without the browser refreshing the page. This gives the user a smoother and better experience on the site.
Here’s a more advanced example. If you log onto the Atebits website using Internet Explorer, you will see a nice site that is designed well. If you log onto the site using the new Firefox web browser, you will notice a new detail: The words on the homepage have drop shadows on them. Traditionally this would be done with images, but with the addition of CSS3 this can now be done in code. If you log onto the site again using the latest Safari browser, you’ll notice another new feature — when you hover over one of the three icons, you’ll notice they get a little larger and rotate left. While it’s possible to make this happen with Javascript, in this case it’s being done purely with the CSS3 that is unique to Safari.
You can use progressive enhancement in other ways than just CSS. The trick is to only use progressive enhancement on features that are not site-dependent. If you added something really nice but someone can only see it if they have that feature, you just restricted other users from being able to see that content.
If you want to learn more, go through other parts of the Atebits site using various browsers and look for other progressive enhancement features. They're all over the place.