Firefox: 46 features you might not know about

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.




Display online fonts (supports WOFF and TTF fonts)


Click through elements


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, …


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


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 and online events

Get notified when the browser goes online or offline


Store persistent data

HTML5 Application Cache

Build an application for offline use in Firefox


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


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


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


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


Find an element in the web page through a CSS Selector


Easily manipulate the classes of an element

defer and async attributes for scripts elements

Improve the performance of page loads with new script attributes

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Tony Mechelynck

    Most of these are Gecko features rather than Firefox-only features, aren’t they? So:
    – Which value of x should I watch for in the rv:1.9.x part of (let’s say) a SeaMonkey User-Agent string for the features mentioned above as ‘new in Fx 3.6’?
    – Some of these have been present for quite some time, e.g., I have a book about CSS here, which documents -moz-border-radius as ‘present since Netscape 6’. I wonder why it hasn’t yet become part of ‘official’ CSS. Oh, well, I suppose that’s how slowly standards evolve.

    February 24th, 2010 at 08:07

    1. Marcel Korpel

      Don’t test for a Gecko or browser version number, but use feature detection. Nicholas Zakas wrote a nice article about this. Also, have a look at these Javascript feature tests and CSS support detection.

      Border-radius is going to be part of official CSS3.

      February 27th, 2010 at 14:21

      1. Marcel Korpel

        Of course I should have pointed to the latest specification of CSS3.

        February 27th, 2010 at 15:07

  2. vinyll

    Thank you for this nice list…
    We “just” need to study and test each of these now !
    goobye holidays and week-end :s

    February 24th, 2010 at 09:45

  3. PJ

    This is a great list. I’m definitely going to incorporate drag and drop from the desktop into my apps. It’ll make it a lot easier to upload lots of files, for sure.

    I do wish more of these features were standard HTML or CSS components though, because it’s tough on users who want a feature in their browser, but it isn’t supported.

    February 24th, 2010 at 13:40

  4. Paul Rouget

    Actually, -moz-border-radius is not Firefox 3.* specific (was here before Firefox 3.0).

    February 24th, 2010 at 13:42

    1. Tony Mechelynck

      I know: NS6 is (quite a lot) older than Fx3 isn’t it? But my question remains: which 1.9.x should I look for in a SeaMonkey UA string for those (other) features which you mention as “new in Fx 3.6” ?

      February 25th, 2010 at 15:47

  5. Dao

    :-moz-locale-dir is intended to be used in XUL applications, not on the Web.

    February 24th, 2010 at 15:12

  6. Ken Saunders

    Cool post.
    I was aware of most of them, but it’s time to revisit them because a few ideas have been sparked.

    February 24th, 2010 at 16:21

  7. […] 翻译自Mozilla Hacks,不过这里的特性是针对开发人员的。(由于使用了一些特性的CSS,不知道在阅读器里面会不会受到影响) […]

    February 24th, 2010 at 20:27

  8. voracity

    What about flex box? I would love to see a article devoted to it (especially since Webkit also has support for it).

    February 24th, 2010 at 21:23

  9. Brett Zamir

    These are great….

    Someone should do something like this to introduce cool XPCOM interfaces…

    February 25th, 2010 at 01:32

  10. […] (原文链接: Posted in 火狐在中国 | Trackback | | Top Of Page […]

    March 4th, 2010 at 22:08

  11. Jakob K…

    As I read the article, I thought: “It would be great if Firefox just not only ‘-moz-border-radius’ but also ‘border-radius’ supports!”

    “border-radius” is in CSS3, that means – IMHO – that “-moz-border-radius” doesn’t greatly matters.

    March 17th, 2010 at 14:56

  12. George White

    I think there is problem with DNS prefetching and CSS fetching in FF 3.6. I regularly get “server not found” error. The sites load after refreshing the browser. But the problem is not over yet. The browser doesn’t fetch style sheet at all. I could only see page without any style. The site would load normally if I refresh it again.

    So every time I have to hit the refresh button twice :(

    August 23rd, 2010 at 04:38

  13. Reynir Heiðberg Stefánsson

    Animated PNG? What’s so badly wrong with MNG?

    November 11th, 2010 at 04:19

Comments are closed for this article.