Firefox 16 should be released today, and as well as the new web platform features for devs — the meter element, Microdata API, dppx unit, and unprefixed calc(), Animations, Gradients, and Transforms — there’s also a very useful new tool, the Developer Toolbar. Called by Shift + F2 (on the Mac at least), it provides links to Firefox’s suite of native developer tools and a very impressive command line, which gives a range of shortcut commands to control the tools.
Read the full article
I’ve been really excited about the @supports rule since I first heard the proposal for it, and now that an implementation has landed in Firefox Nightly (and is on it’s way in Opera) my excitement has only increased. You can think of @supports as a native implementation of Modernizr — and hopefully that description is enough to get you excited too.
Read the full article
The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. The updated syntaxes are a little more logical, but offer the same flexibility.
Firefox 10, which is due for release in a few weeks, will see an implementation of the updated linear-gradient and repeating-linear-gradient functions, so in this article I’ll take a look at those, and write a follow-up when the radial gradient updates are available for use. Update: Here’s the companion article on radial gradients.
Read the full article
The latest nightly releases of what will become Firefox 4 have implemented a couple of experimental new CSS features. The -moz-calc function allows calculations on length values, and the :-moz-any selector permits grouping of simple selectors.
If you have a nightly build of Firefox you can see a little demo I’ve put together of them in action.
Read the full article
Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.
As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.
Read the full article
Last month the W3C released a working draft of the File API, which defines the basic representations for files, lists of files, errors raised by access to files, and programmatic ways to read files
. The Firefox team have already implemented much of it, and have released a series of impressive demos on hacks.mozilla.org, which you can see if you have a recent beta of Firefox 3.6 (or a nightly trunk build).
The four demos shown to date display different (although related) aspects of the API, showing first multiple file uploads, then a drag and drop upload interface, next adding progress information (although this doesn’t work for me), then reading EXIF data from a JPEG image. You can imagine how these combined would be used for native drag and drop uploading to Flickr, for example.
The File API plays a big part in integrating the browser more tightly with the OS, particularly when combined with the drag and drop functionality, and I’m sure it’s only a matter of time until the other browsers implement this. Congratulations to the Firefox team for their work on this, and hacks.mozilla.org for some great demos.