To keep you updated on the latest features in Firefox, here is again a blog post highlighting the most recent changes. This is part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

Viewport-percentage lengths

Gecko now supports new lenght units: vh, vw, vmin and vmax. 1vh is 1% of the viewport height, and the length doesn’t depend on its container size. We can build designs that are directly proportional to the page size (think about HTML slides for example, which are supposed to keep the same appearance regardless the size of the page).

vh

1/100th of the height of the viewport.

vw

1/100th of the width of the viewport.

vmin

1/100th of the minimum value between the height and the width of the viewport.

vmax

1/100th of the maximum value between the height and the width of the viewport.

Read more about CSS Viewport-percentage lengths on MDN.

<canvas>.toBlob()

A Blob object represents a file-like object of immutable, raw data. Blobs can be used by different APIs, like the File API or IndexedDB. We can create an alias URL the refers to the blob with window.URL.createObjectURL, which can be used in place of data URLs in some cases (which is better memory wise).

Now, a canvas element can export its content as an image blob with the toBlob() method (this replaces the non standard mozGetAsFile function). toBlob is asynchronous:

toBlob(callback, type) // type is "image/png" by default

For more information, see Example: Getting a file representing the canvas on MDN.

WebRTC in Firefox Nightly and Firefox Aurora (Firefox 18)

To enable our WebRTC code in Firefox’s Nightly desktop build, browse to about:config and change the media.peerconnection.enabled preference to true. More WebRTC documentation on MDN, and we plan to have future blog posts about WebRTC here on Mozilla Hacks.

Additionally, if you are interested in a steady flow of the latest Firefox highlights, you can also follow @FirefoxNightly on Twitter.