JavaScript Essentials: Compatibility

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

Baseline

We will not go over the specifics of browser detection because there are tons of tutorials on how to do that online. The finer details of your code is something you will have to consider on your own and you’ll need to test that according to the situation. Today we are going to go over some simple techniques to help you filter your visitors in those three groups mentioned above: Modern browsers with JavaScript enabled, Older browsers with JavaScript enabled and Any browser with JavaScript disabled.

Example

All we are going to do here is send an alert to the user when the page is loaded. This is very simple functionality, but as I mentioned earlier, you still need to consider all three groups. Consider the following markup:

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello there</title>
	</head>
	<body>
	<script>
	(function() {
	alert('Hello there');
	})();
	</script>
	</body>
	</html>

For the most part this will work fine with most modern browsers. If you need to communicate some important information in that popup, browsers with JavaScript disabled are out of luck. So here are a couple ways to remedy that:

The <noscript/>

This is potentially the simplest solution to communicate information to the user, but not many people know how to use it correctly. In most cases these days <noscript/> is used to display an image to replace a flash file (if the user does not have the plug-in), or within it they say something along the lines of, “please enable JavaScript.” That could be a good way to cover your ass and just save yourself a few hours of your time, but the usage of <noscript/> is to provide the same information to the user as if they did have scripting enabled.

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello there</title>
	</head>
	<body>
	<script>
	(function() {
	alert('Hello there');
	})();
	</script>
	<noscript>
	<p>Just wanted to say Hello there, but you have JavaScript disabled.</p>
	</noscript>
	</body>
	</html>

Always consider the content within your <noscript/> tags because this is what the search crawlers will see. If you stuff it with instructions on how to enable JavaScript, then your web page has now turned into a tutorial page (at least in the eyes of Google).

CSS Trickery

Sometimes you don’t want to have <noscript/> tags all over your page, and there are multiple elements all over the place which need to be hidden. Here we can use a combination of CSS and JavaScript:

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello there</title>
	<style>
	.hidden { display: none; }
	</style>
	</head>
	<body>
	<h1>Hello there&lt/h1>
	<p>Just wanted to say Hello there, but you have JavaScript disabled.&lt/p>
	<h1>What is going on?&lt/h1>
	<p>Tell me about your day.&lt/p>
	<script>
	(function() {
	var h = document.getElementsByTagName('h1');
	var p = document.getElementsByTagName('p');
	for (var i=0; i<h.length; i++) {
		h[i].className = 'hidden';
	}
	for (var j=0; j<p.length; j++) {
		p[j].className = 'hidden';
	}
	alert('Hello there');
	})();
	</script>
	</body>
	</html>

Here we just add a class name to all elements which don’t need to be seen if the user has JavaScript enabled. In this example I iterated through all of the elements selected, but you can even just add a class name to a higher level element and use CSS to cascade the changes below it. Have a look here:

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello there</title>
	<style>
	body.hidden h1 { display: none; }
	</style>
	</head>
	<body>
	<h1>Hello there&lt/h1>
	<p>Just wanted to say Hello there, but you have JavaScript disabled.&lt/p>
	<h1>What is going on?&lt/h1>
	<p>Tell me about your day.&lt/p>
	<script>
	(function() {
	var b = document.body;
	b ? b.className = 'hidden' : '';
	alert('Hello there');
	})();
	</script>
	</body>
	</html>

In this case, you can use the body.hidden to select child elements which need to be hidden. Very minimalistic way of doing it in terms of your HTML markup.

About the Author

Designer, developer, and excellent napper.