Geekly Articles each Day
📜 ⬆️ ⬇️

HTML 5 in Internet Explorer

image

In short: how to get new tags from HTML 5 to work in Internet Explorer.

Any web developer looking at HTML 5 is crying with happiness, which finally came to our house. For most functions (such as WebGL, multithreading and web sockets), you will have to wait for support from browsers (and in the most correct these possibilities already exist), but we can use new convenient tags now.
')
However, Internet Explorer (even the latest, 8th version) has managed to stumble over here - it simply does not notice new tags outside of HTML 4 - you cannot hang styles on them.

There are even two problems in IE - you need to separately include support for HTML 5 tags in a regular document, and separately in content that is added dynamically (for example, via AJAX).

Benefits


Why use new tags:

New HTML 5 tags


Which tags with a new meaning can be used without expecting support from the browser:

HTML 5 adds many more properties, rel values, and <input> types that can be used today, but this is better read on the W3C website or in other articles.

IE as a problem


It is difficult to say whether this is a problem or a feature of Internet Explorer, but he simply does not notice tags that he does not know. Of course, we can say that they violate the HTML 4 standard, which is supported in IE, but nevertheless, there are problems - even in the most recent version of IE, the new tags from HTML 5 just don’t hang CSS styles. This will be fixed in IE 9, but it has not even released a beta version yet.

And as always under IE you have to write using hacks :). If you create an element in the JavaScript document.createElement('article') , then IE starts to see the new tag.

However, a little later, we encounter another problem. This hack does not work with the content that is added via innerHTML that jQuery likes to use. But this problem is managed with the help of JS-manipulations.

Decision


First, let's deal with normal browsers. Of course, the new tags will not have any special built-in styles (such as for <strong> ). We don’t really need them, but it doesn’t hurt to make the necessary elements block in CSS:
aside, nav, footer, header, section { display: block }

The code for including HTML 5 tags in IE has already been written and laid out, so that without reinventing the wheel, we insert it into <head> (before any new tags):
 <! - [if IE]>
 <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script>
 <! [endif] ->

Most HTML 5 sites use a script at this URL, so it is likely that it will already be in the browser's cache.

The innerHTML solution is already in the form of a compact JS script . Download it, connect to your site, and wrap all the HTML you add with the innerShiv(html5) function innerShiv(html5) .

Example for jQuery:
$('#example').append( innerShiv ("<section><header>jQuery</header></section>"))

An example on pure JS:
var s = document.createElement('section');
s.appendChild( innerShiv ("<header><Plain JS</header>"));
document.getElementById('example').appendChild(s);

To write $(html5).appendTo('#example') , you need to innerShiv second argument to the innerShiv so that it returns the result in the format you need for jQuery:
$(innerShiv(html5, false)).appendTo('#example')

But I just made myself a function of $5 , at the same time removing the extra code for normal browsers:
  if (jQuery.browser.msie) {
     window. $ 5 = function (html5) {
         return jQuery (innerShiv (html5, false))
     }
 } else {
     window. $ 5 = function (html5) {
         return jQuery (html5)
     }
 }

And I write:
$5(html5).appendTo('#example')

Long live the new web! :)

Source: https://habr.com/ru/post/90384/

More articles:


All Articles