Stuff you probably missed:

• AppCache mimetype removed from HTML spec
• cancelRequestAnimationFrame renamed to cancelAnimationFrame. Prefixed in Canary/WebKit/FF nightly
• Chrome: input[date] M20, input[color] M18, datalist M20
• Control referrer info on outgoing requests: <meta name="referrer" content="never">
• a[download] attribute. Demo
• Chrome landed canvas.toDataURL('image/webp')
• xhr.responseType = 'arraybuffer'; can no longer be set with sync. requests
• Workers are in-process as of Chrome 15. Means less memory footprint and faster message passing. Impact on devs is 0.
• Safari starting to land Web Notifications API
• Mozilla unprefixing WebSockets in FF11
• FF11 supports saving Blob/File in IndexedDB
• IE to auto update!

Style elements mid-document, confined to immediate parent:

<article>
  <p>This p will have inherited color.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This p will be red.</p>
  </section>
</article>

• Add one-off CSS styles.
• Add user-defined styles to wiki or CMS content.
• Keep related content together (e.g. this slide deck code and demos).
• See HTML5Doctor article for more info.

Demo

New CSS functions

calc()

width: -webkit-calc(200px - 100);
width: -webkit-calc(2 * 50%);
width: -webkit-calc(200px / 2);
color: hsl(-webkit-calc(120), -webkit-calc(75%), 0.5);
background-position: -webkit-calc(50% + 5px) center;

min()

width: -webkit-min(150px, 100px, 200px);
width: -webkit-min(90px + 50px, 100px);
width: -webkit-min(100px, 100%);  /* where 100% is 200px; */

max()

width: -webkit-max(150px, 100px, 200px);
width: -webkit-max(200px - 50px, 100px);
width: -webkit-max(100px, 100%);  /* where 100% is 200px; */

Flow content into specified regions:

<style>
#content {
  -webkit-flow-into: bodytext;
}
.region {
  width: 200px;
  height: 200px;
  -webkit-flow-from: bodytext;
  -webkit-region-overflow: break;
}
@region #region1 { /* webk.it/71487 */
  p { color: navy; }
}
</style>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="content">
  <p>Lorem ipsum dolor ... or a nunc.</p>
  <div><img src="...">Lorem ipsum dolor ... or a nunc.</div>
</div>

Demo

CSS Regions ( JS API )

Access to the Document's named flows:

var namedFlow = document.getFlowByName('body_text');
namedFlow.overflow // true if flow doesn't fit in all its regions.

// Ordered NodeList of elements that constitute the named flow.
var els = namedFlow.contentNodes;

// NodeList of regions that contain (part of) the target node. 
var regions = namedFlow.getRegionsByContentNode(targetNode);

Determine if content fits in a region:

Element.regionOverflow // 'overflow', 'fit', 'empty', 'undefined'

// Array of Ranges for the content that is positioned in the region.
var ranges = Element.getRegionFlowRanges();

• Prefixed method (document.webkitGetFlowByName()) available in WebKit but implementation isn't complete.

Example

<ol contenteditable>
  <li>Press enter</li>
</ol>
<script>
  var ol = document.querySelector('ol');

  var observer = new WebKitMutationObserver(function(mutations, observer) {
    console.log(mutations, observer);
  });

  observer.observe(ol, {
    subtree: true,       // observe the subtree rooted at ol
    childList: true,     // include childNode insertion/removals
    characterData: true, // include textContent changes
    attribute: true      // include changes to attributes within the subtree
  });

  // observer.disconnect() // Cease observations
</script>

Demo

Transferable Objects

• ~50x faster than structured cloning (Chrome 13/FF).
• Transfer of ownership (zero-copy) of ArrayBuffer to new context (worker or window).
• Original buffer becomes unavailable.
• Prefixed under new postMessage() because of semantic changes:

  worker.webkitPostMessage(arrayBuff, [arrayBuff]); // 2nd arg: list of transferables.
  window.webkitPostMessage(arrayBuff, targetOrigin, [arrayBuff]);
  

• Pass multiple buffers at once and/or additional data:

  worker.webkitPostMessage({
    view1: uInt8Array,
    buffer2: anotherBuffer,
    username: 'johndoe'
  }, [uInt8Array.buffer, anotherBuffer]);
  

See HTML5Rocks Update for more info.

Demo

Example

// Note: webkit and moz vendor prefixes are not shown.

document.body.addEventListener('click', function(e) {
  if (!document.isFullScreen) { // Chrome requires fullscreen to succeed.
    document.body.requestFullScreen();
  } else if (navigator.pointer.isLocked) {
    navigator.pointer.unlock();
  } else {
    document.cancelFullScreen();
  }
}, false);

document.addEventListener('fullscreenchange', function(e) {
  if (document.isFullScreen) {
    navigator.pointer.lock(document.body, function() {
      console.log(e.movementX, e.movementY);
    }, function(e) {
      console.log('Mouse lock unsuccessful', e);
    });
  }
}, false);

document.body.addEventListener('pointerlocklost', function(e) { ... }, false);

Chrome/FF demo

Gamepad API

navigator.gamepads = navigator.webkitGamepads || navigator.MozGamepads;

var requestAnimationFrame = window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame;
var cancelAnimationFrame = window.webkitCancelAnimationFrame ||
                           window.MozCancelAnimationFrame;

var controllers = {}; // Stash connected controllers.
var reqId = null;

function onConnected(e) {
  controllers[e.gamepad.index] = e.gamepad;
  runAnimation();
}

function onDisconnected(e) {
  delete controllers[e.gamepad.index];
  cancelAnimationFrame(reqId);
}

window.addEventListener('webkitgamepadconnected', onConnected, false);
window.addEventListener('webkitgamepaddisconnected', onDisconnected, false);

window.addEventListener('MozGamepadDisconnected', onDisconnected, false);
window.addEventListener('MozGamepadConnected', onConnected, false);