The term “cross-browser” in the JavaScript world refers to the ability to run the JavaScript code in multiple web browsers. So, if you have built a web application, it refers to the ability of your application to support multiple web browsers. This article explores ways to write scripts that are compatible with multiple browsers, i.e., keeping browser compatibility in mind.
What Is Cross-Browser Compatibility Anyway?
When a web application can be run on different web browsers and present an identical look and feel, we can say that the web application is cross-browser compliant. Wikipedia states, “Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking. Ability to test a web application across different browsers to check how the application functionality behaves across all the tested browsers.”
How to Handle Cross-Browser Compatibility Issues?
If you would like to have your application be cross-browser compatible, the application should work the same way in web browsers such as Internet Explorer, Mozilla Firefox, Google Chrome, Opera and Safari. Well, how would you handle the cross-browser compatibility issues? What are the best strategies and practices that you can adhere to ensure that your web application looks and behaves the same way in all web browsers? In the sections that follow, we will examine some strategies.
Avoid Using Incorrect (or no) DOCTYPE
Different web browsers behave differently, based on the default CSS rules. The doctype keyword is used to specify the rules that you would like to use in your code. It is a good practice to define doctype so that your web browser doesn’t need to guess. This should be the very first statement in your HTML code. The following code snippet illustrates how this can be specified.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">You should also use CSS reset style sheet in your web page — this will ensure that when your application is run on different web browsers, each of these browsers start rendering the same basic set of rules.
Use Conditional Comments
You should take advantage of conditional comments in lieu of CSS hacks to link stylesheets for different web browsers. Here’s an example that illustrates this:
<link type="text/css" href="commonstyle.css" />
<!--[If IE]>
<link type="text/css" href="IE.css" />
<![endif]-->
<!--[if !IE]>
<link type="text/css" href="NonIE.css" />
<![endif]--> Use Cross-Browser Compliant Libraries
There are a plenty of JavaScript libraries that provide cross-browser support. You can take advantage of libraries such as, jQuery, YahooUI, Dojo, etc. These libraries can abstract the differences in JavaScript and DOM and make your application cross-browser compliant. You can also leverage cross-browser compliant CSS frameworks like BluePrint. You can use https://caniuse.com/ to know which APIs are supported by your web browser.
Testing for Cross-Browser Compatibility
Fixing cross-browser compatibility issues can be a frustrating and daunting task. You should test your web application for cross-browser compatibility issues before you deploy the application. When building web applications that can support multiple web browsers, there might be different results when testing the application depending on various factors involved (i.e., plugins not working perfectly in one or more web browsers, alignment issues, HTML5 video formatting issues, text and font issues, etc.). Hence, it is a recommended strategy to incorporate cross-browser testing as a part of your testing cycle. There are plenty of tools around to help you on this. Some of the popular ones include: browsershots, browsercam, IETester and Firebug.
Summary
This article presented some of the recommended strategies to make sure that your application behaves the same way when the application’s web pages are rendered by different web browsers. On a different note, you could explore the popular JavaScript library called jQuery. One of the best-known features in jQuery is the cross-browser support. To understand how cross-browser support can be implemented and how it all works, take a look at the uncompressed jQuery source code to understand how the jQuery team implemented it. Happy reading!
