Ever since the release of Firefox 3 we’ve been doing a lot of work to add new capabilities for web developers. We thought it would be worth it to make a post that actually listed all of the features that we knew about and people might not know about. This contains everything that we’ve done over the last three releases or so, but calls out stuff that’s new in 3.6.

Enjoy!

CSS

@font-face

Display online fonts (supports WOFF and TTF fonts)

pointer-events

Click through elements

:-moz-locale-dir(ltr/rtl)

Know if you are in a ltr or rtl context

:indeterminate pseudo-class

For “indeterminate” radio and checkboxes

Media Queries

Select CSS depending on the media (size, aspect-ratio, colors, orientation, resolution). has new classes to detect if you’re on a touch device.

Structural pseudo-classes

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

-moz-border-radius

Rounded borders

CSS Transforms

Scale, translate, skew and rotate your elements

CSS Gradients

Use linear and radial gradients as backgrounds

Multiple Background

Use images, gradients and other items all as part of the same background

Background size

Define the size of your background images

CSS Columns

Display your content in columns

Text Shadow

Shadow around text

Box Shadow

Shadow around elements

Border image

Use images as border for your elements

rem length unit

Size your elements compared to the root text element

Image Rendering Algorithm

Optimize speed or quality for resized images

XMLHttpRequest

Cross Domain XMLHttpRequest

Allows XMLHttpRequest to other domains

Monitoring Request Progress

Calculate percentages of uploads or downloads

Send binary data

Send non-ASCII content

Read binary data from a request

Read binary data sent by a server from an XMLHttpRequest

Offline

Offline and online events

Get notified when the browser goes online or offline

localStorage

Store persistent data

HTML5 Application Cache

Build an application for offline use in Firefox

Content

Video Tag (poster attribute)

Embed videos directly in your web page

Audio Tag

Embed audio files in your web pages

Canvas Element

Draw bitmap data with JavaScript

Animated PNG graphics

Animate your transparent PNG graphics

SVG Support

Draw, manipulate and get events for vector graphics

ForeignObject

Add HTML content inside an SVG element

Apply SVG effects and transforms to plain old HTML content

CSS mask, clip-path, or filter with SVG

Interaction

In-page Drag and Drop

Cleanly support Drag and Drop inside of your web application

Drag and Drop files from the Desktop

Drag and drop files directly from the operating system into your web page

DNS Pre-fetching

Speed up web page loading with DNS prefetching

Geolocation

Retrieve someone’s GPS coordinates or Street address

Mouse gesture events

Swipe, Magnify and Rotate from your mousepad

Detecting device orientation

Events for detecting machine orientation

Web Based protocol handlers

Set up a web app to support a protocol like “mailto:” or “phone:”

Detecting document width and height changes

Figure out when someone changes the size of a document

Communicate between windows and iframes

Securely send messages from one document to another

JavaScript and API

Native JSON

Encode and decode JavaScript objects safely and quickly

Web Workers

Run JavaScript code in a thread

File API

Read the binary content of files from Drag and Drop and File Upload controls

QuerySelector

Find an element in the web page through a CSS Selector

classList

Easily manipulate the classes of an element

defer and async attributes for scripts elements

Improve the performance of page loads with new script attributes