Like this article? We recommend
Browser Support
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Browser Support
The only problem at the moment: Not all browsers support all the CSS3 features you may want to use. We're mainly looking at IE 6 to IE 8, but older versions of other browsers may come into the picture from time to time as well. To combat this problem, you can take a variety of approaches, but which you choose really depends on your situation and what's appropriate for you:
- You could do nothing, just accepting that your site won't look as good in older browsers. If you choose this approach, you should test to make sure that your core content and functionality are still accessible and usable. However, note that most of the CSS3 features discussed in this article can degrade in older browsers, leaving a less pretty (but still working) experience.
- You could use a polyfill to build in support for your CSS3 features in browsers that don't support them natively. Polyfills generally come in the form of a JavaScript library that you attach to your page. For example, CSS3 PIE is a polyfill that adds support to IE 6–8 for bling features such as rounded corners and gradients. You should use these features sparingly, though, as more JavaScript means more processing, and therefore more performance hits.
- You could create alternative styles for non-supporting browsers, serving them as appropriate by using a browser-detection mechanism such as IE conditional comments; or, better still, using a feature-detection mechanism such as Modernizr.
- If your client or boss really demands that your site must look "the same across all browsers" (a crazy notion, especially in this age of mobile phones and tablets), you could just not use CSS3.