Modernizr and Progressive Enhancement

Modernizr

Since Visual Studio 2012, we can always find this file called modernizr-(version).js in the default ASP .NET 4.5 MVC template. So, what is Modernizr (can be downloaded from Nuget)?

Modernizr is a JS library which is able to detect HTML5 and CSS features in the user’s browser. During page load, Modernizr will start to test those next-generation features. After that, it will create a JS object which contains the test results. For example, Modernizr.canvas will be true if the browser supports the HTML5 <canvas> element.

Modernizr then adds CSS classes to the <html> tag that tell us which CSS / HTML5 features are supported on the current user’s browser. For example, in my Chrome browser, touch feature is not supported, thus, there is a no-touch class added. The other features like video, audio are all supported.

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

With this information, we will then be able to provide alternative look-and-feel for those users who are using older versions of browser instead of telling those users “Best view in version xxx of browser yyy”.

With YepNope.js, we will also be able to tell Modernizr what to test and then what JS/CSS to load if the test passes or fails.

Finally, please remember that Modernizr only provides us information about which features are (not) supported. It won’t magically enable those features for us. We need to write corresponding JS/CSS to provide alternative views when the features are not supported on the browser.

In short, Modernizr is a good tool for designers to implement the idea of Progressive Enhancement.

Graceful Degradation

When I was reading about Progressive Enhancement, I read this term called Graceful Degradation. It basically means the way of using the newest and best web technologies while maintaining support for older browsers.

The famous border-radius feature in CSS3 is supported in modern browsers like IE11, Edge, Chrome, and Firefox but it’s not supported in Internet Explorer 7 and 8. Does this stop us from using border-radius in our website? Nope. This is because for users who are still using IE7/8, they can still use the website in the same way as those who are using modern browsers. Just that those who are using old browsers cannot see the beautiful effect of border-radius.

Different visual effect in IE8 and IE11.
Different visual effect in IE8 and IE11.

So basically the idea of Graceful Degradation is that it starts at ideal user experience level and it decreases depending on browser capability down to a minimum level.

Progressive Enhancement

Progressive Enhancement does in the opposite way as Graceful Degradation. It starts at a board minimum user experience and increases depending on browser capability. For example, when user switches from old browser to modern browser, he/she will be able to experience more advanced functionality that will be automatically enabled on the modern browser. So, Modernizr helps us to achieve this by checking if a certain feature is enabled or not on the current browser.

References

Summer 2015 Self-Learning Project

This article is part of my Self-Learning in this summer. To read the other topics in this project, please click here to visit the project overview page.

Summer Self-Learning Banner

Advertisements

One thought on “Modernizr and Progressive Enhancement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s