HTML5 handling browsers

G’day,

This post is followup from my previous post In previous post we explored code example for many new elements including progress, meter, mark, time, details etc if you haven’t already then may be you can read it if you wish.

Today we will talk about few techniques to make sure that you handle your browsers right for any given HTML5 feature.

It is important. Why? because not every browser supports every HTML5 feature. e.g. is not supported in older Internet explorer browsers such as IE8 and older but people are still using IE6 for instance but most of the websites don’t really care for that. But its important still that you keep supporting older browsers such as IE8 that is still used by millions and IE8 is not very good at supporting HTML5.

Ok so lets check what I have in store for you. We will be looking at

  • Testing for HTML5 features using traditional Javascript
  • Adding support to new elements in typical Javascript way
  • CSS reset
  • HTML5 Boilerplate
  • Modernizr
  • Some handy sites

Testing for HTML5 features using traditional Javascript

Ok! HTML5 is great and so are the features that comes with it. Features such as Geo Location, Desktop notifications, Web form elements, Adding audio/video to your page etc etc. but all of them are not available in all browsers. So how do we go and test for these. Lets check it out now

Say for example I want to show desktop notification to a user and it required a fallback if this given feature is not supported. Here is how we can check that

In the above example our if condition check if window.webkitNotification is not undefined, if it is then handle you fallback in else

Lets check another examples for Geo Location API availability

Lets check if canvas is supported by a browser

 

Its actually that simple.

Above is how you do it with making sure that a feature exist before you go ahead and do something. We will touch base on Modernizr in a bit but first lets check how to add missing element support to IE8 say for instance.

Adding support to new HTML elements in Older browsers, typical Javascript way

Let me start by saying that if you try to open our previous post DEMO on IE7/8 it will not work (without html5shiv.js) because older IE don’t recognize tags like header, address, section, nav etc. And because they all are container elements thus they will be processed more like a (correct me if I am wrong here).

What to do now?

There is simple solution to this problem. We just have to make sure that IE understand these elements. right? so here is how we can make sure that IE does understand these elements.

But that is just pain in the b*** isn’t it. So let me again re-introduce html5shiv.js This script is very helpful in doing what we just did above. So let me show you again how to include this script on your page

Alright! now please note that all your CSS styling should be followed after your included shiv script.

Now that we know that IE understand our new elements we just want to make sure that it act good with our CSS styling as well.

Because most of the new elements are type container thus their default style as per w3 specifications should be display: block thus you should style them as shown below

CSS reset

But hang on there is something called HTML5 reset stylesheet that you can get from http://html5doctor.com/html-5-reset-stylesheet which is a modified version of Eric Meyer’s original reset, and is modified by Richard Clark. You can include it on your page after shiv

HTML5 Boilerplate

If you don’t really want to do any hard work and understand basic html5 jargon then you can take html5boilerplate.com template for a spin. Visit https://github.com/h5bp/html5-boilerplate to get hold of their latest and most recent template and have a go at their readme.md file and you will get a strong idea what we have already covered so far. They use modernizr to  detect html5 features thus lets move on and check out some basic usage of wonderful script called modernizr

Modernizr

Modernizr as the name states helps keep up your site modern. Is that a good way to put up 🙂 I hope so.

It makes it easier for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

You can go here to get a custom build http://modernizr.com/download/ select which feature you want to detect and click generate button once done.

Include modernizr.js in your webpage as shown below

Modernizr delivers yes/no answers to the questions about feature support you ask.

Load your page in a browser your will notice that the element now have CSS classes, if a feature is not supported e.g. canvas is not supported than a class no-canvas will be added. here is an example from IE8

So you get the idea right?

now you can add custom styles to your child elements. Say for example we have this markup

Rather to show “Your browser does not support canvas” we can hide it altogether as shown below

Other beauty of Modernizer is that you can use simple properties in your Javascript to enable/disable or show/hide part of your page section depending on a feature support as shown below

Check out their documentation for more advanced use of this lovely script.

Some handy resources

Here is a list of resources that I would like you to go through

  1. http://www.w3.org/TR/html-markup/
  2. modernizr.com
  3. http://html5rocks.com/
  4. http://html5doctor.com/
  5. http://caniuse.com/
  6. http://html5readiness.com/
  7. http://fmbip.com/
  8. http://html5boilerplate.com/
  9. http://html5test.com/
  10. http://validator.w3.org/#validate_by_uri+with_options (validate your HTML5 pages select HTML5 from drop down)

 

Because I am writing these post in on flow and experimenting on the other hand it is possible that I may leave some errors. So please be good and report any if possible.

I hope that this helps.

In our next html5 post we will touch base on html5 form elements.

Cheers,

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply