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.