CSS3 is powerful stuff, enabling lightweight, flexible designs that look great in modern browsers. Older browsers, however, vary in their support of new selectors, properties, and queries. To design once for all, we either avoid new stuff like CSS3 entirely, or apply it progressively for those who can use it.
The idea behind progressive enhancement is to design with a layered approach, beginning with basic content and functionality that’s available to everyone, regardless of browser or Internet connection. On top of this foundation, new layers of functionality and style are added progressively, enhancing the user experience for those with better bandwidth, browsers, and devices.
Rounding corners is a prime example of enhancing progressively with CSS3. We begin with a basic text box that’s accessible to all browsing devices:
<aside>
Lorem ipsum text..
</aside>To enhance the user experience, we add some styles, like a border, text color, and background color. These are all basic styles that should work fine in all browsing software:
aside {
background-color: #ffffcc;
border: 1px solid #cccc99;
color: #333;
}Even older browsers will display this box accurately, but why confine the user experience to old technologies? One of the many cool things you can do with CSS3 is display rounded corners on many block-level elements. If all browsers understood CSS3, we could implement rounded corners with a single rule:
border-radius: 10px;
A beautiful thing about CSS is that progressive styles degrade gracefully when support fails. So newer browsers that have implemented border-radius will display the fully styled text box, while older browsers that don’t understand will simply skip that rule and display the other styles.
On the way to full support, browsers such as Firefox, Opera, and Safari may implement new CSS properties according to their own rules, via the so-called vendor-specific prefix. These prefixed CSS properties are recognized only by its corresponding browser(s), and may be included along with the standard CSS property like so:
border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;Browsers that understand border-radius will apply the style and ignore the other rules. Browsers that don’t recognize border-radius will continue down the list, applying their own vendor-specific property if it exists. Lastly, browsers that don’t do rounded corners will simply ignore the border-radius property and move on.
To improve CSS3 support for older browsers, you can use JavaScript-based tools such as Selectivizr, Modernizr, and ie7-js. Such scripts further enhance support, but fail when JavaScript is not available in the visitor’s browser. To provide a fallback for this case, we can include additional HTML and/or CSS via <noscript> tags.