Friday, June 17, 2022

Hack 3. Make Your New HTML5 Tags Render Properly in Older Browsers

✔ Urdu Point on June 17, 2022 0 Comment

Don’t wait for full HTML5 adoption across the Web. Make HTML5 structural tags render properly in all browsers.

So, now you have this whole new world of HTML5 elements that will let you be both expressive and semantic with your markup. You’ve been freed from the shackles of divs and can show your face at parties again!

Semantic markup is the use of markup in a meaningful way. Separation of structure and presentation leads us to define our presentation (look and feel) with CSS, and our content with meaningful or semantic markup.

You’re feeling pretty good about yourself until you remember that some of your visitors are not using HTML5 browsers, and being the web standards elitist that you are, your page has to be backward-compatible. Don’t throw those HTML5 tags out the window just yet. This hack will teach you how to write your code once, and use it on all the browsers out there.

Any browser made in the past 10 years will see your HTML5 tags in one of 3 ways:

  1. See the HTML5 tag and render it appropriately (congratulations, you support HTML5!).

  2. See the HTML5 tag, not recognize it, and consider it an unstyled (which defaults to inline) DOM (Document Object Model) element.

  3. See the HTML5 tag, not recognize it, and ignore it completely, building the DOM without it.

Option 1 is a no-brainer: you’re in an HTML5 browser. Option 2 is likewise pretty easy to address, as you simply have to set your default display parameters in your CSS. Keep in mind that with option 2, you have no functional DOM APIs for these new tags, so this is not true support for the tags. In other words, using this method to create a meter element does not create a functional meter. For our use case of semantic markup elements, however, this should not be an issue.

So, focusing on option 3, you’re using IE 6, 7, or 8 and you’re loading a page that contains new HTML5 semantic tags. The code will look something like this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>My New Page with Nav</title>
</head>
<body>
<div>
    <nav class="nav">
    <p>this is nav text</p>
    </nav>
</div>
</body>
</html>

There are basically two different ways to handle this lack of support.

The Fallback div

In the preceding code sample, the nav element is not recognized and is passed over at render time. Since the DOM does not recognize these elements, option 1 uses a fallback element that the browser does recognize, and wraps each unrecognized element in it. The following code should make this easier to understand:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>My New Page with Nav</title>
</head>
<body>
<div>
    <nav class="nav">
        <div class="nav-div">
            <p>this is nav text</p>
        </div>
    </nav>
</div>
</body>
</html>

Voilà! We can now style the element with the nav-div class instead of the element with the nav class, and our DOM will be complete in all common browsers. Our page will style correctly, and we will have our new HTML5 tags in place for screen readers and search engines that will benefit from the semantic tags.

This method will work, but there are some downsides to this solution. For starters, having duplicate tags negates the benefit in many ways, as we are still using divs for every structural element of the page. The biggest problem with this solution, though, is how it corrupts the DOM tree. We no longer have a consistent parent–child relationship from browser to browser. The browsers that do recognize the HTML5 element will have an extra “parent” to the contents of the element, so the trees will differ from one browser to the next. You may think you don’t need to care about this, but as soon as you start accessing the DOM with JavaScript (especially if you’re using a JavaScript library such as YUI or jQuery) you will run into cross-browser issues.

The Real DOM Hack: The HTML5 Shim (or Shiv)

I’m happy to say there is a second, and in my opinion better, solution to our problem. I believe this “feature” was first discovered by Sjoerd Visscher in 2002 when he switched from createElement to innerHTML and realized he lost the ability to style unrecognized elements. Fast-forward to 2008, when John Resig realized he could exploit the same bug to make HTML5 elements recognizable in IE; he named the capability the “HTML5 shiv,” although it is technically a shim. Here are the details.

Old versions of IE don’t recognize HTML5 elements naturally, but as soon as you use document.createElement() in the head of the document passing in an unrecognized element, IE will add the element to its tag library and it can be styled with CSS. Let’s go back to the markup:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>My New Page with Nav</title>
    <style>
    .nav {
color: red
}
        nav {
display: block;
background-color: blue
}
</style>
</head>
<body>
<div>
    <nav class="nav">
            <p>this is nav text</p>
    </nav>
</div>
</body>
</html>

Figure 1-1 shows how the preceding markup will appear in IE versions 6 through 8.





Figure 1-1. Styled nav element in a browser that doesn’t support the tag

Notice that the element didn’t pick up the color from the tag name or the CSS class assigned to the tag; it simply ignored it. Now let’s throw in our JavaScript and try it again:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>My New Page with Nav</title>
    <style>
    .nav {
color: red
}
        nav {
display: block;
background-color: blue
}
</style>
<script>

    document.createElement('nav');
</script>
</head>
<body>
<div>
    <nav class="nav">
            <p>this is nav text</p>
    </nav>
</div>
</body>
</html>

Now our markup will pick up the blue background from the tag styles and the red text from the class name; the result will look something like Figure 1-2.



Figure 1-2. Styled nav element in a browser that doesn’t support the tag, but with the JavaScript hack




SHARE THIS
Urdu Point

Author:

urdufundastory.blogspot.com is the first of its kind of trendsetting venture existent in Pakistan. It is for the first time in the history of this nation that a large scale project of such nature, evolved from an extraordinarily revolutionizing concept to a practical fulfillment.

0 Comments: