Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How HTML5 supports different versions of Internet Explorer with javascript

This article will explain the process for an HTML5 to be compatible on all older versions of Internet Explorer making use of the JavaScript.

We all are aware of the popularity of HTML5 these days in the web-world. HTML5 and CSS3 are hot topics for a software developer which is getting huge attention from all around. All the browser companies are working day and night to make their browser in line with HTML5. The latest browser of Internet Explorer i.e. IE9 also supports a lot of HTML5/CSS3 standards nowadays.

However the biggest challenge in front of every software developer is to make HTML5 work on older versions of IE. The most important difference between HTML5 and HTML4 is the usage of custom tags in HTML5. We have Tags like <header>, <footer>, <section>, <nav> and so many others which work in HTML5.

Let us look at the simple syntax for a HTML5 page:

Listing1: Syntax of a HTML5 page

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 on IE</title>
     <style>
          red { color: red; }
    </style>
</head>
<body>
    <section>
        <red> This should be red in color</red>
    </section>
</body>
</html>

If you notice the above code, a red custom tag is incorporated; a style has been added to this tag. If you are viewing this page on a browser that supports HTML5, the text that appears in the “Red” tag needs to be displayed in a red colour. If we try to open that HTML5 page on a Safari browser, it would be displayed as below:

Illustrates the Output on Safari Browser

Figure1: Illustrates the Output on Safari Browser

The below lists the reflection of HTML5 in IE8 wherein you won’t be able to see the style being displayed and you would see the text being simply displayed as below:

Illustrates the Output on IE8 Browser

Figure2: Illustrates the Output on IE8 Browser

How to Resolve this Issue?

The reason why you are not able to see the text in IE as displayed in Safari is that it is not able to decode the custom tag 'red'. There is a need to make IE follow or understand the tag for which we can use javascript as listed below:

Listing2: Adding the JavaScript

document.createElement('red');

Here we have generated a new element named 'red'. We will be able to use the 'red' tag now in our HTML code. Code now modifies to as below:

Listing3: Representing the Modified Code-Adding JavaScript line

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 on IE</title>
  <style>
    red { color: red; }
  </style>
  <script>
     document.createElement('red');
  </script>
</head>
<body>
    <section>
        <red>This should be red in color</red>
    </section>
</body>
</html>

The below snapshot now reflects the HTML5 page on IE8

Illustrates the Output on IE8 after using JavaScript

Figure3: Illustrates the Output on IE8 after using JavaScript

The solution mentions above looks good in the case where we have few numbers of custom tags. You need to just incorporate the JavaScript line as mentioned above for each of the custom tag. This makes you to resolve the issue. However the actual thing lies in the custom tags of HTML5 that makes the above solution meaningless since there we just use few of the custom tags and not all. Let’s try to explore the solution for the same.

We have good number of designers that are implementing the HTML5 however we still have that old issue of cross-browser compatibility which is hurting the developers’ very badly. With the mobile web, the use of HTML5 option does not exist now however the good thing is that we have few of the mobile devices that make use of legacy version of IE.

Other than Java, Ajax and JQuery plug-ins, you won’t be able to make use of some of the more exciting features of HTML5 in old versions of Internet Explorer. One needs to be aware that before going with the “canvas” tags. There is no change pertaining to the support for CSS3 in legacy versions of IE.

There is one wonderful thing about HTML5 that includes the new and above all the practical structure tags. The mark-up provides with a list of new tags that would help in structuring the web pages with a code that is easy to interpret.

The tags include:

  • <header></header>
  • <nav></nav>
  • <section></section>
  • <article></article>
  • <aside></aside>
  • <footer></footer>

The tags listed above makes easy to structure and differentiate the different elements of a web page. As we know that the above mentioned tags do not exist to old versions of IE however the page looks fabulous in Firefox, Chrome and Safari and this will appear worst in Internet Explorer 6, 7 and 8.

How JavaScript helps in older IE Versions to be compatible with HTML5?

One can easily initiate the web pages in HTML5 and get legacy versions of IE. This can be done with just one JavaScript code in a conditional comment that will be contained within the head tags of your page. Though this will create a dependence on JavaScript and users that have JavaScript disabled in their browsers however let’s go ahead and see the outcome.

The below that is listed code makes use of the JavaScript to create and define the HTML5 elements for IE versions such as IE6, IE7 and IE8. Once the code is enclosed in a conditional statement, you will see the other compatible browsers simply ignoring the code and move on through the remaining mark-up.

The conditional statement:

You might be aware about the conditional statements I case you are working in web design and development. The below code or comment will resolve all the issues related to older versions of IE. One needs to add the below comments within the head tags.

Listing4: Adding the conditional statement

<!--[if lt IE 9]>

<![endif]-->

Now the Javascript

You need to add the below script inside the conditional comment tags:

Listing5: Adding The JavaScript code in conditional comment

<!--[if lt IE 9]>

<script type="text/javascript">

  document.createElement("header");

  document.createElement("nav");

  document.createElement("section");

  document.createElement("article");

  document.createElement("aside");

  document.createElement("footer");

<![endif]-->

Conclusion

We learnt here that in order for HTML5 to be compatible with all versions of Internet Explorer i.e IE6, IE7, IE8 and IE9, you need to write your web pages in the new standards with a Javascript.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login