Categories
JavaScript Best Practices

JavaScript Best Practices for Writing More Robust Code — Checking for Feature Availability

Spread the love

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at various ways to check if a library is available in the browser you target before using it.

Modernizr

The Modernizr library lets us detect if a feature is available before using it. We can add it to our app with a script tag as follows:

<script
      type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
    ></script>

Then we can add code like the following to test if a library is available as follows:

window.Modernizr.addTest("hasJquery", "jQuery" in window);

In the code above, we check if jQuery is available by calling Modernizr’s addTest method to check if the 'jQuery' property is in the global window object to see if jQuery has been added.

Then we can check with the Modernizr.on method as follows:

window.Modernizr.on("hasjquery", result => {
  console.log(result);
});

result will be true if jQuery exists and false otherwise. Note that most methods are only available in a custom build, which can be created by going to https://modernizr.com/download?setclasses.

Then every time the page loads, the feature check will be run to check if the hasjquery feature returns true .

We can also add checks for multiple features as follows:

const detects = {
  'hasjquery': 'jQuery' in window,
  foo() {
    return true
  }
}
Modernizr.addTest(detects);

In the code above, we have the hasjquery check and the foo check. Note that the check can be a function in addition to a boolean.

If it’s a function, then it should return a boolean.

Modernizr also has the atRule method to check is a CSS @ rule is available in the current browser.

For instance, we can use it as follows:

const keyframes = Modernizr.atRule('@keyframes');

If the @keyframes is available in the current browser, the keyframes would have the value '@keyframes' . Otherwise, it would have the string value 'false' .

The Modernizr _domPrefixes method gets all the CSS prefixes that are supported by a browser.

For instance, the Modernizr._domPrefixes property may return something like the following:

["moz", "o", "ms", "webkit"]

This means that we can set properties with these prefixes like for flexbox with -moz-flex , -ms-flexbox , and -webkit-box for setting the flexbox property within a browser.

ms is for Internet Explorer, moz is for Firefox, o is for Opera, and webkit for Webkit based browsers like Safari.

We can use Modernizr’s hasEvent method to check if an event is available in a browser. It takes 2 arguments. The first is the string for an event name, and the second is the object which the event listener can be attached to.

The 2nd argument is optional.

For instance, we can write the following code to use the hasEvent method:

console.log(Modernizr.hasEvent('devicelight', window))
console.log(Modernizr.hasEvent('blur', window))

In the code above, we check if the devicelight event handler can be attached to window and listened to in the browser.

Also, we checked if the blur event can be listened to in the browser on the window object.

They both should return boolean. For desktop browsers, the first one should return false , but the second one should return true since it’s available for all browsers.

The Modernizr mq method lets us programmatically check if the current browser window state matches the media query.

It takes one argument, which is the string with the CSS for the media query that we want to check.

For instance, we can do that as follows:

const query = Modernizr.mq('(min-width: 300px)');

In the code above, we check if the screen is 300px or wider. If it is, then it returns true . Otherwise, it returns false .

Modernizr’s prefixed method takes a string CSS value in the DOM style in camelCase and returns the version of that property that the browser actually supports.

This helps us determine what kind of prefix we need in our CSS to properly style our app in the current browser.

For instance, we can use it as follows:

const boxSizing = Modernizr.prefixed('boxSizing');

In the code above, we check if any prefix is needed for the box-sizing CSS property. If we do, then it’ll return the prefix with the property for the string. Otherwise, it’ll just return the string we passed in.

Conclusion

We can use Modernizr to detect various features that are available in the current browser. They include screen sizes, objects that are loaded in the browser, and CSS prefixes.

At rules can also be checked if they’re available.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *