CSS3 Foundations

chapter fifteen

Testing Across Multiple Browsers

The first thing to do to make your website cross browser compatible is to get yourself a glass of water (to drink, not to throw over the computer) and take a deep breath. You’ve spent countless hours trying to make your website perfect. You’ve used best practices and been extra careful to use the latest CSS3 features safely. But when you open a browser you haven’t developed in—especially older browsers such as Internet Explorer versions 6 and 7—you’re going to see broken bits, sometimes just a few broken bits, other times lots. Fear not, this happens to everyone and is just the nature of creating web pages. Usually, a broken page looks worse than it actually is, and you can fix it in no time.

Obviously, every web page is different, so how you go about achieving cross browser compatibility is unique to each page. The most universal approach is to follow best practices—keeping your code clean and semantic, which you’ve done throughout CSS3 Foundations.

In this chapter, you start by making sure the Cool Shoes & Socks page works in modern browsers, add the CSS3 properties that need to be prefixed for other browsers, and then move on to add fixes for Internet Explorer versions 6, 7, and 8.

Project files update (ch15-00): If you haven’t followed the previous instructions and are comfortable working from here onward or want to reference ...