Mozilla

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.

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

16 comments

Comments are now closed.

  1. Tony Mechelynck wrote on February 24th, 2010 at 08:07:

    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.

    1. Marcel Korpel wrote on February 27th, 2010 at 14:21:

      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.

      1. Marcel Korpel wrote on February 27th, 2010 at 15:07:

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

  2. vinyll wrote on February 24th, 2010 at 09:45:

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

  3. PJ wrote on February 24th, 2010 at 13:40:

    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.

  4. Paul Rouget wrote on February 24th, 2010 at 13:42:

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

    1. Tony Mechelynck wrote on February 25th, 2010 at 15:47:

      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″ ?

  5. Dao wrote on February 24th, 2010 at 15:12:

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

  6. Ken Saunders wrote on February 24th, 2010 at 16:21:

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

  7. Pingback from 火狐:46个您可能不知道的特性 < MJiA on February 24th, 2010 at 20:27:

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

  8. voracity wrote on February 24th, 2010 at 21:23:

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

  9. Brett Zamir wrote on February 25th, 2010 at 01:32:

    These are great….

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

  10. Pingback from 谋智社区 » Blog Archives » Firefox:您可能还不知道的46项功能 on March 4th, 2010 at 22:08:

    […] (原文链接:http://hacks.mozilla.org/2010/02/firefox-46-features/) Posted in 火狐在中国 | Trackback | del.icio.us | Top Of Page […]

  11. Jakob K… wrote on March 17th, 2010 at 14:56:

    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.

  12. George White wrote on August 23rd, 2010 at 04:38:

    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 :(

  13. Reynir Heiðberg Stefánsson wrote on November 11th, 2010 at 04:19:

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

Comments are closed for this article.