Learning Modernizr — Save 50%
Create forward-compatible websites using feature detection features of Modernizr with this book and ebook.
In this article by Adam Watson, the author of Learning Modernizr, we will look into the basics of blocking versus non blocking scripts. We take help of several topics to cover this section.
In this article we will cover:
The async attribute
Blocking to allow shimming
The section frames
(For more resources related to this topic, see here.)
Blocking versus non blocking
The reason we've put this library into the head of the HTML page and not the footer is because we actually want Modernizr to be a blocking script; this way it will test for, and if applicable create or shim, any elements before the DOM is rendered. We also want to be able to tell what features are available to us before the page is rendered. The script will load, Modernizr will test the availability of the new semantic elements, and if necessary, shim in the ones that fail the tests, and the rest of the page load will be on its merry way.
The async attribute
Even more recently, included page scripts can have the async attribute added to their tag elements, which will tell the browser to download other scripts in parallel. I like to think of serial versus parallel script downloading in terms of a phone conversation, each script being a single phone call. For each call made, a conversation is held, and once complete, the next phone call is made until there aren't any numbers left to be dialled. Parallel or asynchronous would be like having all of the callers on a conference call at one time. The browser, as the person making all these calls at once, has the superpower to hold all these conversations at the same time. I like to think of blocking scripts as phone calls, which contain pieces of information in their conversations that the person or browser would need to know before communicating or dialling up with the other scripts on this metaphoric conference call.
Blocking to allow shimming
For our needs, however, we want Modernizr to block that, so that all feature tests and shimming can be done before DOM render. The piece of information the browser needs before calling out the other scripts and parts of the page is what features exist, and whether or not semantic HTML5 elements need to be simulated. Doing otherwise could mean tragedy for something being targeted that doesn't exist because our shim wasn't there to serve its purpose by doing so. It would be similar to a roofer trying to attach shingles to a roof without any nails. Think of shimming as the nails for the CSS to attach certain selectors to their respective DOM nodes. Browsers such as IE typically ignore elements they don't recognize by default so the shims make the styles hold to the replicated semantic elements, and blocking the page ensures that happens in a timely manner.
Say for example, the browser that was used to render the page did not support the new HTML5 section element tag. If the page wasn't shimmed to accommodate this before the render tree was constructed, you would run the risk of the CSS not working on those section elements. Looking at the reference chart on http://caniuse.com , this is somewhat likely for anyone using IE 8 or earlier:
Now that we've adequately covered how to load Modernizr in the page header, we can move back on to the HTML.
Adding the navigation
While we're at it let's remove the h1 tag as well. Since we now know for a fact that Modernizr is great, we don't need to "hello world" it. Once the h1 tag is removed, it's time for a bit of navigation. The HTML used is as follows:
<!-- Placing everything in the <header> html5 tag. --> <header> <div id="navbar"> <div id="nav"> <!-- Wrap the navigation in the new html5 nav element --> <nav> <href="#frame-1">Section One</a> <href="#frame-2">Section Two</a> <href="#frame-3">Section Three</a> <href="#frame-4">Section Four</a> <href="#frame-5">Section Four</a> </nav> </div> </div> </header>
This is a fairly straightforward navigation at the moment. The entire fragment is placed inside the HTML5 header element of the page. A div tag with the id field of navbar will be used for targeting.
I prefer to use HTML5 purely for semantic markup of the page as much as possible and to use div tags to target with styles. You could just as easily add CSS selectors to the new elements and they would be picked up as if they were any other inline or block element.
The section frames
After the nav element we'll add the page section frames. Each frame will be a div element, and each div element will have an id field matching the href attribute of the element from the navigation. For example, the first frame will have the id field of frame-1 which matches the href attribute of the first anchor tag in the navigation. Everything will also be wrapped in a div tag with the id field of main. Each panel or section will have the class name of frame, which allows us to apply common styles across sections as shown in the following code snippet:
<div id="main"> <div id="frame-1" ></div> <div id="frame-2" ></div> <div id="frame-3" ></div> <div id="frame-4" ></div> <div id="frame-5" ></div> </div>
In this article we saw the basics of blocking versus non blocking scripts. We saw how the async attribute allows the browser to download other scripts in parallel. We blocked scripts using shimming, and also added navigation to the scripts. Lastly, we saw the use of section frames in scripts.
Resources for Article :
- HTML5: Generic Containers [Article]
- HTML5 Games Development: Using Local Storage to Store Game Data [Article]
- Building HTML5 Pages from Scratch [Article]
eBook Price: $14.99
Book Price: $24.99
About the Author :
Adam Watson began life as a guitar maker but quickly transitioned into tech after landing a firmware-testing gig at Hewlett Packard. After getting a taste of the tech life, he began designing and coding websites in early 2000. Now, he works for BUZZMEDIA, a leading pop-culture company developing a mobile face for the company network of more than 40 music and pop-culture websites. He has also helped in writing the official Facebook plugin for WordPress, re-factoring portions of it a week before its official launch.
BUZZMEDIA is the leader in pop-culture and has millennial audience reach. It's the world's fastest-growing digital media company, with more than 100 million monthly unique visitors.
Over 35 BUZZMEDIA brands including SPIN, Celebuzz, Stereogum, Buzznet, The Superficial, Idolator, Just Jared, Just Jared Jr., PureVolume, The Hype Machine, AbsolutePunk, What Would Tyler Durden Do?, SocialiteLife, Go Fug Yourself, Pink is the New Blog, Gorilla vs. Bear, RCRD LBL, Videogum, TheFrisky, Egotastic!, Concrete Loop, Brooklyn Vegan, Crunktastical, Punknews.org, and others are category-leading, authentic, influential voices.