The Untold What's New in Firefox 3.5

Posted by JC John Sese Cuneta (謝施洗) on 07.01.2009
View Comments »

Firefox 3.5 is now out and Mozilla Advances the Web again, this time being the first to release a new final browser with support for more web standards, upcoming standards, and some very useful HTML5 support!

Follow up:

So What’s New in Firefox 3.5?

I’m going to skip what was officially announced by Mozilla as the “new features” of Firefox 3.5, you probably read it already. I will only include one from the official announcement, the Open Video and Audio then go on from there.

Open Video and Audio

Enjoy video and audio content from within your browser, without the need for plugins. Video is a vital part of the modern Web, whether it’s used to communicate, educate, or entertain. Firefox 3.5 delivers the first native integration of audio and video directly into the browser. Now everyone can easily watch open format Ogg Theora videos.
Web developers can use these technologies to design pages that interact with video content in new and exciting ways, offering richer interactive experiences beyond controlling playback and volume.

Here are some examples of <video> usage in the wild:

Or see a video embedded right here, now!

NASA Constellation Program

The code:

Code:

<video src="http://tinyvid.tv/file/lbc3mt47kiny.ogg" controls="controls"></video>

SURFACE: A film from underneath

The code:

Code:

<video src="http://tinyvid.tv/file/2lgy2obzck49p.ogg" controls="controls"></video>

Also read: HTML5 video fallbacks with markup and using HTML5 video with fallbacks to other formats.

Webfonts

Webfonts! Or more commonly known currently as the CSS @font-face rule. This is a CSS rule that became a web standard since CSS2 but we are only seeing implementation with today’s browsers (with the exception of Internet Explorer), it gives the ability to web designers to use the font that they really want for their websites.

Or another use (which I believe will be where this feature will be primarily used), is to be able to show the characters or glyphs of another language without requesting the visitor to download your font. You can see a live example in this blog, visit these blog posts for examples:

How to use webfonts?

CSS:

@font-face {
  font-family: "Baybayin Stylized";
  src: local("Baybayin Stylized"),
    url("../fonts/BaybayinStylized.ttf") format("truetype");
  unicode-range: U+1700-171F, U+1735-1736;
}

Quickly,

font-family - This is the name of your font; You can also use this to create a group of fonts (see example below)
src - local(""), the local name of your font, that is the name it is known by an operating system; url(""); the URL of the font to download in case it isn’t available from your visitor’s PC. The font must be located on the same domain name where it was called. Generally, it is advised to use relative URLs, but with my personal testing absolute URLs works just fine, as long as the same-domain rule is followed.
unicode-range - Sadly, Firefox doesn’t support this currently. What it does is it allows the author to specify a specific range of unicode points when the font is used. If it is going to be downloaded, the browser is supposed to get only the specified range. Only two browsers today support this but I won’t mention it here since this is Firefox’s moment. Clue? It’s not IE (it doesn’t work last I tested).

Here’s another example, I grouped a set of fonts to be called simply as “Baybayin”

CSS:

@font-face {
  font-family: Baybayin;
  src: local("Baybayin Stylized"),
    local("Baybayin Modern Script"),
    local("Baybayin Modern Round"),
    local("Baybayin Modern Block"),
    local("Bikol Mintz"),
    local("Tagalog Stylized"),
    local("Tagalog Doctrina 1593"),
    local("Baybayin Lopez"),
    local("Bisaya Hervas"),
    local("Baybayin Modern Print"),
    local("Baybayin Modern Kufic"),
    url("../fonts/BaybayinScriptModern.ttf") format("truetype");
  unicode-range: U+1700-171F, U+1735-1736;
}

Yet More CSS to Play With

It doesn’t stop there! There’s more! Just check the border of this div - it is rounded and have a shadow.

Not only that, there are text shadows all around.

These are the other new features that I haven’t touched above:

<canvas> - check this site for a great example
The CSS property word-wrap - as the name suggests, word-wrap!
New CSS3 pseudo-classes namely first-of-type; last-of-type; and only-of-type
New CSS3 selectors: :nth-child; :nth-last-child; :nth-of-type; :nth-last-of-type
Not really new, but -moz-opacity is dead
color correction for images in Firefox 3.5
-moz-transform - read: 3D transforms in Firefox 3.5 - the isocube
content aware image resizing
GeoLocation
Firefox “tab-tearing” feature

I can’t wait to see websites and blogs to use these excellent new toys.

What do you think?

Read the Press Release: Mozilla Advances the Web with Firefox 3.5

And Get Firefox 3.5 here, NOW!!

Tags: browser, css, firefox, html

In General

If you enjoyed this post...

then check My Wishlist & buy me one of those listed!
Or you can subscribe to our feed: LaBox.

blog comments powered by Disqus

ᜋᜊᜓᜑᜌ᜔

Mabuhay

Elsewhere…

Latest Posts

Archives

Shares Trading

Subscribe Now!

Supporting…

Global Voices: The World is Talking, Are You Listening?

	`@font-face {`
	`font-family: "Baybayin Stylized";`
	`src: local("Baybayin Stylized"),`
	`url("../fonts/BaybayinStylized.ttf") format("truetype");`
	`unicode-range: U+1700-171F, U+1735-1736;`
	`}`

	`@font-face {`
	`font-family: Baybayin;`
	`src: local("Baybayin Stylized"),`
	`local("Baybayin Modern Script"),`
	`local("Baybayin Modern Round"),`
	`local("Baybayin Modern Block"),`
	`local("Bikol Mintz"),`
	`local("Tagalog Stylized"),`
	`local("Tagalog Doctrina 1593"),`
	`local("Baybayin Lopez"),`
	`local("Bisaya Hervas"),`
	`local("Baybayin Modern Print"),`
	`local("Baybayin Modern Kufic"),`
	`url("../fonts/BaybayinScriptModern.ttf") format("truetype");`
	`unicode-range: U+1700-171F, U+1735-1736;`
	`}`

LaBox™