Developer

Firefox 3.1 Alpha 2 developer features

The latest Firefox alpha release -- 3.1 alpha 2 is more significant for developers than end-users.

The latest Firefox alpha release — 3.1 alpha 2 is more significant for developers than end-users.

Below are some of the new interesting features that have been implemented:

HTML 5 video tag

The video tag — a part of HTML 5 standard has been introduced. Developers can now embed a video into a Web page directly, without needing to use Flash, control the video playback with JavaScript and access the video element through the DOM.

The video example starts at the 48th second.



Web worker threads

This feature, currently in preliminary support improves performance, as it lets complex JavaScript computations to be moved to a background thread, so they don't freeze up the browser.

CSS 2.1 properties

::before and ::after

These CSS pseudo-elements can be used to set the style and location of content before or after the document tree of an element. The content to be inserted goes inside the content property.

For example: p.quote:before { content: "Quote: "} will insert Quote: before paragraphs with the class attribute "quote".

White-space properly

This dictates how whitespace inside elements are displayed. Possible values are: normal,pre,nowrap, pre-wrap and pre-line.

CSS 3 Properties

-moz-border-image

The CSS 3 border-image property uses an image instead of border styles. Slicing images and positioning them around elements is simpler with this attribute. A good example can be found at the W3 website.

Word-wrap

With this property you can dictate whether a long word can be broken to avoid overflow in a box.

In text areas with multiple lines, when you specify word-wrap: break-word; very long lines with the absence of spaces will wrap to the next line instead of being scrollable.

Text-shadow, box-shadow and column rule

These properties allow you to create nice visual effects for your Web pages. Text-shadow adds effects to the text of an element and box-shadow adds a shadow to an element in your Web page. You can see examples of these in action here.

With column rule you can fill gaps that separate CSS 3 columns with lines, creating a border between your columns.

To play with some of these new features, download Shiretoko from the Mozilla website.

Editor's Picks

Free Newsletters, In your Inbox