Aug 1, 2011
No Comments
Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site. The issue is that not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browser.
Believe it or not, all web browsers do not behave the same way. And depending on how a website is coded, it might look differently in each browser. Clearly, this can be quite problematic; broken sites often look unprofessional. So how can you determine whether your website looks the same across all browsers? In this article, some basics will be divulged of making sure your site is cross-browser-compatible, including resources to help you along the way.
Well, one approach to cross-browser compatibility is to install multiple browsers on your computer, such as Internet Explorer, FireFox, Safari, and Opera. But there is one big flaw in method: browsers behave differently depending on version and platform. This means that you’d need to install all versions of each browser on your computer to determine cross-browser compatibility… Clearly, this is unreasonable. So, how can you test your site?
Fortunately, there are free tools which can capture a website and let you preview screenshots of your site in each browser. There are a few websites that are on the web that can help you determine if your website is truly compatible with every browser from Safari to Mozilla’s Firefox all the way to Google Chrome. The First is called “Browser Shots” and basically it runs I believe on 50 servers with each running a different browser of your site and sending you a snapshot of it.
It is also a good practice to verify that your markup (HTML, CSS) meets current coding standards. This ensures that code is more likely to be compatible with current browsers as well as any new browser. Two free tools to validate your website can be found by clicking on the following links: HTML Validator, CSS Validator. (Feel free to use some of the other tools on this site. There is also a link checker which can be helpful in finding broken links.)
If you are using advanced coding, such as JavaScript, be sure to verify compatibility between the major browsers. For example, if you are doing any DOM scripting, be sure to check out compatibility tables.
Finally it’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices.