HMTL5: The cool, the really cool, and the "huh?"
Supported in major browsers.
IE 9 pledges support for HTML5 features.
New nodes in doc outline, to allow use of <h1><h2> etc tags in the doc outline in unique nodes.
<header> elemeent - can be used at page top OR at the head of a block of content <article> for example.
Similar with <footer> element.
<hgroup>
Sectioning elements
<section> - generic section of thematically consistent content, may not make sense on its own.
<article> - Represents an assembly of content that can be self-contained and reusable - makes sense on its own.
<nav>
<aside>
<time> - ISO Format
attributes:
datetime, pubdate
Ex: <time datetime="1776-07-04">July 04, 1776</time>
HTML 5 Shiv (Shim)
Avail on Google docs
Be sure to use css to style elements as block (display:block) for support by other browsers.
<figure> - illustrative piece of content, images or even code snippets..
<script> no need for type or language spec, just use <script>
FORMS
placeholder attribute of <input> types. Like value, but in newer browsers, it will erase as you click on it.
Other attributes..
type=""
search
tel
url
email
date
month
week
time
datetime-local
iPhone keyboard will be sensitive to the type of input you're using.. tel shows a number pad, url shows more URL specific keypad, etc..
Modernizr
http://modernizr.com
CSS3 Properties
HTML5 Properties
Adds support for HTML5 elements
<video>
IE 9 has announced support
<video src="myvideo.ogv" width="320" height="240" autobuffer>
</video>
autobuffer, or autoplay etc..
Can use a <source> element, which can be multiple options for different browser supports.
<video src="myvideo.ogv" width="320" height="240" autobuffer>
<source src="pr6.mp4" type="video/mp4">
<source src="pr6.webm" type="video/webm">
<source src="pr6.ogv" type="video/ogg">
</video>
Need server to specify correct mime types for this to work ok..
In html5 video is part of the DOM. Can be styled and manipulated. Has its own javascript API.
http://videojs.com/
<mark> - Do nothing more than mark up a piece of content that wasn't originally intended to be marked up.
Makes things a bit more symantically relevant, vs using some irrelevant span tag..
GeoLocation (navigator.geolocation)
All browsers must ask for permission first.
Since the full browser wide support has been slated to be in 2020, I think we have some time before we need to re-write code or even change the way we write new code to the newer node-like formmating unless otheriwse needed.
ReplyDeleteWhy would it be needed between now and then:
1) For video use on non-flash devices
2) For animation, canvas, picture on non-flash devices
3) For easily parsing and displaying templated blocks of content accross the site
4) For easily syndicating blocks of content to aggregators.
I think the video thing was the most interesting thing he talked about.
ReplyDeleteEspecially, how you can put multiple source values and the browsers (that support that) will be able to choose the one that works for them. The iPad caveat is that if it fails on the first one, it won't work, but the workaround is to put the iPad version (mp4 I believe) as the first one in the list and it will detect that and work, and other browsers will cycle through and pick the one that works best for them...