Testing Across Multiple Browsers - CSS3 Foundations - page 242

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 web-
site 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 every-
one 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 prop-
erties 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 the project files up to this point, you can download them from www.wiley.com/
go/treehouse/css3foundations .
Vendor Prefixing the Easy Way
Until now, you've used vendor prefixes only on CSS3's experimental properties to save having to write out the same
property multiple times.
I developed the Cool Shoes & Socks page in Google Chrome, and now that it's complete, I want to take a look at it in
Mozilla Firefox. If you used Firefox to create Cool Shoes & Socks , take a look at it in another modern browser, such
as Chrome, Safari, or Opera.
Pleasingly, Cool Shoes & Socks doesn't look too bad at all in Firefox. Figure 15-1 shows that the page has a few is-
sues, but they all relate to the fact that the stylesheet uses experimental CSS3 properties, which is yet to include those
properties with a -moz- prefix—or any other vendor prefix for that matter. Without the full set of vendor prefixes, the
showcase doesn't animate, the input fields in the newsletter box are too wide (because of no prefixed box-sizing
property), and the “25% Off” banner isn't rotated.