Feature Detection with Modernizr for Cross Browser Compatibility

One of the major care when working with CSS is the inconsistent feature support among browsers. Modernizr is one such library that helps eliminate those inconsistencies by utilise Feature Detection.

Modernizr doesn ’ t transform your codification. It precisely enhances it by adding specific CSS classes to your HTML tatter.

This article research Modernizr, its Feature Detection, and how to use it to ensure Cross-Browser Compatibility for websites.

What is Modernizr, and Why do you need it?

Modernizr is a JavaScript library that automatically detects which features or, rather, web technologies are available in exploiter ’ browser. For example, Modernizr can easy find which HTML5 and CSS3 feature are be endorse by the visitor ’ s browser.

Modernizr has a feature detection mechanics, using which, it allows you to easily customize your user ’ experience based on their browser capabilities. Using the feature detection support, developers can test some of the newer technologies and provide fallback for browsers that do not support those technologies.

Modernizr is important because it provides an easygoing way to detect any new feature, whether or not it is compatible with the browser. This enables devs to take any corresponding action for delivering a consistent exploiter experience.

For example, if your browser make not support a particular video feature, then you might just need to display a uncomplicated page design in its place for a seamless user experience. This is possible with Modernizr, as it provides information about whether the said feature is compatible or not. Hence, with Modernizr, you offer a consistent exploiter experience to different users.

What is Modernizr lineament detection?

In web ontogenesis, developers always have to figure out whether a particular new feature would be available in the different browsers accessed by users or not. Without Modernizr, the dev might just have to use hit and run and then check if the new lineament works well with the aver browser edition.

This approach might be really cumbersome, and revisiting the same area of code, again and again, can even be very bad.

This is where Feature Detection comes into the painting. Feature Detection characteristic programmatically checks if the new feature works in the browser version and regress the result in True or False. Based on the method ’ s outcome, the dev can easily design the codification further, and there will be dead no need to revisit the codification even with multiple browser version launch.

CSS3 Feature Detection with Modernizr

Before deep diving into Feature Detection with Modernizr, let ’ s understand the three introductory functions which Modernizr performs for Feature Detection:

• It creates a JavaScript object to validate whether a special HTML or CSS feature is endorse in a browser or not.
• It add grade to indicate feature support that can be used to conditionally apply CSS styling rules to different elements.
• It allows a conditionally supply of custom JS scripts or polyfills to copy the features which are lacking.

Modernizr & # 8217; s Classes

Modernizr, by default, put classes for all of your test on the origin element, i.e.,& lt; html & gt;for websites. This means add a class for each feature when it is supported and adding it with a no-prefix when it is not support. For example, .feature or .no-feature. Modernizr & # 8217; s classes exactly make it easier enough to add characteristic.

Take an model, if you desire Modernizr ’ s feature detection for CSS Gradients, in that event, depending on the browser, the solution will be either& lt; html class= & # 8221; cssgradients & # 8221; & gt; or & lt; html class= & # 8221; no-cssgradients & # 8221; & gt;.

Now that you have both of these two states, you can write CSS to cover both scenarios, as witness below:

.no-cssgradients

.no-cssgradients .header {background: url (`` images/radiobutton.png '');}

.cssgradients

.cssgradients .header {background-image: linear-gradient (cornflowerblue, rebeccapurple);}

• classPrefix

In Modernizr, you hold an selection to add aclassPrefixinside your config in case Modernizr ’ s class name clashes with one of your pre-existing classes.

For example, deal the hidden detect, which adds a.hiddenclass in order to conceal things. In case you want to reach something similar, you can use the below in your configuration.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

{'' classPrefix '': `` foo- '', '' feature-detects '': [`` dom/hidden '']}

With this configuration, instead of& lt; html class= & # 8221; hidden & # 8221; & gt;, you would get & lt;html class= & # 8221; foo-hidden & # 8221; & gt;.

• no-js

Modernizr by nonremittal will rewrite& lt; html class= & # 8221; no-js & # 8221; & gt; to & lt; html class= & # 8221; js & # 8221; & gt;. This is make in order to hide certain elements, which should otherwise be discover only in environments that execute JavaScript. In case this alteration ask to be disabled. You can setenableJSClassto false inyour config.

• enableClasses

In case you do not need Modernizr to add any of its classes, you can setenableClassesto false in your config. However, bear in mind that this does not have any outcome on the.no-jsupdate. So, in case you do not require that, you can setenableJSClassto false.

Talk to an Expert

Using Modernizr with JavaScript

Modernizr hold track of the results of all of its characteristic detections expend the Modernizr object. This mean that for each tryout, Modernizr adds a like property.

if (Modernizr.newFeature) {showOffNewFeature ();} else {getTheSameOldExperience ();}

Helper methods in Modernizr

Modernizr also offers a lot of additional functions. Some of them are mentioned below

• Modernizr.on

Syntax

Modernizr.on (characteristic, cb)

Implementation

Modernizr.on ('flash ', function (result) {if (result) {// the browser has flash} else {// the browser perform not have flashing}});

• Modernizr.addTest

Syntax

Modernizr.addTest (lineament, test)

The virtually widely used way of creating one ’ s ownfeature detectsis by telephoneModernizr.addTestwith a string (preferably minuscule and without any punctuation) and a function to be executed which returns a boolean result.

Implementation

Modernizr.addTest ('itsMonday ', function () {var d = new Date (); return d.getDay () === 2;});

In the above case, Modernizr.itsMonday will retrovert true whenever it is Monday and false on every other day of the workweek. Note that the Modernizr feature detects functions are always in minuscule when they are supply to the Modernizr objective.

• Modernizr.atRule

Syntax

Modernizr.atRule (prop)

Implementation

var keyframes = Modernizr.atRule (' @ keyframes '); if (keyframes) {// keyframes are supported // could be ` @ -webkit-keyframes ` or ` @ keyframes `} else {// keyframes === ` false `}

HTML5 Feature Detection with Modernizr

Modernizr creates a global Modernizr JavaScript object that farther allows us to query properties of that object in order to perform Feature Detection by nameModernizr. & lt; featurename & gt;.

In order to screen for canvass support, you can write the following:

& lt; handwriting & gt; if (Modernizr.canvas) {alert (`` This browser indorse HTML5 canvass! ``);} & lt; /script & gt;

You can also create this a little interesting by using an else argument as well.

& lt; script & gt; if (Modernizr.canvas) {alert (`` This browser supports HTML5 canvas! ``);} else {alarm (`` no canvas: (``);} & lt; /script & gt;

Once you try this with different browser, you will easily get to know which browser versions are support HTML5 canvass and which aren ’ t.

Modernizr For Cross Browser Compatibility

With more and more websites make use of the modern HTML5 and CSS3 features, Modernizr has become an indispensable plus. This is because Modernizr with Feature Detection not simply identifies which browser adaptation can support the late feature. It also helps to provide a pullout for all those unsupported functionality and characteristic. As a result, it ensures a smooth user experience regardless of their browser version.

Browser Compatibility for HTML5 features

Let us see the browser compatibility of the diverse HTML5 features or elements by usingcaniuse.com, which lists the compatibility of different browser variant for HTML5 elements.

As seen below, almost all desktop browser, including Microsoft Edge and IE11, provide browser support for HTML5 elements. Except for a few older edition of Firefox and IE, overall, it enjoys quite vast browser support from different browsers.

Source: caniuse.com

Browser Compatibility for CSS3 features

The browser compatibility result for CSS3 features can be checked out usingcaniuse.com.

Except for the CSS3attr()role, almost all CSS3 features enjoy full browser support from almost all the late browser versions.

Source: caniuse.com

With Modernizr Feature Detection, you can decipher which element is grouchy browser compatible. This will help in happen a workaround to make the UX consistent and seamless when using element not completely indorse by all browsers and their adaptation.

Testing Cross Browser Compatibility with BrowserStack

While Modernizr Feature Detection aid in identify areas where certain elements/features are not compatible with the various browser versions, it is still important to execute of the application before making it alive.

With, you can approach 3500+ browser and (mobile and background) and enjoy a wide coverage for. Using BrowserStack ’ s enormous range of device and browsers, you can easily test your websites across different browser version and ensure similar and coherent UI/UX behavior across multiple devices.

You can also leverage the power of to insure cross-browser compatibility with BrowserStack as it incorporate with most of the exam mechanisation frameworks such as,,,, etc., saving both time and toll incurred.

You can also relieve time by using to run tryout on different browser-device combination simultaneously with BrowserStack. This allows devs and testers to build applications to retain and delight users through its seamless user experience.

Related Guides