HMTL5 has come with a lot of unique good features that its earlier versions missed out.But the trouble with developing a web page with ‘latest available technology’ is the lack of browser’s support for that technology.Older browsers may have some difficulties in interpreting pages built with such technologies.
HTML5 is not a single thing.So, its unable to detect support of browser for it, all at single instance.But you can detect the support for individual features like canvas,geolocation,video,audio etc.
Category: Features
Html5 canvas is a new HTML element which can be used to draw graphics using scripting mainly with javascript.
Canvas can be used to draw basic shapes to grids to gradients, Html5 canvas is mainly an alternative to using images for basic structural reasons, for example gradients as backgrounds.
Because html5 canvas is created with the assistance of a script language such as javascript, this enables you to allow your website users to interact with your website. You should be able to make a website application which allows users to draw on your website and then save their work somewhere.
Html5 canvas opens a lot of doors to website developers and the future of html5 canvas looks very impressive.
The Web Storage idea is to simplify storing of information for the user. I always hated using cookies because of all the domain issues. It was also a mess to check for them and then fall back to other things. Most of all people are paranoid about them and I know a lot of corporate computer users who have all cookies disabled.
Web Storage on the other hand is a simple object in the browser. You can set localStorage.foo to ‘bar’ and when you read out localStorage.foo next time you load the document it will be ‘bar’. That’s how easy it is. You can store 5MB of textual data which could be integers or strings. With JSON.stringify() you can easily store more complex information.
Josh Duck has an amazingly good Periodic table of elements for html5 on his blog. Fabulous looking and super functionality.
The HTML 5 audio and video elements are a fantastic way of standardizing audio and video over the internet. This has been a long time coming. With so many operating systems being used to browse the internet it can be hard to decide what format to use. If we encode a video as a Windows Media File (WMV) it will not play on a Mac unless that user downloads a certain player or plug-in. The same can be said for encoding a video as a QuickTime file. It will play on a Mac but not on a Windows operating system unless a player is downloaded. And now we have so many variations of Linux operating systems being used, choosing an audio or video format that will play on all visitors’ computers is a next to impossible task.
The audio and video elements in HTML 5 will make choosing multimedia formats a lot easier. We will probably use the OGG format for audio as it is completely open source and patent-free. This format is very similar to MP3, AAC, and VQF. We will probably use the H.264 format for video. This format has already been adopted by Adobe and so can be used in Flash based players. An example of this is YouTube.com. They can now offer HD video online because they have used the H.264 standard. What is interesting about this is that visitors using Windows, Mac, Unix and Linux can view YouTube.com videos without having to download a new player. All that is needed is the Flash plug-in, which is on most internet browsing computers. With the HTML 5 video tag we will no longer have to depend on Adobe Flash Media player to play H.264 video as a cross platform solution.
The HTML5 Canvas specification is a JavaScript API for coding drawings. The canvas API allows the definition of a canvas context object as the canvas element on your HTML page inside which we can draw.
We can draw in both 2D and 3D (WebGL) context. 2D is available in all the modern Web browsers, IE9, and via excanvas.js in current versions of IE, and will be more thoroughly introduced below. 3D is still nascent, with only experimental implementations.
2D context provides a simple yet powerful API for performing quick drawing operation, on a 2D bitmap surface. There is no file format, and you can only draw using script. You do not have any DOM nodes for the shapes you draw — you’re drawing pixels, not vectors. OK, not true. You are drawing vectors, but once drawn, only the pixels are remembered.
Canvas
Canvas in simple terms can be described as the drawable region in HTML code with height and width attributes. Dynamically generated graphics is the new function HTML 5 offers. It can be used to draw graphics, make photo compositions, or do simple (or complicated) animations. All of this again can be done without having to rely on an external plug-in.
Video Support
Much like the audio element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.
Development Is Nothing has a table stating the compatibility of some features with the 5 main browsers: Chrome, Safari, Firefox, Opera and Internet Explorer. Check out the compatibility of contentEditable, Stylable Elements,
The latest versions of all browsers support HTML5. HTML 5 video provides HTTP video streaming without buffering – there is no download needed – progressive or otherwise. This also means that you can jump around/click on any part of the video and it will immediately play from that point. In addition, as there is no download – you can distribute High Definition video files, which are quite large (watch your bandwidth quotas though!)