HTML and CSS Reference
In-Depth Information
Listing 10-2 shows the conditional comment we've included in our header to load the HTML5 shiv script,
and we've targeted it to versions less than IE 9. Newer versions of IE from 9 onward recognize these
newer HTML elements natively and don't require the script to make them stylable.
Listing 10-2.
Attaching a JavaScript file in a conditional comment that only Internet Explorer can interpret
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
Remember, the major caveat when using the HTML5 shiv is that it makes CSS rendering in older versions
of IE entirely dependent on JavaScript, which some visitors may have disabled for any number of reasons:
to protect their privacy, as a security precaution, to improve performance on a slow connection, or to block
nefarious pop-up ads. Anyone using an outdated Internet Explorer with JavaScript disabled won't
experience our site in all its glory, but we don't want to completely ignore these poor souls either. The very
least we can do is offer them a word of explanation:
<!--[if lt IE 9]>
<noscript>
<p class="notice"><strong>Note:</strong> This website employs some features
that may not be fully supported by some versions of Internet Explorer. You
can improve your experience by enabling JavaScript.</p>
</noscript>
<![endif]-->
We'll include this message in the body of the page and it will only be visible to people using versions of IE
lower than 9, and—thanks to the
noscript
element—only if they have JavaScript disabled. If those users
were a key demographic and a significant portion of our target audience, we might reconsider our
approach and avoid styling unrecognized elements. But we're forging ahead and primarily targeting the
current generation of browsers. We'll make a reasonable effort to ensure the content is still accessible and
readable in some older, less capable browsers, but people using such browsers will have to be content
with a diminished experience.
Assembling the Template
With our basic document established, we next need to think about the common elements that will appear
on every page throughout the site. We know from our wireframes that the site will feature a branded
masthead that in turn features the Power Outfitters logo, a block of store info (the address and business
hours), a search box and a prominent link to the user's shopping cart, as well as the site's primary
navigation. There's also a global footer with some supplemental navigation, the company slogan, and a
copyright disclaimer. Between the masthead and the footer is a large area for the page's content, which
will obviously vary from page to page; the masthead, navigation, and footer are the consistent elements
that form the surrounding site template.
Marking Up the Masthead
The masthead is the branded header for the entire website, like a sign above a shop's front door. In the
past we would have used a generic
div
element to gather these related components into a single block,
