Fire­fox 16 should be released today, and as well as the new web plat­form fea­tures for devs — the meter ele­ment, Micro­da­ta API, dppx unit, and unpre­fixed calc(), Ani­ma­tions, Gra­di­ents, and Trans­forms — there’s also a very use­ful new tool, the Devel­op­er Tool­bar. Called by Shift + F2 (on the Mac at least), it pro­vides links to Fire­fox’s suite of native devel­op­er tools and a very impres­sive com­mand line, which gives a range of short­cut com­mands to con­trol the tools.

Read the full article

I’ve been real­ly excit­ed about the @supports rule since I first heard the pro­pos­al for it, and now that an imple­men­ta­tion has land­ed in Fire­fox Night­ly (and is on it’s way in Opera) my excite­ment has only increased. You can think of @supports as a native imple­men­ta­tion of Mod­ern­izr — and hope­ful­ly that descrip­tion is enough to get you excit­ed too.

Read the full article

The lat­est Work­ing Draft of the CSS3 Image Val­ues and Replaced Con­tent mod­ule was released last month, and con­tains some changes to the gra­di­ent syn­tax­es — for what you’d hope would be the last time. The updat­ed syn­tax­es are a lit­tle more log­i­cal, but offer the same flexibility.

Fire­fox 10, which is due for release in a few weeks, will see an imple­men­ta­tion of the updat­ed linear-gradient and repeating-linear-gradient func­tions, so in this arti­cle I’ll take a look at those, and write a fol­low-up when the radi­al gra­di­ent updates are avail­able for use. Update: Here’s the com­pan­ion arti­cle on radi­al gra­di­ents.

Read the full article

The lat­est night­ly releas­es of what will become Fire­fox 4 have imple­ment­ed a cou­ple of exper­i­men­tal new CSS fea­tures. The -moz-calc func­tion allows cal­cu­la­tions on length val­ues, and the :-moz-any selec­tor per­mits group­ing of sim­ple selectors.

If you have a night­ly build of Fire­fox you can see a lit­tle demo I’ve put togeth­er of them in action.

Read the full article

Site­point’s Web Design blog fea­tured an arti­cle this week called Cre­ate A Stu­dio Style Back­drop In Pho­to­shop, which pro­vides instruc­tions for mak­ing a glossy, reflec­tive sur­face effect, sim­i­lar to what you often see in adverts.

As the title makes clear, the tuto­r­i­al is for cre­at­ing the effect in Pho­to­shop — but real­ly, the same effect is fair­ly eas­i­ly achiev­able with some bleed­ing-edge CSS. That said, it won’t work in every brows­er, so cur­rent­ly it’s just a proof-of-con­cept piece.

Read the full article

Last month the W3C released a work­ing draft of the File API, which defines the basic rep­re­sen­ta­tions for files, lists of files, errors raised by access to files, and pro­gram­mat­ic ways to read files. The Fire­fox team have already imple­ment­ed much of it, and have released a series of impres­sive demos on hacks.mozilla.org, which you can see if you have a recent beta of Fire­fox 3.6 (or a night­ly trunk build).

The four demos shown to date dis­play dif­fer­ent (although relat­ed) aspects of the API, show­ing first mul­ti­ple file uploads, then a drag and drop upload inter­face, next adding progress infor­ma­tion (although this does­n’t work for me), then read­ing EXIF data from a JPEG image. You can imag­ine how these com­bined would be used for native drag and drop upload­ing to Flickr, for example.

The File API plays a big part in inte­grat­ing the brows­er more tight­ly with the OS, par­tic­u­lar­ly when com­bined with the drag and drop func­tion­al­i­ty, and I’m sure it’s only a mat­ter of time until the oth­er browsers imple­ment this. Con­grat­u­la­tions to the Fire­fox team for their work on this, and hacks.mozilla.org for some great demos.