Constructing ContentInternet Explorer for Windows is the notable exception. That browser’s rendering engine has a list of HTML
elements it recognizes, and if an element doesn’t appear on that list, IE will simply refuse to style it at all.
Older versions of IE prior to version 9 didn’t recognize the new elements introduced in HTML5 such as
section, article, nav, figure, time, mark, and so on. These elements didn’t exist when those versions
of IE were released, so they’re not on the list and IE won’t let them into the style party.
But all is not lost! There’s an interesting quirk in IE’s rendering engine: if you use JavaScript to create an
element (via the createElement method), it’s automatically registered in the document object model and
IE will suddenly become aware that elements by that name exist. IE will begin styling those previously
unrecognized elements just as it would a paragraph or div or any other element it already understands.
It’s as simple as:
<script>
document.createElement("article");
</script>
This single line of JavaScript makes IE aware of any instances of the article element and it will apply
your CSS rules to those elements without complaint. You can repeat the same for all the other new
structural elements, but HTML5 wiz Remy Sharp has made it even easier for you. He’s concocted a simple
and tiny JavaScript library, dubbed the HTML5 shiv (http://code.google.com/p/html5shiv/), that you
can include in the head of any web pages you build with the new HTML5 elements and it will trigger
rendering support for all of those new elements in older versions of IE.
The unfortunate downside is that anyone using an outdated copy of Internet Explorer with JavaScript
disabled won’t experience your website in its fully-rendered CSS glory. Think about your content and your
users, and test your pages thoroughly. If you need to offer fully-rendered pages to people using outdated
versions of IE who have also turned off JavaScript—a minority, perhaps, but they’re out there—you might
need to refrain from using these newer structural elements, or at least refrain from styling them with CSS.
You could still build them into the document for their semantic utility and for forward compatibility, but you
might need to direct your CSS rules to more established elements for your layout and design.Declaring Base Font Styles
A graphical web browser draws text on-screen using font files installed on your visitor’s computer.
Unfortunately, this usually limits your options to the few typefaces that are very common in most operating
systems—ones with familiar names such as Times New Roman, Helvetica, Arial, Verdana, Georgia,
Trebuchet, and Courier. CSS3 brings the @font-face rule, a means of embedding third-party fonts in a
style sheet that a browser can download and use temporarily to render the page.
We’ll cover embedding web fonts in a later chapter, but you should first understand how to use and work
with the user’s native fonts. You can still achieve great things even with a limited palette. Good typography
is about more than just choosing a nice typeface; it’s also about how you arrange text on the page.Font Family
A font family is, well, a family of fonts. Also called a typeface, a font family consists of a set of variations on
a single type design. The typeface known as Times New Roman, for example, includes normal, italic, bold,