Html5 | Browser compatibility of some new attributes

Author - Webner

 

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]-->

 

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *