JavaScript Essentials: Compatibility

By
Buyco
Published: July 23, 2010Posted in: Features, Weekly JavaScript WorkshopsTags: , ,
JavaScript Essentials: Compatibility

Week 3 – JavaScript Essentials: Compatibility

Compatibility

Who are you programming for?

It’s one thing to create some amazing interactivity with JavaScript, it’s another if you can get it to work with all modern browsers, and it’s above and beyond when you also take into account the needs of browsers with JavaScript disabled.

Creating functionality to work on your site for one particular browser (and version) and for one particular operating system is easy. Getting it to work with other browsers on all operating systems is a more daunting task. Adding functionality to enable elegant error messages for browsers with JavaScript disabled is a work of art!

There are hundreds if not thousands of combinations of browser/operating system combinations. It’s our duty as web developers to ensure that our sites work with the most common browsers and operating systems, without sacrificing too much of the user’s experience. For this week’s session, we’re going to consider the following groups:

Modern browsers with JavaScript enabled

This group is going to be your best friend. These are the browsers which work exactly how you want them to, close to W3C spec and are compatible with almost every bit of modern JavaScript code–although their reliability can also be a big downfall in your habits. Always remember: Just because it works on Firefox on Windows, doesn’t mean it works for everything else.

Older browsers with JavaScript enabled

Although there are not too many users out there sporting the Internet Explorer 6.0 SP2, they shouldn’t be forgotten. It’s not difficult to test code for these types of browsers, you just have to not be lazy. But even if you are, there are alternatives to writing a completely different set of code just for compatibility’s sake.

Any browser with JavaScript disabled

This can include essentially any browser you can think of. This might be the easiest group to speak to because you can’t with JavaScript!

Honorable Mentions

There are some other types of browsers we are not going to consider for this particular week’s session, but it’s good to know that they exist.

Mobile Browsers

Here we enter the realm of mobile browsing. We are now dealing with even more platforms/operating systems, and types of mobile browsers. Now how many of them actually support JavaScript? This group I rarely worry about because I consider the demographic of my audience and this rarely falls within a project’s requirements. In the case of you having to build a site compatible with mobile devices, there are several emulators out there you can use on your computer to test the functionality of your site:

These are only a few of many emulators out there which you can use, but this is a good place to start.

Internet Explorer

Yes we will go over Internet Explorer, but IE should still be considered as a separate group only because of how easy it is to isolate this subset. Consider the following:

		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Hello there</title>
		<!--[if !IE]>-->
		<!--&lt![endif]>-->
		</head>
		<body>
		</body>
		</html>

IE is the only browser you can explicitly call out like this. When writing your code, whether it is JavaScript or even CSS, remember you have this in your arsenal.

About the Author

Designer, developer, and excellent napper.