Join Joe Marini for an in-depth discussion in this video Detecting client capabilities with script, part of Learning Mobile Web Design & Development.
And we'll discuss that a little later when we actually take a look at doing server-side detection, some best practices there. The nice thing about using script to determine a browser's capabilities is that you're detecting features; you're not detecting specific browsers. So instead of looking at the incoming user agent and saying, "Aha! This is browser X and I know the browser X can do this and that," you're actually testing for the feature support on the client side regardless of what the browser is before you try to use that feature.
The general method for doing this is you detect support for something, whether it's HTML5 Canvas or video or support for a geolocation or local storage or some CSS3 property, whatever it is, you detect the support, you see if the browser can actually do it, and then you enable code that relies on that feature if that feature is present. So let's take a look at an example of that. Here is a really simple example. In this example we're just detecting support for geolocation services.
Well, let's take a look at a more complex example. In this case, we're detecting support for the autofocus attribute on an input element, and this is part of the HTML5 input specification for forms. There is an attribute called Autofocus, and if it's present then the browser will place the focus on then input type, and we can detect to see if that's there. We can say, "Hey, is the autofocus attribute in the properties listed by the document.create element for an input?" So this code right here will actually make an input element and then write a test to see if that element contains an autofocus property, and again using the double-bang or double-not notation here to force it to be Boolean.
Modernizr also adds CSS classes to the HTML element of a document, so that you can do really cool things with your CSS code like if/else statements kind of style logic to display or hide elements, for example, based upon whether or not some features are present. So let's take a look at how to use Modernizr. Let's suppose we had a HTML file that looks like this. Step #1 would be to add the script tag that creates a link to the Modernizr script library. You can see I've done that right here.
The next thing I'm going to do is add the class="no-js" to my html tag, and then I'm going to copy and paste this script code right here that will test to see if certain features are present. I'm going to copy that in here and paste it. So the code that I've just copied does a couple of things. It uses the Modernizr object to see if a particular property is present, like Geolocation or Touch, and based upon the result of whether that evaluates are true or not, it's going to set the innerHTML of the span that I have down here in the document to indicate whether or not that thing is supported.
So let's do one more quick test on this in the Windows phone. Let me going to see that on the Windows Phone emulator geolocation is there, Touch Events are not there. However, SVG and canvas are supported. Now let's go back to the code and add the CSS3 detection, so back here in the code. Now we're going to see if CSS3 animations are supported, and the way we're going to do that is by using this code here. So let me copy it over and explain what it does. And we'll put that in </head>.
In this case, I'm declaring two CSS classes, one called animtest and one called noanimtest, and I'm setting the display to none. So if you look down here, you'll see that that corresponds to these two paragraphs, so both of these will start out as being hidden. When Modernizr runs, it replaces the--back up here-- it replaces the "no-js" with CSS styles that are named appropriately for different CSS abilities of the browser. So for example, if cssanimations are supported, it will create a class name on the HTML element called cssanimations; or if it's not there, it'll put a "no-" in front of it.
So among the whole bunch of other class names, there will be something that looks like this, or it'll look like this if the device does not support it. And you can use that CSS information to show or hide various features on your page. So what I'm doing here is declaring a class that looks for cssanimations if it's present, and then animtest inside that and displaying it as a block, so that if animations are present this paragraph will show up, and the same thing for no-cssanimations and the noanimtest.
So if they're not supported then this paragraph will show up. So let's go ahead and save, and let's copy it back in. Okay. And now let's refresh. And if we scroll down, you'll see here at the bottom that cssanimations are in fact supported. So the Android browser is supporting cssanimations. Let's do the same thing on Windows Phone, and you can see if we scroll down here to the bottom, cssanimations are not supported.
- Implementing well-defined web standards
- Working with Modernizr and Mobile Boilerplate
- Building a first mobile web page
- Understanding content adaptation strategies
- Designing forms for mobile
- Detecting client capabilities with script
- Using server-side detection with PHP and ASP.NET
- Working with mobile browser capabilities
- Viewing and testing the mobile site on device emulators