My blog now runs on HTML5
A lot of sites are already using HTML 5, and I found great inspiration in the HTML 5 and CSS 3 article on nettuts+
What's new in HTML 5
First of all, XHTML is discontinued. So you can continue using X(HT)ML type coding but you can also use the HTML 4 way where you don't have to close single tags. And guess what? target="" and iframe are allowed again. And there's a bunch of new tags to play with. In fact, this is a basic HTML 5 skeleton:
<!DOCTYPE html>
<html>
<head
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>HTML 5 Skeleton</title>
</head><body>
<header>Site title</header>
<nav>navigagion<nav>
<article>this is the main content pane</article>
<aside>secondary pane</aside>
<footer><p>© 2009 xxxx</p></footer>
</body></html>
The fix for Internet Explorer
All the modern browsers support the new HTML tags, except Internet Explorer. However, in order to make this browser recognize the new tags as well, you have to add a small JavaScript code to the head of the page, here as a conditional remark only IE will understand:
<!--[if IE]><script>var o='header,nav,aside,article,footer,section'.split(','),i;for(i=0;i<o.length;i++)document.createElement(o[i])</script><![endif]-->
However, to keep it completely away from other browsers, I only insert the script when the server detects a Microsoft browser, based on a computed for display field 'wBrowser':
@BrowserInfo("BrowserType")
And then the LotusScript rendering my HTML template picks it up and renders the script when necessary:
Const FIX_IE=|<script type="text/javascript">
var o='abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,
mark,menu,meter,nav,output,progress,section,time,video'.split(','),i
for(i=0;i<o.length;i++)document.createElement(o[i])
</script>|
...
if doc.wBrowser(0)="Microsoft" Then ns.add FIX_IE
New CSS features
To see these, you have to use a modern browser, because Internet Explorer does not render these. A quick overview of the new features I used:
/* new CSS selectors */
input,textarea,.radio{width:490px}
input[type=submit],input[type=radio],input[type=checkbox]{width:auto}
/* zebra stripes */
article section:nth-of-type(even){background:#eee}
/* rounded corners and box shadow */
body{background:#fff url(bg-h2.jpg) 10px 10px no-repeat;padding:10px;width:940px;margin:10px auto;
-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:5px 5px 5px #300;-webkit-box-shadow:5px 5px 5px #300}
Comments
To add a comment, log in or register as new user. It's free and safe.