7 interesting things that I found out reading ‘Dive into the HTML5’
Written on 24 November 2011, 05:33pm
Tagged with: html5, javascript, modernizr
Here are some interesting things I found from Dive into the HTML5 ebook:
Note: a couple of months ago, when I started reading this ebook, it was available under diveintohtml5.org. However, the author – Mark Pilgrim – is 410 Gone
from web. However, his ‘Dive into …’ book were mirrored and they are still available.
- XHTML vs HTML parser
- Double negative to convert to Boolean #
- Skip ‘skip to content’ π
- Character encoding
- Document outline
- Use Modernizr
- HTML5 canvas element
Even if you declare your DOCTYPE as being XHTML, if you serve the page as Content-Type: text/html, it will be parsed by the HTML engine, not by the ‘draconic’ XHTML one. #
/* You can use the double-negative trick
to force the result to a Boolean value (true or false).*/
return !!document.createElement('canvas').getContext;
No need to add ‘skip to content’ links at the beginning of your page if you are using HTML5’s nav
element. The screen readers will handle it correctly. [#]
Web Server’s HTTP Header:
Content-Type: text/html; charset="utf-8"
Briefly, this says that the web server thinks itβs sending you an HTML document, and that it thinks the document uses the UTF-8 character encoding.
<meta charset="utf-8" />
or
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Briefly, this says that the web author thinks they have authored an HTML document using the UTF-8 character encoding.
Both of these techniques still work in HTML5. The HTTP header is the preferred method, and it overrides the meta
tag if present. But not everyone can set HTTP headers, so the meta
tag is still around. [#]
You can have multiple h1 tags in the same page. [#]
You can check your HTML5 page outline using this outliner.
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
if (Modernizr.canvas)
if (Modernizr.canvastext)
if (Modernizr.video)
if (Modernizr.localstorage)
if (Modernizr.webworkers)
if (Modernizr.applicationcache)
if (Modernizr.geolocation)
if (Modernizr.inputtypes.date)
if (Modernizr.input.placeholder)
if (Modernizr.input.autofocus)
if (Modernizr.history)
//Example video:
if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.webm) {
// try WebM
} else if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}
}
More on the video element
It kind of looks like Flex without the Flash Builder π To use it in older IE browsers as well, use ExploreCanvas [#]
Here’s a nice application which lets you draw 3D sketches with animating strokes on HTML5 canvas.
- Likes (0)
- Comments (0)
-
Share