Correctly supporting the html main element in IE

Question

I have decided to start using the html5 main element, of which I haven't used in the past because of lack of support in some browsers.

I knew you could just "fix" the lack of support by doing something like this:

main {
    display: block;
}

However I came across one answer that states you should do the below to add it to the DOM as well:

document.createElement('main');

My question is - shouldn't we first check if the browser supports the main element before we do this? I'm not sure the best way to do that would be though? ....or is this not really needed and is safe to use on all page loads regardless of support?

Answer 1

The linked answer isn't really accurate.

 document.createElement('main');

is only needed for IE9 and earlier, by helping those versions parse the <main> and </main> tags correctly to form a working main element. As the linked answer says though, calling this on its own is harmless, so you can just do it without worrying about it being called inappropriately. You should however include its containing script synchronously in JavaScript before the first (and normally only) <main> tag in the markup if you are supporting IE versions of 9 or earlier.

IE10 and IE11 parse the tags correctly, but treat the main element created as an inline element. To make it styled like other browsers, use

main {
    display: block;
}

The other aspect to consider is the accessibility landmark role. IE will not expose the main landmark role by default, so you may wish to do <main role="main"> to make it do so, although it should be noted that the HTML5 spec discourages this.