Monday, October 1, 2012

How-To Start An HTML5 Website That Older Browsers Understand

Starting an HTML5 Template That's Internet Explorer Friendly

Hello everyone! A couple of weeks ago I decided to sit down and create an HTML5 template for myself. I was working in Wordpress around the same time and noticed that they had implemented it into their CMS. So after reading up on a few fixes, I have put together a pretty nice little bit of code that I can use as a starting point every time I want to use HTML5 for a website.

HTML5 Support

I want to begin by briefly explaining the status on browser support for HTML5. I'm not going to give specifics on what browser supports what though. I will include a few links below so that you can investigate for yourself. Most of the newer browsers support the structural elements like <section>, <article> and <aside> etc. but if you've been developing sites for any significant amount of time you will know that we have to be safe when writing mark-up. Since most of the browsers being used by people today are older versions and people just don't care to upgrade. This is a problem if you want to use HTML5 right now. Older browser's don't know how to process these new HTML5 tags so we have to include some JavaScript in order to fix the problem. I did some searching online and found a really quick and easy script for Internet Explorer. Let's face it, the only older browsers anyone is worried about is IE. Here's the script to include in the head section of your page:

 <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
    <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

Now IE Understands the New HTML5 Tags

The best part about this script is that it resides on Google's server and there's no need to store it on your testing server or your host after you upload it to your server online. Google provides numerous other resources similar to this for Developers to use. You can look into the numerous resources Google provides at http://code.google.com/.

Check out this great read that covers HTML5 in great depth:


Check Out Browser Support for HTML5 at These Awesome Site's

http://caniuse.com/#cats=HTML5&statuses=rec,cr,wd
http://findmebyip.com/litmus/

Okay well now you have a backwards compatible script for IE, until next time.

Brandon Fowler
Web Designer & Developer
brandonfowler01@gmail.com 

No comments:

Post a Comment