Firefox’s latest release is out and although it’s a point release in numbers, it’s truly a massive leap in changes.
From a front-end developer perspective the changes made under the hood are amazing and very welcome by the web developer community as a whole. They include increased JavaScript speed, to better CSS3 and HTML5 support through to some bleeding edge technology that blurs the line between desktop and browser.
I’ll go over some of the new CSS3 features added as well as the DOM changes. See here for all updates to Firefox 3.6
CSS3 additions
Mozilla is now the second browser-rendering engine to add support for CSS3 gradients and the first to use the new syntax that going forward will eventually be the standard.
background: -moz-linear-gradient(top, #594F50, #547980); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#594F50), to(#547980)); /* Safari */
Multiple backgrounds are now supported, meaning you can list a bunch of comma separated images on one element rather than creating unnecessary mark-up to apply more than one background.
background: url(img01.png) 50% 90px no-repeat, url(img02.png) -1000px -215px no-repeat;
Mozilla has also developed a new font format (WOFF) specifically for@font-face embedding which is not only leaner in size but has great support from type foundries. There are also rumours that IE9 will support the WOFF format.
DOM additions
The File API allows you to interact with files added within a file input. But the most impressive change is the addition of the file attribute on the dataTransfer method for the DND API which allows you to drag and drop files from the desktop into the browser and use the File API to interact with them.
The Mozilla hacks blog has a great demo showing what can be done with File API by creating a drag and drop image uploader.
There is also another demonstration on the hacks blog by yours truly showing how you can drag and drop font files and have text render in the dropped font.
Firefox 3.6 is a very impressive release with some great new toys for us front-end developers to experiment with. Now we need the other browsers to begin supporting some of the great additions that Mozilla has made.