Html5 Tutorial : Getting Started With Html5
Most part of the specification is implemented in latest browsers
![[Note]](../images/note.png)
Note Among all latest browsers on the market, Internet Explorer is the one that support less HTML5 features. The next version, IE9, is supposed to support new tags, h.264 video, embedded audio, SVG and CSS3.
- Because of legacy browsers and also the fact that all latest browsers do not implement the same features and sometimes partially, you want to test features and provide alternatives
There are some helpful websites that will help you to see which features are supported in which browser:
- http://www.caniuse.com/ provides a table comparison of major browsers for different features
- http://www.html5test.com/ provides a HTML5 "score" with detail on what you can use or not
- HTML5 has a lot of potential for creating mobile web applications.
Below are some of the key features that will be critical to web applications:
- Offline Support
- Canvas and Video
- GeoLocation API
- Advanced Forms
Below are the pros and cons of using web apps rather than native apps:
Pros
Cons
- Available on all platforms / connected devices
- One single place to find the web app
Low development cost / high ROI:
- Simpler language (HTML / JavaScript)
- Shorter / cheaper debugging process
- Much larger potential reach
- Low maintenance cost
- Free from carrier / device manufacturer / approval control / revenue share
- Users always have the latest app
- Lower usability due to UI design limitations
- Lower performance due to added browser layer
- Harder to discover cool apps without store front / user reviews
- Limited HTML5-compliant browser support (depends on the smartphone)
Note Performance-critical apps will likely remain native.
- Most of the browsers on current mobiles are based on the webkit engine. However the version of this engine may differ from a mobile to another one
- Since we cannot say a browser supports HTML5 but supports HTML5 features, we need to check if a feature is present when writing our web app
To detect if a browser supports a feature, you can use, depending on the feature to check, the following techniques:
Check if a property exists on a global object. For instance to check if geolocation is supported:
return !!navigator.geolocation;
Dynamically create an element and then check if a property exists on this element. For instance, to check if your navigator supports canvas:
return !!document.createElement('canvas').getContext;Another technique here mostly use for video (when checking if a codec is supported) consists in creating an element, check if a specific method exists on this element, call this same method and finally check the returned value.
function isCodecSupported(codec){ if(!!document.createElement('video').canPlayType){ var v = document.createElement("video"); return v.canPlayType(codec); } // Just means that video would not be supported return false; }Finally, the last technique is to create an element, set a property to a specific value and then check if the property has conserved the affected value. A concrete example will be discussed later when discussing HTML5 forms and new input types.
function isInputTypeSupported(type){ var i = document.createElement("input"); i.setAttribute("type", type); return i.type !== "text"; }
It also exist an open source and MIT-licensed JavaScript library to simplify all this detection work: Modernizr (http://www.modernizr.com). For instance, detecting if
<input type="date">(for selecting date in HTML5 forms) exists with Modernizr:if(!Modernizr.inputtypes.date) { // <input type="date"> is not supported in this browser // You can provide an alternative using jQueryUI or other JavaScript UI frameworks for instance }
- When checking if HTML5 features exist on a browser, you can provide alternatives if needed.
- Some features just gracefully degrade, some other might need extra work.
When talking about graceful degradation, we talk about features that, if not supported in a browser, will not break your web application. For instance:
-
New input types that are not supported automatically fallback to
<input type="text"> -
When the
<audio>or<video>element are not supported, the inner content is evaluated and this is where you can provide a fallback to flash, for instance, using<object>
-
New input types that are not supported automatically fallback to
- Features that are not supported yet on browsers can be emulated so your applications are backward compatible
You can use polyfills to emulate features that are not supported
- Polyfills (also called shims) are pieces of code or plugins that emulate a non existing feature
A non exhaustive list of these polyfills:
- Google Gears can emulate many features such as SQL Storage, Geolocation, Offline applications and Workers.
- Usage of JavaScript libraries
- Third party plugins such as Flash, Silverlight, etc… (mostly for audio/video content)
- A list of shims and polyfills has been created by the creators of Modernizr: http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- Now you are ready to dive in HTML5, let us talk about what compose an HTML5 web application and what are the tools available to code and debug?
- First thing first, an HTML5 web application is composed of the following: HTML, CSS, JavaScript, some images and sometimes manifest files (for offline caching purpose. This will be discussed in the Offline Application chapter).
Any classic text editor will do the job when developing web applications. However using IDE or advanced text editor can save you a lot of time (code completion, snippets, etc…).
Note As far as the specification is becoming more and more stable, IDE support will evolve. Nonetheless, some support already exist: WebStorm 2.0 from JetBrains, Netbeans IDE 6.9, Adobe Dreamweaver CS5.5, Komodo Edit 6, Aptana Studio 3.0.0 Beta (also exist as an Eclipse plug-in), etc…
- Along with these authoring tools, you can take advantage of browsers development tools such as Chrome developer console, Safari web inspector, Opera dragonfly and Firebug plugin for Firefox for live coding and debugging purposes.
