HTML and CSS Reference
In-Depth Information
like normal in-line
<span>
elements. All that is required is to set them to display:
block
with CSS
. Unfortunately, Internet Explorer (IE) is the one exception. In versions prior
to IE9, the browser would render unrecognized elements but wouldn't allow you to style
them using Cascading Style Sheets (CSS). As you can imagine, this makes it difficult to
start using the new HTML5 elements in a production application, because your users may
still be using IE6, 7, or 8.
Rendering new elements properly in IE
Fortunately, this problem has a simple remedy. If you want to use the element
<header>
on your page and need to apply CSS styles, include the following snippet in the
<head>
section of your page. This will force IE to apply the CSS rules to the tag, even if the version
of IE used doesn't support a particular element natively:
<!--[if lte IE 8]>
<script>document.createElement("header");</script>
<![endif]-->
You'll need to execute an equivalent of this JavaScript statement for every
HTML5-specific element you wish to use in your page. As you're doing this, it will cause
IE versions 6 to 8 to render the style correctly, with the problem persisting if you attempt
to print the page.
Rendering new elements properly on pages printed from IE
Fortunately, a solution known as IE Print Protector fixes the printing issue. But rather
than reinvent the wheel, we recommend you use an HTML shiv script. The most popular
HTML5 shiv was originally created by Remy Sharp and has since been improved by many
others. For more information and to get the latest version of the script, see
http://mng.bz/
50dt
.
Warning
The HTML5 shiv solution requires JavaScript. If you want a JavaScript-free solution, you
can use HTML5's XML-based sibling, XHTML5, instead. See Eric Klingen's post on the
subject at
http://mng.bz/QBIw
.
