Fork me on GitHub

HTML5 & Friendsa Firefox overview

By Paul Rouget & Geoffrey Dorne. See the footer for full credits.

<canvas> 2D HTML5 performance Javascript <video> hardware acceleration SVG CSS3 WebGL Security Multi-platform Open Codecs File API Scalable Vector Graphics Geolocation API Native JSON WOFF GNU/Linux Border Image HTML5 parser -moz-element Application Cache HTTP Strict Transport Security image-rect classList box-shadow Transition SVG as a CSS background IndexedDB Border Radius Multiple Backgrounds TraceMonkey QuerySelector Android Javascript Animation Scheduler Multi-touch @media Queries formData :visited Drag and Drop files from the Desktop Text Shadow X-Frame-Options postMessage Retained layers JavaScript typed arrays XHR Level 2 Content Editable Cross-Domain XHR Compositing acceleration Forms Web Workers Transform Structural pseudo-classes Windows Protocol handlers Cross-Origin Resource Sharing async & defer Asynchronous plug-in painting any() Gradients ECMAScript 5 Javascript engine localStorage Mac OS Device Orientation Audio Data API calc() Content Acceleration @font-face Native Drag and Drop SVG as an <img> foreignObject font-feature-settings Strict Mode History API Maemo mask, filter, clip-path <audio> Columns semantics

Standards

HTML5

<canvas> 2D

Canvas is a HTML5 element which can be used to draw graphics via scripting (JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations.

learn more

<video>

HTML5 defines a standard way to embed video in a web page, using a <video> element. The same way we can use images in web pages, we can now use videos. Videos can be styled with CSS and controlled via Javascript.

learn more

Open Codecs

Mozilla is proud to support, and bring to web content, free and open video and audio codecs: Webm/VP8, OGG/Theora and Vorbis.

learn more

Content Editable

contenteditable is used to indicate whether or not an element is editable. An entire document can be set as editable, or just a subset.

learn more

HTML5 parser

x = - b ± b 2 - 4 a c 2 a

The HTML parser is one of the most complicated and sensitive pieces of a browser. It controls how your HTML source code is turned into web pages. The new parser is faster, complies with the HTML5 standard, and enables a lot of new functionality as well. This parser lets content embed SVG and MathML directly in the HTML markup.

learn more

semantics

<!DOCTYPE html>
<header> <nav>
<section> <article> <aside> <footer>

Elements, attributes, and attribute values in HTML are defined (by the HTML specification) to have certain meanings (semantics). HTML5 brings more elements to improve the semantics of a document.

learn more

<audio>

The HTML 5 <audio> element offers the ability to easily embed audio files into HTML documents. Once you've embedded media into your HTML document using the new element, you can programmatically control them from your JavaScript code.

learn more

Forms

Dear Mozilla,
My name is . I think this demo is . BTW, I want to tell you that you should .

Thank you

Submited! Thank you.

Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.

learn more

Audio Data API

The HTML5 specification introduces the <audio> and <video> media elements, and with them the opportunity to dramatically change the way we integrate media on the web. We present a new Mozilla extension to this API, which allows web developers to read and write raw audio data.

learn more

WebGL

Canvas 3D. WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 canvas elements.

learn more

CSS3

Transform

The -moz-transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed as this text.

learn more

Transition

❖✪

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

learn more

@media Queries

Resize your window to see the layout of this page being adapted to fit the new size.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

learn more

Structural pseudo-classes

:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, …

Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

learn more

Border Radius

The border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

learn more

Border Image

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for as many as nine boxes in some cases.

learn more

Gradients

Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

learn more

Multiple Backgrounds

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background displayed in the back.

learn more

Columns

The column layout.
People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

learn more

box-shadow

The box-shadow CSS property allows casting a drop shadow from the outline of almost any element. It can define multiple shadow effects at once.

learn more

Text Shadow

CSS3 is AWESOME

The text-shadow CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow. The text-shadow property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3.

learn more

any()

CSS any() lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

learn more

calc()

CSS calc() values lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth.

learn more

image-rect

Use sprites as resources for your design. The new -moz-image-rect lets you use a sub-rectangle of an image as part of a background or background-image.

learn more

-moz-element

-moz-element is an experimental extension to the CSS background-image property: the ability to draw arbitrary elements as backgrounds using -moz-element(#elementID).

learn more

mask, filter, clip-path

SVG effects are extended to apply to CSS-formatted elements. In particular, it makes the 'filter', 'mask' and 'clip-path' CSS properties applicable to CSS-formatted elements (such as HTML elements).

learn more

@font-face

the QUICK brown

Firefox

J umps over

THE LAZY DOG

@font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

learn more

font-feature-settings

Beau Grand & Fort
klmnABRACADABRANTESQUEopqr
EXTRAORDINAIRE
tprestigieuxu
FULGURANT
Phénoménal
«COLOSSAL!»
incroyable
& modeste avec ça

Play with much more of the capabilities of TrueType. It’s possible to take advantage of all kinds of font capabilities — kerning, ligatures, alternates, real small caps, and stylistic sets, to name just a few.

learn more

WOFF

The Web Open Font Format (WOFF) has two main advantages over raw TrueType or OpenType fonts. It is compressed, which means that you will typically see much smaller download sizes compared with raw TrueType or OpenType fonts. It contains information that allows you to see where the font came from — without DRM or labeling for a specific domain — which means it has support from a large number of font creators and font foundries.

learn more

Javascript

ECMAScript 5

ECMAScript 5 is the new version of the JavaScript language, which includes new features and API like Strict Mode and the JSON API.

learn more

JavaScript typed arrays

If you’re doing processing with JavaScript and you want to process low-level data, Firefox now supports native typed arrays in JavaScript. This can make a gigantic difference in how fast items are processed if you’re doing WebGL or image manipulation.

learn more

Strict Mode

Javascript Strict Mode is a way to opt in to a restricted variant of JavaScript. Strict mode has different semantics from normal code. It eliminates some JavaScript pitfalls that didn’t cause errors by changing them to produce errors. And it fixes mistakes that make it difficult for JavaScript engines to perform optimizations.

learn more

XHR Level 2

XMLHttpRequest makes sending HTTP requests very easy. You simply create an instance of the object, open a URL, and send the request. The HTTP status of the result, as well as the result's contents, are available in the request object when the transaction is completed. This new Level brings interesting feature such as progress events and support for cross-site requests.

learn more

Drag and Drop files from the Desktop

Drop an image from your desktop

Users can drag and drop files directly into your web page, without going through the file picker.

learn more

History API

The DOM window object provides access to the browser's history through the window.history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as — starting with HTML5 — manipulate the contents of the history stack.

learn more

Native JSON

JSON (JavaScript Object Notation) is a data-interchange format, based on a subset of JavaScript syntax. It is useful when writing any kind of JavaScript-based application, including extensions.

learn more

QuerySelector

The Selectors API provides methods that make it quick and easy to retrieve Element nodes from the DOM by matching against a set of selectors. This is much faster than past techniques, where it was necessary, for example, to use a loop in JavaScript code to locate the specific items you needed to find.

learn more

classList

The bridge between the document and its style is often based on the class attribute. Being able to manipulate this attribute in an efficient way is important. classList lets you toggle, add and remove classes from any element easily.

learn more

Web Workers

Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest.

learn more

async & defer

These are attributes of the <script> element. Set async to tell the browser to, if possible, execute the script asynchronously. Set defer to tell the browser to execute the script after it has parsed the document.

learn more

formData

XMLHttpRequest Level 2 (editor’s draft) adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method in “multipart/form-data” format.

learn more

Geolocation API

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked to confirm permission to report location information.

learn more

File API

The File API specifies the ability to asynchronously read a selected file into memory, and perform operations on the file data within the web application (for example, to display a thumbnail preview of an image, before it is uploaded, or to look for ID3 tags within an MP3 file, or to look for EXIF data in JPEG files, all on the client side).

learn more

Multi-touch

With the Multitouch API, regular webpages are capable of using multitouch input, allowing web developers to create new interactive experiences for their websites.

learn more

Device Orientation

Move your laptop :)

The MozOrientation event provides a way to handle orientation information. This event is sent when the accelerometer detects a change to the orientation of the device. By receiving and processing the data reported by MozOrientation events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device.

learn more

Protocol handlers

Browsers need a way to deal with links that use protocols other than HTTP (for example, mailto:). They have traditionally used desktop programs such as a desktop e-mail client, to handle these protocols. Web-based protocol handlers allow web-based applications to participate in the process too.

learn more

postMessage

This is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol, port number and host. postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.

learn more

localStorage

localStorage is designed to provide a larger, securer, and easier-to-use alternative to storing information in cookies.

learn more

IndexedDB

IndexedDB is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.

learn more

Application Cache

When offline, you can’t always count on the browser’s cache. You need to define explicitly which files must be stored so that all needed files and resources are available when the user goes offline: HTML, CSS, JavaScript files, and other resources like images and video.

learn more

Javascript Animation Scheduler

window.mozRequestAnimationFrame tells the browser that you wish to perform an animation. This requests that the browser schedule a repaint of the window for the next animation frame.

learn more

Native Drag and Drop

Drag me. Even outside of the browser.

Being able to handle drag and drop allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application.

learn more

Cross-Domain XHR

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A such as an HTML web page, makes a XMLHttpRequest for a resource on Domain B. This is by default forbidden by the browser. As Domain B, you can allow such request with the Access-Control-Allow-Origin: header.

learn more

SVG

Scalable Vector Graphics

SVG is an XML language which can be used to draw graphics. It can be used to create an image either by specifying all the lines and shapes necessary, or by modifying existing raster images, or by a combination. The image and its components can also be transformed, composited, or filtered to change its appearance completely.

learn more

foreignObject

The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

Clipping, Masking and Compositing

Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using simple alpha blending.

How

performance

hardware acceleration

Hardware acceleration is basically using the GPU when it’s possible (instead of the CPU). This makes page-drawing operations faster. There’s two different levels of acceleration going on:

  • Content acceleration
  • Compositing acceleration

learn more

Content Acceleration

Content acceleration speeds up rendering the actual page content, such as the text, images, CSS borders, etc. Content acceleration is also used to speed up the 2D HTML canvas. On Windows Vista/7, we use Direct2D. On Linux, Firefox we use XRender.

learn more

Compositing acceleration

Compositing acceleration speeds up putting together chunks of already-rendered content (layers) together for final display in the window, potentially applying effects such as transforms along the way. For example, if you had a HTML5 video that was playing, and it had CSS effects applied to it that was making it rotate and fade in and out, that would be using compositing acceleration to make that go fast.

learn more

Javascript engine

Firefox's Javascript Engine is named "SpiderMonkey". To compete with platform-native application, JavaScript execution speed is crucial. SpiderMonkey brings two different optimizations:

  • TraceMonkey
  • JaëgerMonkey

learn more

TraceMonkey

TraceMonkey adds native‐code compilation to Mozilla’s JavaScript engine. It is based on a technique developed at University of California, Irvine called “trace trees”. The net result is a massive speed increase in Web‐page content.

learn more

Jägermonkey

JaëgerMonkey is a new method JIT for SpiderMonkey. The goal is to get reliable baseline performance on the order of other JS JIT systems. Jägermonkey will be a baseline whole-method JIT that doesn't necessarily do many traditional compiler optimizations. Instead, it does dynamic-language-JIT-oriented optimizations like PICs and specialization of constant operands.

learn more

Retained layers

Firefox has an internal layers system for improved drawing performance. Images, fixed backgrounds, inline video, etc. are now rendered to an internal layer and then composited with other parts of a web page in a way that can take advantage of hardware acceleration. This improves the page load time and interactive performance of many web pages.

learn more

Asynchronous plug-in painting

On Windows and Linux, Firefox now paints plug-ins asynchronously. In previous releases, to paint a web page that used a plug-in, Firefox had to ask the plug-in for the data to paint. If a plug-in was slow or was hung, it would make the browser feel slow. Now Firefox can get that data asynchronously.

learn more

Security

Cross-Origin Resource Sharing

Content Security Policy (CSP) is a set of easy to use tools that allow a web site owner to tell the browser where it should or should not load resources from. In particular it aims to prevent three different classes of common attacks we see on the web today: cross-site scripting, clickjacking and packet sniffing attacks.

learn more

HTTP Strict Transport Security

This specification defines a mechanism enabling Web sites to declare themselves accessible only via secure connections, and/or for users to be able to direct their user agent(s) to interact with given sites only over secure connections.

learn more

X-Frame-Options

Concerned about clickjacking or tired of sites wrapping your content with their ads?
X-FRAME-OPTIONS is a header value that is set by the webserver which instructs supported browsers on whether to allow a particular page to be framed by other pages.

learn more

:visited

CSS :visited hack prevention: The behavior of the :visited CSS selector needed to be changed in order to improve user privacy online. A decade-old hole in CSS rules that let any website query your browsing history is now fixed.

learn more

Multi-platform

GNU/Linux

Windows XP

Windows 7/Vista

Mac OS

Android

Maemo