HTML5 training prep

Contenteditable

There are really two attributes involved, designMode and contentEditable. The designMode attribute governs the entire document (i.e. it makes the entire document editable, like a dedicated HTML editor). The contentEditable attribute governs just the element on which it appears, and that element's children -- like a rich text editor control within a page

All major browsers support this now, including Firefox 3, Safari 3, Opera 9, Google Chrome, and Internet Explorer (since 5.5).

Once you have an editable document (designMode) or element (contentEditable), you use this set of API calls to issue commands on the editable region, and to query the current state of the region. Commands are things like bold, italic, underline, etc. Here is a example with complete list of commands

Browser compatibility list of commands.

source

Video

HTML5 adds native support for embedding video and audio and providing DOM APIs for scripts to control the playback.

The new video and audio elements are really easy to use. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non-visual media

The major obstacle to implementing the video element is cross browser compatibility. Different browsers support different codex.

Sublime video

This option includes some sleek features such as

1. Uniform UI across all browsers
2. Standalone pure JavaScript library
3. Full-window mode

But it won't be free for commercial use and has not been released yet.

http://jilion.com/sublime/video

Video for everyone

This option is the simplest I found. One provides a list of possible sources with different encodings and the browser picks the one it supports. The main advantages are

1. simplicity
2. no script
3. plays in RSS reader

http://camendesign.com/code/video_for_everybody

source

Generated content

The content property is used with the :before and :after pseudo-elements, to insert generated content. This property is part of the CSS 2 specification, but browser support varies.

Examples

Authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" on a line before the seventh chapter title.

chapter { counter-increment: chapter; }
chapter > title::before { content: "Chapter " counter(chapter) "\A"; }

Another common effect is replacing elements with images or other multimedia content. Since not all user agents support all multimedia formats, fallbacks may have to be provided.

/* Replace <logo> elements with the site's logo, using a format

• supported by the UA */

logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }

/* Replace <figure> elements with the referenced document, or,

• failing that, with either the contents of the alt attribute or the
• contents of the element itself if there is no alt attribute */

figure[alt] { content: attr(href, url), attr(alt); }
figure:not([alt]) { content: attr(href, url), contents; }

source

I could not really find any good proper use cases for this property within Anymeta.

New elements

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.

These new elements are not compatible with older browsers so they can't be styled with CSS. Fortunately there is a fix.

The trick is simply to create the new element using JavaScript, and voilà, IE is able to style it:

document.createElement('header');

source