Understanding cross-browser compatibility

Cross-browser compatibility is the practice of testing designs across all
major browser systems and is important in Web design because you don’t
just design Web sites for yourself, but for an entire audience on the Web.
Because you have no idea which browser your audience uses, it’s essential
that you test your designs in all the different systems to ensure that all the
visitors to your Web site have the same experience.
The problem that Web designers run into with Web browsers is that each
browser system uses a different layout engine that renders CSS differently.
The difference in CSS rendering can sometimes make adjusting your CSS
styling to account for the different layout engines a challenge. Additionally,
not every layout engine supports all versions of CSS. Table 5-1 illustrates the

different layout engines, the browsers, and the CSS version it supports to
give you an idea of what you’re dealing with when it comes to the different
browser systems.

Table 5-1

  Layout Engines, Browser Types, and
CSS Version Support
Layout Engine Browser System Supports CSS Version
Gecko Mozilla Firefox CSS v1, v2, v3 (partially) *
Presto Opera CSS v1, v2, v3 (partially) *
Trident Internet Explorer CSS v1, v2, v3 (slightly) *
WebKit Google Chrome, Safari CSS v1, v2, v3 (partially) *

*Partially and slightly indicate that the layout engines listed don’t fully support CSS v3, at this time.
Partial support indicates that the layout engine understands CSS v3 properties, but they aren’t supported
entirely. Slight support indicates that the layout engine is understood by the browser, but
support is incomplete, and at times, buggy

The absolute best way to test your Web site across the various browser systems
is to download the browser to your computer and then load your Web
site in it, checking for correct rendering as you go. However, if you only have
a Windows computer, you can’t really test your Web site on a Mac, and vice
versa. Don’t fret, though, because here are two alternatives for you:
✦ Browsershots.org: This is an online, browser-based tool. Visit the
Browsershots.org Web site (http://browsershots.org), enter your
desired URL in the Enter URL Here field at the top of the site, and then
choose your desired browsers and operating systems. Browsershots.
org takes a screenshot of your Web site in each of the browsers that you
indicated so you can see what your Web site looks like in each. From
there, you can fix any problems and retest again, if needed.
✦ BrowserCam: BrowserCam (www.browsercam.com) is another online
cross-browser compatibility-testing tool that captures your Web site and
takes a picture of it in different browsers. BrowserCam even has a tool
that allows you to access its computers remotely so you can see your
Web site in a live browser environment, instead of just getting a screenshot
of your Web site. This service isn’t free; the cost starts at $39.95
per month.

Understanding cross-browser compatibility