Understanding Cross-Browser Compatibility When Developing WordPress Websites

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Cross-browser compatibility is the practice of testing designs across all major browser systems and is important in WordPress web design because you don’t just design websites for yourself, but for an entire audience on the web. Because you have no idea what browser your audience uses, you must test your WordPress designs in all the systems to ensure that all the visitors to your website have the same experience.

The problem that WordPress web designers run into with web browsers is that each browser system uses a different layout engine (the underlying code of the browser that powers way the browser interprets design language such as CSS and HTML) that renders CSS differently. The difference in CSS rendering can sometimes make it a real challenge to adjust your CSS styling so that it takes into account the different layout engines available.

Additionally, not every layout engine supports all CSS versions. The table illustrates the different layout engines, browsers, and CSS versions the layout engine supports to give you an idea of what you’re dealing with in different browser systems.

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)

In the column of the table titled Supports CSS Version, partially means that the browser system supports most of the features of the CSS version, where slightly means that the browser system supports very few features. The absolute best way to test your website across the major browser systems is to download the browsers to your computer and then load your website in each browser, checking for correct rendering as you go.

However, if you have only a Windows computer, you can’t really test your website on a Mac, and vice versa. Don’t fret, though, because here are two alternatives that you can use when you need to test your sites on a browser you don’t have access to:

Browsershots: This is an online, browser-based tool. Visit the Browsershots website, enter your desired web address in the Enter URL Here field at the top of the site, and then choose your desired browsers and operating systems. Browsershots takes a screen shot of your website in each of the browsers that you indicated so you can see what your website looks like. From there, you can fix any problems and retest again, if needed.
BrowserCam: BrowserCam is another online cross-browser compatibility testing tool that captures your website and takes a picture of it in different browsers. BrowserCam even has a tool that allows you to remotely access its computers so you can see your website in a live browser environment, instead of just getting a screen shot of your website. This service isn’t free, however; there is a nominal cost associated with BrowserCam.