Every time a web
page is rendered in a browser, a DOM is created. This document object model
represents all the HTML elements of the page. Every element is represented in
the DOM by a different object. All DOM objects share a set of common properties
but some objects have more than others. In browsers that support HTML5 certain
objects will have unique properties. A quick look at the DOM will tell you
which features are supported. There are 4 basic techniques for detecting
individual features which will be discussed.
- Check if a certain property exists on a global object (i.e. window).We test for GeoLocation this way. GeoLocation detects where you are and optionally allows you to share that information with people you trust. If your browser supports the GeoLocation API there will be a geolocation property on the global navigator object.
- Create an element then check if a certain method exists on that element.An example of this would be testing for Canvas support. Canvas is a resolution dependant bitmap canvas that can be used for rendering graphs, game graphics, or other visual images. It is represented by a triangle on your page that you can interact with using Javascript to draw anything you want. If your browser supports the Canvas API the DOM object it creates will have a getContext() method. Although the browser may support the canvas API it may not support canvas text which was added late in the game.
- Create an element, check if a certain method exists on the element, call the method and check the value it returns.Video is detected using this method. There are many codices available for video but there are two major ones that we can detect and use in HTML5 – a license based one that costs money for safari and works on the iPhone and a free one that works in open source browsers like chromium and Firefox. If your browser supports HTML5 video, the DOM object it creates to represent the video element will have a canPlayType() method, which tells you whether the browser supports a particular video format. We can currently test for the patent format, the open source format and a new format called WebM which will be included in the next version of major browsers and is open source.
- Create an element, set a property to a certain value, and then check if the property has retained its value.Checking inputTypes supported is tested this way. In HTML we can make a <form>, add a few <input type = “text”> elements and maybe an <input type = “password”> and finish off with an <input type = “submit”> button. In HTML5 however there are 13 new input types as well as the old favourites that can be used in forms.
About
Modernizr
Moderniser is an
open source, MIT-licensed Javascript library that detects support for many
HTML5 features and bridges the gap between the new HTML5 features and older
browsers who may not support them. Modernizr runs automatically, there is no
init() function to call. When it runs it creates a global Modernizr object
which contains a set of Boolean properties for each feature detected.
To use Modernizr stick this script at the top of your page:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>My Website</title>
<script
src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Technique
1 – (geolocation)
This can be
checked by dev’s using the following code
function supports_geolocation(){
return ‘geolocation’ in navigator;
Or by using
Modernizr as follows
if(Modernizr.geolocation){
//lets find out where you are
}else
//no native geolocation support available
Technique
2 – (Canvas and canvas text)
The code to check
for canvas is as follows
function supports_canvas(){
return !!document.createElement(‘canvas’).getContext;
This will create
a dummy canvas not attached to your page, test for the presence of getContext()
and will finally use the double-negative trick to force a result in
Boolean(True or false).
To do this using
Modernizr:
if (Modernizr.canvas) {
// let's draw !
} else{
// no native canvas support
}
To check for
canvas text support use the following code
function supports_canvas_text(){
if(!support_canvas()){return false}
var dummy_canvas=document.createElement(‘canvas’);
var content = dummy_canvas.getContext(‘2d);
return typeof content.fillText == ‘function’;
This code first
checks for canvas support, if canvas API is not support then canvas text will
not be either. A dummy canvas is then created and get its drawing context.
Finally check that the drawing context has a fillText() function. If it does
then canvas text is supported.
Using modernizr
to check for canvas text support
if(Modernizr.canvastext){
//draw some text
else{
//no native support
}
//draw some text
else{
//no native support
}
Technique
3 – (video)
All 3 video codec
can be detected in the same way but with different strings fed to the
canPlayType() method which is codec independent.
The following
code checks for the safari version that can be used on iPhone.
function supports_h264_baseline_video(){
if(!supports_video()){return false;}
var v = document.createElement(“video”);
return v.canPlayType(‘video/mp4;codecs=”avc1.42E01E,mp4a.40.2”’);
}
if(!supports_video()){return false;}
var v = document.createElement(“video”);
return v.canPlayType(‘video/mp4;codecs=”avc1.42E01E,mp4a.40.2”’);
}
First the
function checks for video support, creates a dummy video element that isn’t
attached to the page and calls the canPlayType() method. Basically what the
above code asks the browser is whether it can play H.264 baseline video and AAC
LC Audio in an MPEG-4 container. The function will either return ‘probably’,
‘maybe’ or a null string. Probably means the browser is fairly confident that
it can play the format, maybe means the browser thinks it might be able to play
the format and the null string means the browser is certain it cannot play the
format.
To check for the
open source format simply replace the string fed to canPlayType() with
‘video/ogg;
codecs=”theora, vorbis”’.
To check for the
new WebM format alter the string to ‘video/webm; codecs=”vp8, vorbis”’
Use Modernizr to
check for video formats for you
if(Modernizr.video){
//what kind can we play?
if(Modernizr.video.webm){
//try WebM
}
else if (Modernizer.video.ogg){
//try ogg theora + vorbis is an ogg container
else if(Modernizr.video.h264){
//try H264 video + AAC Audio in an MP4 container
}}
//what kind can we play?
if(Modernizr.video.webm){
//try WebM
}
else if (Modernizer.video.ogg){
//try ogg theora + vorbis is an ogg container
else if(Modernizr.video.h264){
//try H264 video + AAC Audio in an MP4 container
}}
Technique
4 – (Input Types)
First, create a
dummy <input> element in memory. The default input type for all
<input> elements is "text".
var i =
document.createElement("input");
Next, set the
type attribute on the dummy <input> element to the input type to be
detected
i.setAttribute("type", "color");
If the browser
supports that particular input type, the type property will retain the value
set. If the browser doesn’t support that particular input type, it will ignore
the value set and the type property will still be "text".
return
i.type !== "text";
Other
HTML5 features and how to detect them
LocalStorage
Use technique 1
and check for a localStorage property on the global window object, it will be
undefined if unsupported. This needs to be wrapped in a try… catch due to a bug
in older versions of firefox which will raise an exception if cookies are
disabled. Note also that Javascript is case sensitive , the Modernizr attribute
is called localstorage but the DOM property is called window.localStorage.
NOTE: WEB Storage
is now a specification in its own right but it originally came under the HTML5
specification.
Web Workers
Use technique 1
and check the Worker property on the global window object, it will be undefined
if unsupported. Modernizr attribute is called webworker, DOM attribute is
called window.Worker
Offline Web
Applications – use detection technique 1 to check for an applicationCache
property on the global window object, it will be undefined if unsupported.
Modernizr attribute is applicationcache but DOM object is
window.applicationCache.
Placeholder
Text
Use detection
technique 2. If your browser supports placeholder text in input fields the DOM
object it creates will have a placeholder property, if it is not supported the
property will not be there.
Form
AutoFocus
Check for this
using detection technique 2. If supported the input element will have an
autofocus property otherwise it will not be present.
Microdata
Use detection
technique 2 to check for a getItems() function on the global document object.
This cannot be checked for using Modernizr
History – use
detection technique 1 to check for a pushState() function on the global history
object
References:
Freeman, E,
Robson, E (2011). Head first HTML5 Programming. Digital: O'Reilly Media.
Pilgrim, M.
(2011). Dive Into HTML5. Available:
http://diveintohtml5.info/table-of-contents.html. Last accessed 4th October
2012.
No comments:
Post a Comment