HTML 5–The End of Browser Rendering Differences? Not Hardly.
I was kind of stoked to learn more about HTML 5 now that the IE9 beta is out. I found a nice HTML 5 book on Safari Books Online (one of my favorite perks here at Microsoft) and started simple. Things were going fine until I tried to view my simple code in IE9, FireFox 3.6 and the latest version of Google Chrome. Here’s the HTML I wanted to render:
<!doctype html>
<html lang=en>
<head>
<title>Home Page</title>
<meta charset=utf-8>
<link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
<header>
<h1>Header Test</h1>
</header>
<article>
<p>test</p>
</article>
</body>
</html>
Pretty simple, right? The stylesheet I used was also very simple:
body
{
font-family: Verdana, Geneva, Sans-Serif;
}
header
{
font-size: 1.5em;
font-weight: bold;
color: #FF6600;
background-color: #3399FF;
}
Well, here’s the output rendered by the three different browsers.
Not quite what I expected, but at least the two more or less agree. However, look at what Chrome shows:
This is actually what I was expecting, but looks completely different from the above two. Ugly, yes, but that’s my fault for the painful color choices.
So, I’m now discouraged from pursuing HTML 5 any further. At least until the major players can get their collective acts together. I have no desire to live through 1998 again.