Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Detecting browser-compatibility with Modernizr

Saturday, January 7th, 2017 by Servage

Browser-CompatabilityModernizr is a JavaScript library for detecting what features are supported in a web browser. It can be used to check whether a visitor’s browser supports CSS keyframe animations, Flash videos, the latest JavaScript features and much more. If you want to take advantage of the latest browser features without dropping support from older browsers, Modernizr is a perfect addition to your website.

How Modernizr Works

Modernizr is a small JavaScript file that you can add to your website. It makes a Modernizr object available that you can call to query for browser support. For instance, calling the method Modernizr.flash() returns true if Flash is supported in the visitor’s web browser. If Flash is not available, the method returns false. You can use this information to show, hide or update elements on a web page. For instance, if your website has an HTML5 video, you can show a <div> that has the video inside it. However, if the visitor’s browser does not support HTML5 videos, you can show a popup telling the visitor to update their web browser.

The above was a use case with JavaScript, but you can use Modernizr with CSS too! The way how this works is that Modernizr places a class to the root <html> element depending on whether a feature is supported or not. If Flash videos are supported, a class called “flash” is added to <html>. If no Flash support is found, the class will be prefixed with “no-” and the <html> element would look like <html class=”no-flash”>. So how can you use this information in a CSS file? Because <html> is the uppermost element, you can use descendant CSS selectors, such as “.no-flash .video-player”. You could for example add a red border to the video player element indicating that the video is not available, or you can hide it entirely and show an HTML5 player element instead.

How to Get Modernizer

Now that you know how Modernizr works and what it is capable of, you may be wondering how to integrate it to your own website. To get a copy of the library, go to www.modernizr.com and click the download button. Unlike with many other libraries, this takes you to a page where you can customize a version of Modernizr for your needs. Check all the features you want to test for and then click the build button. If you want to use Modernizr with CSS like we did above, make sure to check the CSS checkbox. When you click the build button, you can download a .js version of your custom Modernizr file. Add this file to your HTML and you are ready to go.

Detecting browser-compatibility with Modernizr, 5.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.