How to Write Backwards Compatible HTML5

How to write backwards compatible HTML5?

When talking about HTML5 or CSS3, you should head over to:

When can I use...

As can be seen, we are still far far away from using that.

Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:

Progressive Enhancement and Graceful Degradation

Here are some resources also:

• Gallery of HTML5 Sites (You can learn and get the idea from them)
• Create modern Web sites using HTML5 and CSS3

Is HTML5 backwards compatible with XHTML?

First up, IE does indeed render intranet sites in compatibility mode by default. However, it is a config setting and can be switched off: if possible, I'd suggest that your first solution would simply be to switch off this setting on all the machines on your network. (whether this is a viable solution will depend on the size of your network, your group policies, and what other intranet sites would be affected)

Now to answer your question.

The HTML5 doctype can be specified on any site that you want to render in standards mode. If you're already using XHTML, the only effect for you will be that the browser will no longer rigidly enforce strict XHTML compliance. You are perfectly entitled to continue using XHTML code, but it won't be enforced.

The HTML5 doctype was specifically chosen because it works with existing browsers, including older versions of IE. You should be able to put it onto any page, and it should just work.

What it won't do is have any effect at all on IE going into compatibility mode. Nor will any other doctype. The X-UA-Compatible solution you mentioned is the solution to this (unless you can set the config setting I mentioned earlier), and is un-related to the doctype - you'll still need it even if you use the HTML5 doctype.

Backward compatibility in HTML5 in mobile?

As far as I am aware, unknown tags will be ignored.

I suggest you use a script such as modernizr to detect the support of the functionality you are looking to use. You can then code progressively, as you intended.

how to use HTML5 placeholder attribute with backward-compatibility in mind?

You can detect if a browser supports the attribute:

http://diveintohtml5.info/detect.html#input-placeholder

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}

If it does, do nothing. If it doesn't, you can use JS to grab the placeholder value and then insert it into the field as you see fit (perhaps as default value) and then add the appropriate interactions to simulate the HTML5 placeholder behaviors.

html5 data attributes backwards compatibility

Unknown attributes are ignored in that they don't do anything, but they are still available for getAttribute to retrieve.

I'm fairly sure it's safe to assume that data-* is not used for anything else - otherwise they would have chosen a different identifying keyword that didn't conflict with something else.

HTML5 + CSS3 Backwards compatibility on calc() css function

If you want to solve this particular case, I would suggest that you (perhaps a bit ironically) try relying on the good old table layouts of yesteryear. However, it does get a tad trickier if you want to do it properly without using <table> since display:table doesn't have an equivalent to the the colspan or rowspan attributes.

What this means is that you may need to use a few more containers than before, but still nothing really majorly complex.

I made a rather basic JSFiddle to show you what I mean.

HTML

<div class="outer">
    <div class="header">Header</div>
    <div class="contentRow">
        <div class="contentTable">
            <div class="leftCol">Sidebar</div>
            <div class="rightCol">
                <div class="rightTable">
                    <div class="topContent">Top content</div>
                    <div class="content">Content</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.outer {
    display: table;
    height: 100%;
    width: 100%;
}
.header {
    background: blue;
    display: table-row;
    height: 30px;
}
.contentRow {
    display: table-row;
}
.contentTable {
    display: table;
    width: 100%;
    height: 100%;
}
.leftCol {
    background: red;
    display: table-cell;
    width: 280px;
    min-width: 280px;
    height: 100%;
}
.rightCol {
    display: table-cell;
    height: 100%;
}
.rightTable {
    display: table;
    width: 100%;
    height: 100%;
}
.topContent {
    background: green;
    display: table-row;
    height: 100px;
}
.content {
    background: orange;
    display: table-row;
}

Resource for backward compatibility in HTML5?

Maybe you should give a try to HTML5shiv.

---

Related Topics