Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
In Part 1 of the Coding for different browsers series, we looked at the various techniques you could incorporate in your workflow to make your site cross browser compatible. Today, we go a step further and discuss the latest technologies you can use to help you improve the user experience of your site. We are going to discuss Modernizr and a range of other tools, so stay tuned because it’s going to get exciting.
Browser sniffing, don’t do that
In the olden days of web development, people used to detect the browser type and version using a silly technique called browser sniffing. This worked by matching UA (User Agent) strings, and it wasn’t future proof at all, as newer versions came along frequently. Thankfully, browser sniffing is a thing of the past, and for those who still use it, you better keep reading.
Feature Detection, that’s right
Feature detection is the standard today and rightly so. Instead of checking for a browser and its version, and then serving special code for that purpose, feature detection works by simply figuring out what features the browser supports. This way, you aren’t going to ship an extra bunch of code that really doesn’t need to be there. Here’s an example:
if(!!document.createElement('video').canPlayType === true) { // run some code that relies on HTML5 video } else { // do something else }
If your browser supports HTML5 video, you can run the code that requires that particular feature, and if not, you can use a fall back option like Flash.
Modernizr
If you haven’t heard of Modernizr by now, you probably will soon. Modernizr is a JavaScript based feature detection library for CSS3 and HTML5. It helps you detect the features that a browser supports and then allows you to deliver the respective code, depending on the availability of the feature. This way, you have the ability to be future proof, as more browsers are going to adopt the latest W3C specifications. Here’s an example:
if(Modernizr.csstransforms3d) { // run killer feature that relies on 3D transforms being available } else { // run an alternative chunk of code that provides a graceful fallback }
So if a browser does not support the feature, then you can user Modernizr to deliver the code that could imitate the feature it lacks. A word of caution though is that Modernizr doesn’t add missing functionality to browsers. However, there is one script called the HTML5 Shiv that does add some basic functionality for HTML5 elements in Internet Explorer.
How does it work?
To use Modernizr, you first need to grab a copy from modernizr.com. Once there, click the production button, in pink. Now, you can configure the features that you want the Modernizr to detect for you – best to toggle the ones you really need.
Step 1: Once downloaded, unpack the files into your /javascript folder and add the following script code to your HTML page.
<script src=”modernizr.js” type=”text/javascript”></script>
Step 2: Now, add the no-js class to your <html> tag like this: <html no-js>. This is essential and you cannot skip this step. Did you figure out why we did that?
Well, what if the browser has Java Script disabled. If that’s the case, we can use the no-js class as a fallback option and deliver the required alternate CSS code. If Java Script were enabled, Modernizr would simply replace the no-js class with js, all automatically.
Example
If you are using a border-radius CSS property on one of your shiny new web sites, but aren’t sure of how you are going to handle the browsers that don’t support it yet, then you have a solution – Modernizr.
div.box { /* CSS Code for Box */ }
.borderradius div.box { /* Shiny new border radius styles */ }
.no-borderradius div.box { /* Fallback code */ }
As you can see in the code above, we have included two different CSS classes, where one of them is the fallback code, in case the browser doesn’t support border-radius. Now, Modernizr applies this automatically and you won’t have to do a thing. This is definitely elegant hacking.
Tools
Haven’t had enough? Okay, well, here are a few tools you can use to streamline your web development journey:
Till then, adios.
