“Browser wars” was a term that originated in the late 1990s when Internet service vendors created new features that worked exclusively with their own browser. This exclusivity caused cosmetic and functionality issues when the features were used with the other available browsers. Since then, there have been fewer and fewer of these issues as new Web standards have been developed and Web vendors have begun to adhere to these compliancy standards. But even so, the issues can still occur.

Website owners often have questions about how to solve this problem of compatibility across different browsers. Having a basic understanding of the different browsers is the first step to optimizing your website and coming out a winner in the browser wars.

Which browsers should I be concerned with?

There are many browsers—and many versions of those browsers—available today, and there are different reasons why. Not every Internet user rushes to install the latest upgrade. Some people are Mac; some are PC. Some swear by Mozilla. According to W3Counter.com, the most popular browser today is Microsoft®’s Internet Explorer® (IE) 8. In the graphic below, you’ll find the Top 10 browsers as of March 2010 and their market share.*

Before we move on, it’s helpful to understand some of the history and nuances of the Top 10:

• Internet Explorer has been around for more than a decade and is now up to version 8.
• Firefox®, an open source browser from Mozilla Corporation, has been around since 2004 and is compatible with Windows®, Mac, Linux®, FreeBSD, Solaris™, GNU, and other operating systems. Firefox’s latest version is 3.6.3.
• What Internet Explorer is to Microsoft, Safari is to Apple®. The Apple Corporation released Safari in 2003. Version 4 is the latest available and can run on both Macintosh™ and Windows operating systems, including early versions of Windows XP. Safari is also the browser used on Apple’s iPhone.
• In September 2008, Google™ released its own Web browser, Chrome, in beta. Now in version 4, the browser works on Microsoft, Macintosh, and Linux systems.
• Opera®, developed by Opera Software, can also run on a wide range of operating systems—such as Windows, Mac, Linux, FreeBSD, and Solaris—and on many mobile phones and devices.

What does the browser have to do with how my website looks?

All browsers use a “layout engine” software to display the content of a website, including text, images, and CSS (or cascading style sheets). Because there’s no uniform layout engine available for all of the browsers, each browser uses its own. The software functions according to “Internet standards,” or rules that instruct the code to display in a certain way.

CSS is the programming language responsible for the cosmetics of a website. This code ranges from the position of images (static and background) to how the fonts display on the site. For example, CSS tells your site whether to show blue headers or a size 14 paragraph font.

When CSS was first implemented in browsers, it was used on an “as needed” basis. But as more browsers were created and new versions were released, developers found that one site never looked the same in all browsers. For that reason, the World Wide Web Consortium (W3C®) was formed to create a universal set of rules that all browsers should follow. Developers worked to improve their browsers to comply with these rules.

The original way of displaying CSS before the W3C rules is called “Quirks Mode.” The new way that follows standards compliancy is called “Strict Mode.” Starting at the time of the release of IE 6, Web developers could choose which mode a site would appear in by using “doctypes.”

Quirks Mode is triggered by using the “transitional” doctype or by not declaring a doctype at all. Browsers as old as Internet Explorer 5 and Netscape® 4 didn’t have the option of using the “strict” doctype. Strict Mode is triggered by using the “strict” doctype, or when a new doctype is declared that is not recognized.

One CSS difference in Quirks Mode is that an element’s width excludes padding and borders, while in Strict Mode you have to subtract the border and padding from the total width. For example, a “div” tag in HTML has a 1-pixel border and 10 pixels of padding on the left and right, and the width of the element is supposed to be 130 pixels. In Quirks Mode, the width of the element would be defined as 130px, while in Strict Mode the width would be 108px.

Another CSS difference is a space that shows below images in Strict Mode. Images in this mode are considered “inline” elements automatically, therefore preserving a line height below the image. In Quirks Mode, the image is considered a “block” element, and the line height of the image is not present.

Compatibility issues don’t just extend to the CSS language. Both HTML and JavaScript can be affected by the differences between browsers. Some “operators” within JavaScript are only recognized in certain browsers. For example, to target an HTML element in JavaScript, older Internet Explorer browsers use the “document.all” method, while Netscape browsers use the “document. Layers” method. One method wouldn’t be recognized in the other browser. In HTML, some tags, such as “abbr” (used to show full titles for abbreviations), won’t work in older browsers. You can read more about the differences between browsers and languages at www.QuirksMode.org.

How can I test my website for browser compatibility?

It’s easy. Download the Top 10 Internet browsers listed above; they’re free. However, since a single computer only allows one version of a browser at a time and one operating system at a time, viewing your site on multiple computers is necessary. If you have a desktop and a laptop, or multiple computers in your office, you can easily run tests on multiple machines. One helpful aspect of Internet Explorer 8 is that it has a built-in compatibility mode that allows you to view a website in both IE 7 and 8.

Having a Macintosh operating system is also handy. While its Safari browser can be used on Windows, the Macintosh system tends to bold fonts more than a Windows Safari browser would. These bold fonts may cause text to line-break earlier on the site. For example, the links in the header of your site may appear all on one line in Windows, but break to a second line on a Macintosh. Although browsers are made to be compatible with different operating systems, some operating systems render site elements differently in the same browser.

How do I find out which browsers and operating systems my visitors are using?

To find out which browsers are most commonly used to view your site—or which operating systems your visitors are using—you’ll want to run an analytics service such as Google Analytics or a free script from W3Counter.com. It’s possible that site visitors are not using one of the top browsers or that the percentage of visitors doing so is very small. It might not be necessary to make your site compatible with every browser your site visitors use—especially if, for example, only 5 out of 100,000 visitors are using a particular browser.

The W3C top browsers won’t always match up with the Top 10 for a specific website because each site attracts certain types of people. For example, if you own an antique site, your visitors are likely to be of an older age group that may not be as current with the technology; they may very well have an outdated machine with an outdated browser. Thus, you may see a boost in the percentage of Internet Explorer 6 users. In the same respect, your site could attract a younger crowd that tends to use the latest versions of browsers for their specific operating system. Here, you may find that you have a larger audience of Mac users.

Browser compatibility is an important issue when it comes to your website design. Every Internet user has a preferred Web browser they use to surf the Web. If a user runs into a problem with the look or functionality of your site, they are more likely to leave than to download a browser that works better. By making your site compatible across the most widely used browsers, you’ll reduce your bounce rate and possibly attract new users.

*Source: W3Counter.com.

This article was published in the March/April 2010 issue of eBiz Insider, the magazine for eCommerce professionals from Web.com.

---

Want to learn more? Follow us on Twitter and join us on Facebook.