Error getting theme layout

<section> is totally the new <div>

Posted @ 1:15 pm by Grady Kuhnline | Category: Technology | 0 Comments

I’ve been doing some reading recently on the coming HTML5 specification. There’s already several great articles on the key concepts of HTML5. The most interesting take-away from all of this is that it’s possible to start using HTML5 now.

Using the new HTML5 sectioning elements
The first hurdle to overcome is that the new HTML5 sectioning elements aren’t recognized in any current browser. Take a simple HTML5 document like this:
[source:xml]<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<title>Hello</title>
<style type=”text/css”>
header, footer {
background-color: indianred;
height: 35px;
}
section#main {
background-color: lemonchiffon;
padding: 20px;
}
section#main article {
background-color: saddlebrown;
}
</style>
</head>
<body>
<header>Header!</header>
<section id=”main”>
<article>My Article</article>
</section>
<footer>Footer!</footer>
</body>
</html>[/source]

Even in Safari 4, all of the new new HTML5 elements render as inline elements. Of course, in all versions of Internet Explorer the elements won’t render at all. The fix for this is twofold. First, the new section elements need to be given a default style of display:block;. And secondly, the new elements need to be coaxed into existence in IE. It’s pretty easy to give some default styling to the new elements with a snippet of CSS:

[source:css]/* Block-level HTML5 elements */
section, article, aside, header, footer, nav, dialog, figure {
display: block;
}[/source]

Getting IE to behave is a little trickier, but thankfully a small bit of JavaScript fixes things up. There is a relatively new JavaScript library called Modernizr that gets IE to play along and also places useful hints about browser capabilities on the <body> in the form of CSS classes. Modernizr is a useful transition technology that makes it easy to segment your CSS based on the capabilities of the browser instead of relying on CSS hacks.

Setting the DOCTYPE and using XHTML5
There’s a fair amount confusion on the web, but there is nothing preventing the use of XHTML with the new HTML5 specification. There’s some great information in the HTML 5 reference about setting the DOCTYPE for both HTML and XHTML. An example template that used XHTML5 might look like the code block below (sorry, our WP plug-in for code is sorely lacking). In this example, reset.css would be the reset stylesheet you normally use, and reset-html5.css would contain the html5 specific fixes shown above. For fun, we can include a special stylesheet for each of the IE browsers, which will become useful during the QA process. The example also puts Modernizr in the recommended place, just after the <body>. And finally, we’re including jQuery at the bottom of the page (because JavaScript goes at the bottom), assuming our project will probably make some good use of it.

[source:xml]<!DOCTYPE html SYSTEM “about:legacy-compat”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>Example HTML 5 Page</title>
<link rel=”stylesheet” type=”text/css” href=”/css/reset.css”/>
<link rel=”stylesheet” type=”text/css” href=”/css/reset-html5.css”/>
<link rel=”stylesheet” type=”text/css” href=”/css/global.css” />
<!–[if lte IE 6]><link rel=”stylesheet” type=”text/css” href=”/css/ie6.css” /><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” type=”text/css” href=”/css/ie7.css” /><![endif]–>
<!–[if IE 8]><link rel=”stylesheet” type=”text/css” href=”/css/ie8.css” /><![endif]–>
</head>
<body>
<!– @see http://www.modernizr.com/ –>
<script src=”/lib/modernizr-0.9.min.js”></script>
<div id=”container”>
<header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
</ul>
</nav>
</header>
<div id=”wrapper” class=”clearfix”>
<section id=”main”>
<article>
<h1>What Is Funny?</h1>
<p>Actually, puns aren’t funny.</p>
</article>
</section>
<aside class=”right”>
<section class=”box”>
<h1>Headers start over within sections</h1>
<p>tags?</p>
</section>
<section class=”box”>
<h1>Related Content</h1>
<ul>
<li><a href=”#”>Other Link</a></li>
<li><a href=”#”>Other Link</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<p>©2009 and other footer information</p>
</footer>
</div>
<!– Google Loader –>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=ABCDEFG”></script>
<script type=”text/javascript”>
google.load(“jquery”, “1.3.2″);
google.load(“jqueryui”, “1.7.1″);
google.load(“swfobject”, “2.1″);
</script>
</body>
</html>[/source]

Leave a reply

Error getting theme layout