"It's all about how you load your content and how you fall back gracefully."
Your answer probably lies in both, so first let's talk about:
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
What do these files do?
- This includes the basic createElement() shiv technique, along with monkeypatches for document.createElement and document.createDocumentFragment for IE6-8. It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x.
- This includes all of the above, as well as a mechanism allowing HTML5 elements to be styled and contain children while being printed in IE 6-8.
Who can I get mad at now?
HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr, and the two google code projects, html5shiv and html5shim, maintained by Remy Sharp.
If you have any issues in these implementations, you can report them here! :)
For the full story of HTML5 Shiv and all of the people involved in making it, read: The Story of the HTML5 Shiv.
Later on he goes on to mention ...
Modernizr is developed by the same people as
html5shiv and can include the latest version in any custom builds created at modernizr.com.
Now, since Alexander mentioned it, let's talk about:
Why use Modernizr?
How it works
html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.
Check out the full list of features that Modernizr detects, or learn more about conditional resource loading with Modernizr.
Now, once again, since we are talking about Modernizr and Paul Irish, let's talk about:
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
This project is the product of many years of iterative development and combined community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.
- HTML5 ready. Use the new elements with confidence.
- Cross-browser compatible (Chrome, Firefox, IE8+, Opera, Safari).
- Designed with progressive enhancement in mind.
- Includes Normalize.css for CSS normalizations and common bug fixes.
- The latest jQuery via CDN, with a local fallback.
- The latest Modernizr build for feature detection.
- Placeholder CSS Media Queries.
- Useful CSS helpers.
- Default print CSS, performance optimized.
- Protection against any stray
- An optimized Google Analytics snippet.
- Apache server caching, compression, and other configuration defaults for Grade-A performance.
- "Delete-key friendly." Easy to strip out parts you don't need.
- Extensive inline and accompanying documentation.
HTML5 Boilerplate v4 provides legacy browser support (IE 6+, Firefox 3.6+, Safari 4+), but is no longer actively developed.
Take a look at the documentation table of contents. This documentation is bundled with the project, which makes it readily available for offline reading and provides a useful starting point for any documentation you want to write about your project.
And since HTML5 Boilerplate is no longer being actively developed, I just go to:
Initializr is an HTML5 templates generator to help you get getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
Assuming your are still with me and read all of the above, it's:
Question and Answer Time
Q. What is considered best practice when it comes to where your scripts are placed on your page?
Hover the quote block below to view the answer:
A. At the bottom of your page, right before the closing body tag.
Q. Why you ask?
Hover the quote block below to view the answer:
A. Well, plain and simple, so your users aren't staring at a blank screen while your scripts haven't completed downloading and/or run yet due to one or more of them hanging.
This allows your user to watch the content render, and while your user is watching the content render, your scripts are being downloaded, one or more at a time depending on the browser, so that by the time your content finishes rendering and your user wants to interact, your scripts have been downloaded and run so that the page is ready to be interacted with.
This best practice was taught to us by Paul Irish and the team at HTML5 ★ BOILERPLATE and as far as I know, they were the first to create a template, bootstrap, or boilerplate, whatever you call it nowadays.
It is developed by the same people as HTML5 Shiv.
It uses feature detection and provides a graceful fallback for browsers that fail the tests while browsers that pass get to experience the fullness of your imagination.
Place your scripts (other than Modernizr) at the BOTTOM of your page:
- Allows the user to see content rendering while scripts are loading in the background.
I didn't get a chance to talk about this, but for the future: