| HTML5 form attribute | Firefox 6+ | Safari 5+ | Chrome 6+ | IE 10+ |
| <input type=”text” name=”name” required >
|
Supported | Not Supported | Supported | Supported |
| <input type=”date”> | Not Supported we have to use jquery calender | Not Supported | Supported | Not Supported |
| Autofocus Fields (i.e )
<input name=”q” autofocus> |
Supported | Not Supported in
safari 5- mobile |
Supported only above chrome 9+ | Not Supported |
| <input type=”text” name=”HasAPattern“ pattern=”[A-Za-z]{3}” title=”Enter valid name characters”> |
Supported | Not Supported | Supported | Supported |
Some HTML5 Tips:
1. Declare the DocType :- <!DOCTYPE html>
2. Use the HTML5 Block Level Elements:
Instead of using divs for everything, start using the new HTML 5 elements like <header>, <footer>, <article> and others. They work the same way but improve readability with less writing:
<body> <header> ... </header> <article> … <nav> ……... </nav> <section> ... </section> ... </article> <footer> ... </footer> </body>
Browser support is good for most of the new HTML5 tags, especially the block level ones. Include the code below in your CSS file to enable support in your browser for these:
article, aside, figcaption, figure, footer, header, nav, section
{
display: block;
}
For Internet Explorer 9 or less, it is also required to add in your html page:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->