StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 Doctype + JS library - necessary?
text
Body
copied!<p>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.</p> <p>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)?</p> <p>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 <code>section</code> and <code>aside</code>?</p> <p>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 <code>noscript</code> tag, couldn't I?</p> <p>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?</p> <p>EDIT</p> <p>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 <code>border-radius</code> on a div called <code>#form-box</code>. 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.</p> <p>So I've got the class, giving the box the basic styling every browser should be able to interpret:</p> <pre><code>#form-box { background-color: #f0eeee; width: 400px; height: 300px; margin: 0 auto; margin-top: 50px; } </code></pre> <p>Then, for browsers that know <code>border-radius</code>:</p> <pre><code>.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; } </code></pre> <p>And for browsers that don't know <code>border-radius</code> (i.e. the IE6), I use the polyfill "PIE" that adds round corners, even in IE using JS the .htc-file:</p> <pre><code>.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; } </code></pre> <p>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?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload