Are we able to properly use the `main` element yet? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
So I just remembered that people were going on about the main element and whether or not it's a good idea and whether or not we should use it or even have one to begin with. I also remember being against the idea of a main element.
But as I was typing <div id="main", I asked myself, "If I'm applying main to an id, then why not see if the main element has been standardized yet?"
So then I looked it up. HTML5 Doctor says yes we can use it. But from their article, it looks like it's still not fully supported. I know that we can use JavaScript to make things easier for late-comers (browsers not adopting the new Standards as quickly as others) - and I know that Can I use (.com) says the major browsers support it, but has anyone had any issues while using it?
Are there any reasons I'm not aware of why I shouldn't use it?

Answer 1

There is broad support for <main> but if you have to deal with older browsers, the following CSS rule will make it work for them
main {
display: block;
}
The CSS specification requires browsers to treat all elements they don't recognize as inline, so this rule tells them to treat it properly as block instead.
If you need to support a browser so old that it doesn't implement CSS, that's another ballgame.

Answer 2

Not trying to be a smart ass but to elaborate on Stephen Thomas' answer:
If you need to support IE8 or older you might want to add the latest version of the HTML5shiv (if you haven't already) or add this to the head of your page above your stylesheet(s):
<!--[if lt IE 9]>
<script>
(function (d) {
d.createElement('MAIN');
// ... more HTML5 elements
}(document));
</script>
<![endif]-->
And the CSS (as Stephen Thomas already described):
main {
display: block;
}