On of the common patterns in front end web development is to detect the browser and enable site features based on the particular browser being used. With so many different broswers and versions being used and constantly being released this can quickly become a pain. Take just the Yahoo Grade A Browsers plus Google Chrome and you are looking at more than ten browser versions being used. Luckily, there is a better way and it lets us support more browsers than we can think of. Instead of detecting browsers we detect features a browser might have.
The jQuery Example
Previous to jQuery 1.3, jQuery would detect the browser being used and act on the browser. This was really useful for Internet Explorer which does things a bit differently. But, when jQuery 1.3 came out they changed their model. Instead of detecting the browser they detected features available in the browser.This makes 2 very important things happen. First, if Internet Explorer starts doing something right in a new release jQuery can just act on it without updating browser detections schemes. Second, if jQuery is in an enviornment it doesn’t know or can’t detect it can still function because it can detect the features in the browser.
A Step Further With Modernizr
Modernizr is a new script that takes this idea of feature detection a step further. It detects if a browser can do the html5 audio and video tags, canvas, CSS gradients, CSS animations, and so much more.What you can do with this is quite forward thinking. You can detect the newest features allowing you to take advantage of them. For example, you can detect if a browser supports the video tag. If so, play your video with that tag rather than flash. This is great example of progressive enhancement.
You can see video progressive enhancement over on archive.org in the media section. If you visit a video, like Architecture is for Everyone in FireFox 3.5 or Webkit based browsers (like Safari 4) you’ll see an option to view the video using the video tag.