Update: And the codecs issues for <video> have people (on the working group) in a tizzy. Talk about timing.

Firefox 3.5 is out today and it’s a doozy of an update. What’s the big deal? Well some pre-CSS3 toys and goodies are in it, some of which were already added to Webkit (Safari & Chrome).

Some notable features:

• Audio, Video and Image embedding features are being added directly into Firefox via the <audio>, <video> and <canvas> tags. We’ve been viewing video on the web for eons, but it’s always been via plugins (Flash) or external programs (Quicktime, Windows Media Player, etc.), now the browsers are getting theses capabilities built-in (previously Firefox did not play sounds directly for instance). Standards for content directly in the browser are a bigger deal than they sound, because it will make cross-platform webapps so much easier to create.The Canvas features are especially cool, it’s not just a display method, it’s a drawing method for creating images.

  YouTube already has support cooking for the video tag to replace Flash videos. I haven’t checked Webkit’s status on these features, but if it’s similar to Firefox’s… fully web-based apps could replace many of the iPhone’s apps (although it depends how much Apple intends to adopt or block the standards & codecs). I can already imagine creating games with this stuff.

• Web Fonts are possibly the biggest improvement to web-browsing since images. It’s been 16 years that we’ve been stuck with a small handful of ‘web-safe‘ fonts that exist on most PCs. There have been other kludges to embed fonts into websites as images, or provide links to download and install fonts manually, but Web Fonts embed directly: Allowing specific font faces to be shown by default with no compromising tricks.Web Fonts aren’t a shoe-in tho, there are still rights issues over who owns the fonts and which ones you can legally embed, but it’s past time when we should just be able to do it and decide typefaces for ourselves.
• Rounded borders via -moz-border-radius. Images are typically used to round borders, cut up into sections for backgrounds on the page. More recently JavaScript has been popular for rounding borders within the browser, but having them directly as CSS is more convenient. Unfortunately Mozilla (Firefox) and Webkit are tussling over the implementation, but hopefully they’ll both settle on how to interpret the CSS3 standard border-radius. Meanwhile, using separate -moz and -webkit markup works nicely.

  Example:

  Browser

  

• Shadows via -moz-box-shadow. The inset and multiple shadow options make this feature very flexible, almost as much as Photoshop’s shadows. Combining shadows can make buttons that would usually be images, which is incredible. These make me want to recreate my theme here so I can simplify changes and save on bandwidth & display times to boot. The more we can do directly in the markup and without JavaScript or cutting up a bunch of images, the better.

  Simple Example (Firefox + Safari + Chrome):

  Browser

  

  Complex Example (Firefox):

  Browser

  

I’ve already applied some of these to my theme here. I started adding rounded corners to my comment bubbles, it was so easy I just kept going with the rest of the theme. It’s cleaner and a breeze to maintain compared to fiddling with a bunch of carved-up images. These gracefully fall-back to the older standards, so while IE will end up looking plainer, it’ll still be fully usable.

Firefox, Safari and Chrome in total make up about a third of web-browsers. While there are still inconsistencies, it’s great to see them advancing these features. Hopefully it’ll be a kick in the pants for Microsoft to get with the program and update IE likewise.