Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).
HiDPI support
We’re happy to say that ico/icns with multiple images are now supported: the highest resolution icon is now used on HiDPI/Retina displays.
Favicon implementation is described in bug 828508 and ico/icns is described in bug 419588.
Performance improvements/Snappy:
Numerous performance improvements have been made, such as faster startup, better scrolling on touchpads and smoother animations.
The most important improvement, however, is probably multithreaded image decoder. The result should be faster page loads and tab switching. All the nitty-gritty detalis are described in bug 716140.
HTML5
When it comes to the world of HTML5 & friends, we have some good additional support:
<input type=”range”>
We now support the <input type="range">
element in forms. To style it, you can use the ::-moz-range-progress
:
::-moz-range-progress {
background: #f00;
}
You can see this <input type=”range”> demo in action on jsFiddle.
HTML5 notifications
HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification:
function authorizeNotification() {
Notification.requestPermission(function(perm) {
alert(perm);
});
}
function showNotification() {
var notification = new Notification("This is a title", {
dir: "auto",
lang: "",
body: "This is a notification body",
tag: "sometag",
});
}
See the HTML5 notification demo in action on jsFiddle.
WebAudio API activated by default
WebAudio API has been activated by default in Firefox Nightly. Testers welcome, though there are still work to be done before it can be released.
JavaScript
Parallel JS
The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.
asm.js
We’re happy to say that asm.js is now in Firefox, scheduled to be released in Firefox 22! Luke Wagner has written more about it in asm.js in Firefox Nightly.
ES6 Arrow function syntax
We now support the ES6 Arrow function syntax
let square = x => x*x;
console.log(square(3));
CSS
@supports activated by default
We plan on releasing this with Firefox 22. More about @supports on MDN.
min-width and min-height ‘auto’ keyword
min-width
and min-height 'auto'
keyword is no more supported. It has been removed from CSS3 Flexbox. More about that in bug 848539.
CSS Flexbox has been re-enabled
Happy to let you know that CSS Flexbox has been re-enabled by default in Firefox 22, which is currently in Firefox Aurora!
About Robert Nyman [Editor emeritus]
Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.
More articles by Robert Nyman [Editor emeritus]…
About Jean-Yves Perrier
Jean-Yves is a program manager in the Developer Outreach team at Mozilla. Previous he was an MDN Technical Writer specialized in Web platform technologies (HTML, CSS, APIs), and for several years the MDN Content Lead.
More articles by Jean-Yves Perrier…
About Paul Rouget
Paul is a Firefox developer.
25 comments