Question

In my next personal project I want to use the HTML5 doctype. I know that nearly all browsers support HTML5, even IE6 because HTML5 is downwardly compatible.

But: Do I have to use any JS library to really make it work, like HTML5shim, Modernizr or HTML5 Boilerplate (although I know that HTML5 Boilerplate isn’t a library)?

I mean, what are these projects about if I don’t have to use them – I’ve read using HTML5shim would be a so called ‘best practice’, is this true?
What happens if I don’t use any of them? Will some browsers ignore markup-elements like section and aside?

I’ve also read that using these libraries is essentially bad, because if the user has deactivated JS, the site breaks – but on the other hand: Who has JS deactivated nowadays? I could just include a noscript tag, couldn’t I?

Also, I’ve read in an article that these libraries cause more problems then they give us a benefit. To me it seems like the personal opinion of the author, or do they really cause so many problems?

EDIT

Alright, after testing Modernizr together with the HTML5 Boilerplate I have to say that this is a great solution so far. But one thing bugs me, I am not sure if I am doing it right.
Example: I want to use border-radius on a div called #form-box. For this example I assume that the round corners are essential for the website. If they weren’t essential I wouldn’t see a problem if IE users don’t see them.

So I’ve got the class, giving the box the basic styling every browser should be able to interpret:

#form-box {
    background-color: #f0eeee;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    margin-top: 50px;
}

Then, for browsers that know border-radius:

.borderradius #form-box {
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

And for browsers that don’t know border-radius (i.e. the IE6), I use the polyfill “PIE” that adds round corners, even in IE using JS the .htc-file:

.no-borderradius #form-box {
    behavior: url(PIE.htc);
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

This is how I do it at the moment. It’s cool, but: So much repeating code? Is it true that this is really neccessary? Or am I doing something wrong?

Answer 1

I’ve had no problems using the html5boilerplate and although I normally slim it down and remove things that aren’t necessary for my projects its a great boilerplate to start with.