Understanding Cross-Browser Compatibility When Developing WordPress Websites - dummies

Understanding Cross-Browser Compatibility When Developing WordPress Websites

By Lisa Sabin-Wilson

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 designs in all the systems to ensure that all your website visitors have the same experience.

The problem that web designers run into with web browsers is that each browser system uses a different layout engine (the browser’s underlying code that powers the 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.

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)

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.

  • 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 page, and then choose your desired browsers and operating systems. Browsershots takes a screenshot of your website in each of the browsers so you can see what your website looks like. From there, you can fix any problems and retest again.

  • BrowserStack: BrowserStack is another online cross-browser compatibility testing tool that gives you real- time views of your website using a Flash interface. This service is free; however, option premium upgrades are available for a cost.