18. DETECTION TECHNIQUES
Technique #1
function supports_geolocation() {
return 'geolocation' in navigator;
}
Technique #2
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
19. DETECTION TECHNIQUES
Technique #3
function supports_video() {
return !!document.createElement('video').canPlayType;
}
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"');
}
Technique #4
function supports_colorpicker() {
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";
}
20. DETECTION TECHNIQUES (Modernizr)
Techinque #1
if (Modernizr.geolocation) {
// let's find out where you are!
http://modernizr.com/ } else {
// no native geolocation support available :(
// maybe try Gears or another third-party solution
}
Techinque #2
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Techinque #3
if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.webm) {
// try WebM
} else if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}
}
Techinque #4
if (!Modernizr.inputtypes.color) {
// no native support for <input type="date"> :(
// maybe build one yourself with Dojo or jQueryUI
}
21. If browser does not support?
- Fallback JS
- Flash
- Do nothing
What about IE?
- IE >= v9 → OK
- IE < v9 → KO
· HTML5Shiv
22. New elements/attributes
- placeholder
- autofocus Validation
- email - required
- url - pattern
- number - min
- range - max
- datepicker - <form novalidate>
- date
– datetime
– datetime-local
– month
– week
– time
- search
- color
23. HTML5 APIs
Geolocation, Web Sockets, Web Workers, Web Storage, File
API, Device Orientation Events, Touch events, Full Screen
API, Web notifications,...
