Mozilla Launches Firefox 6

Firefox 6.0

Firefox 6 is available for download today, and Mozilla wants developers to know the release includes some special tools just for them.

There aren’t any major interface tweaks in Firefox 6; you’ll pretty much be seeing the same browser you’re used to already. Some of the user-facing changes include a highlighted URL in the address bar, easier access to Firefox Sync and some performance enhancements. The new release also gives users a new permissions tool that lets them set permissions for saved passwords, pop-ups and cookies on a site-by-site basis.

For developers, the most significant additions to Firefox 6 are the element, which displays system progress bars for tasks in progress; touch events, which support touchscreen functionality; and server-sent events, which allow server-side script to generate client-side events accompanied with data.

Mozilla has also brought back WebSockets. WebSockets enable interactive communication between the browser and the server and are used for chat and gaming programs, among others.

Another new feature in Firefox 6 is the Window.matchMedia API. “This is basically the media queries equivalent to querySelector, matchesSelector and friends,” writes Mozilla engineer David Baron. Simply put, the API will help you optimize your website or mobile web app across a range of devices and operating systems.

In the browser itself, Mozilla has added a new Web Developer menu that should help with creating and debugging sites from the browser. From this menu, you can access the new Scratchpad tool, an interactive JavaScript prototyping environment that allows you to enter, execute, test and refine JavaScript snippets in the browser. Mozilla has also improved the Web Console, giving it auto-complete features and customizable console location.

You can check out other changes for developers at Hacks.Mozilla.org.

The roll-out also included some improvements to Firefox for Android, including tablet-optimized interface features, a new homepage, better image rendering and a more “Android” look and feel overall.

Firefox 6 comes quite swiftly on the heels of its predecessors. Firefox 5 only launched near the end of June 2011, and Firefox 4 made its debut just months before in the spring.

What’s new in Firefox 6?

The most notable addition to this new release are the<progress> element, touch events, Server-Sent Events as well as the return of WebSockets.

The <progress> element

<progress value="0.4"></progress>

<progress value="60" max="100"></progress>

<progress></progress>

view rawprogress.htmlThis Gist brought to you by GitHub.

This element can be used to give a visual cue of something in progress in the page. System progress bars are being used, which means that users of MacOS and Linux will see something different than what is pictured here.

Touch events

The standard Touch events are now available on both Firefox “desktop” and mobile, enabling users to interact with web pages using their fingers on a touch screen.

WebSockets are back!

WebSockets can be used to create an interactive communication channel between a browser and a server. They are already used to build “HTML5” chats, multiplayer games, and much much more.
Note that this API will be temporarily namespaced in prevision of upcoming changes to the specification.

Main Changes for web developers

HTML

• The HTML5 <progress> element, which lets you create a progress bar, is now supported.
• The parsing of the HTML5 <track> element, which specifies text tracks for media elements, is now supported. This element should appear in the DOM now, though its behavior is still not implemented.
• The <iframe> element is now clipped correctly by its container when the container's corners have been rounded using the border-radius property.
• <form> elements' text <input> fields no longer support the XUL maxwidth property; this was never intentional, and is in violation of the HTML specification. You should instead use the size attribute to set the maximum width of input fields.
• The <canvas> CanvasRenderingContext2d properties fillStyle and strokeStyle used to ignore garbage included after a valid color definition; now this is correctly treated as an error. For example, "red blue" as a color used to be treated as "red", when it should have been ignored.
• The width and height of <canvas> elements can now properly be set to 0px; previously, these were getting arbitrarily set to 300px when you tried to do that.
• Support for the HTML custom data attributes (data-*) has been added. The DOM element.dataset property allows to access them.
• When a <textarea> element receives focus, the text insertion point is now placed, by default, at the beginning of the text rather than at the end. This makes Firefox's behavior consistent with other browsers.

CSS

-moz-text-decoration-color

This new property lets you set the color used by text decorations, such as underlines, overlines, and strikethroughs.

-moz-text-decoration-line

This new property lets you set the kind of text decorations added to an element.

-moz-text-decoration-style

This new property lets you set the style of text decorations, such as underlines, overlines, and strikethroughs. Styles include single-strokes, double strokes, wavy lines, dotted lines, and so forth.

-moz-hyphens

This new property lets you control how hyphenation of words during line wrapping is handled.

-moz-orient

A new (currently Mozilla-specific) property which lets you control the vertical or horizontal orientation of certain elements (particularly <progress>).

::-moz-progress-bar

A Mozilla-specific pseudo-element that lets you style the area of an <progress> element representing the completed portion of a task.