Articles by Jean-Yves Perrier

Sort by:


  1. Firefox goes 2-digit, time to check your UA sniffing scripts

    We all know it: UA-based browser detection is bad, the right way is feature-detection. Regardless, legacy code relies upon UA sniffing and may need to be updated for Firefox 10’s release.

    Even if it looks simple, UA parsing has proven to be a headache for numerous script authors. Though the structure of an UA is defined in the HTTP specification, the way relevant information is conveyed varies from one vendor to another. Also, the information you want to extract from it is not always the same: sometimes you want to know the browser (Firefox, SeaMonkey, Safari, Chrome, IE, Opera…), but most of the time you want to know the engine that powers them (Gecko, Webkit, Trident,…). You also need to get the version of the browser or the engine.

    Old scripts often made some undue assumptions. Some are assuming that browser version numbers will never reach 10… This is not the case: Opera and Chrome have already crossed this landmark long ago, Firefox will reach it next week and IE soon after.

    A few examples of Firefox UAs that your scripts should allow:

    • Regular Firefox version: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0
    • Nightly and Aurora Firefox versions: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a1) Gecko/20120122 Firefox/12.0a1
    • Chemspill Firefox version (three numbers) Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1

    So, it is the last moment to check your UA-based browser detection code before your site goes havoc!

    Last chance to check

    Do it right now, in two weeks it would be too late.

    What to do?

    1. Code inspection: check your code to see if there is some UA-based browser detection code. If so, check if it handles multi-digit versions. (At the same time you could check if it is useful at all. Some old UA-detection code has not worked in ages, or try to go around problems fixed since years in browser…)
    2. Library inspection: lots of libraries perform UA-based browser detection. If you are using any of them, check if it still is working with a version of Firefox with 2 digits. If not, notify the author of the lib and open a bug on bugzilla so that we can help others as all their customers are likely to suffer from the same problem.
    3. Check if your site is working with the next Firefox version: download the Beta release of Firefox 10 (you can run several versions of Firefox simultaneously) It is always a good idea to use the beta, or even the aurora, version of Firefox if you are maintaining a site: you’ll discover incompatibilities earlier and will get time to fix them before your users start complaining. We are doing our best to prevent problems, but sometimes old code rely on incorrect behavior and stop working even when we are only fixing bugs.
    4. Test other sites :-). Use the beta or aurora version of Firefox and surf the web. When you hit a UA-related problem report it with bugzilla. Give us as much info as possible like the importance of the site in your country and if you have conducted any action yourself. That way our evangelism team will be able to prioritize work adequately.

    Finally, you should plan to get rid of these UA-based browser detection mechanism. If you can’t — and I know it isn’t always possible — I would be glad to know why: so please let us know in the comments below.

    Now it is time to check your sites :-)

    Thank you very much for your help.

  2. Aurora 16 is out — Unprefixing time !

    Web developers, it is time to celebrate! In the upcoming Firefox 16, which reached the Aurora status today, a major enhancement is the unprefixing of several stable CSS features. Other notable features of interest to Web developers include several more HTML5-related APIs, better accessibility on Mac OS, and improvements to Firefox Developer Tools.


    So which CSS features are unprefixed?

    Specification Properties, functional notations, and at-rules More information
    CSS3 Animations animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes Using CSS Animations
    CSS3 Transitions transition, transition-property, transition-delay, transition-duration, transition-timing-function Using CSS Transitions
    CSS3 Transforms transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin Using CSS Transforms
    CSS3 Image Values linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient() Using CSS Gradients
    CSS3 Values & Units calc()

    Pay attention to the gradient syntax

    While the syntax of CSS animations, transitions and transforms has not changed lately, that is not the case of the CSS gradients syntax, which is significantly different than in most prefixed implementations.

    The definitive syntax for linear gradients is :

    <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )
    <side-or-corner> = [left | right] || [top | bottom]

    If we break it down, its structure is :

    linear-gradient( direction , color-stop )

    As the color-stop syntax hasn’t evolved lately, the direction parameter is where most of the latest changes happened.

    The direction parameter can be defined either using a CSS <angle>, or using the to keyword followed by one or two keywords describing the side or the corner.

    That’s the major change! This to keyword wasn’t there before and it reverses the direction that was use previously: -prefix-linear-gradient( top left ) becomes linear-gradient( to bottom right ).

    Also the <angle> changed: before, 0deg pointed to the right; now it points, consistently with other angles in the CSS spec, to the top. Like this:

    0deg points to the top, 90deg to the right, 180deg to the bottom, and 270deg to the left

    So here again, you need to change -prefix-linear-gradient(0deg) to linear-gradient(90deg). Failure to adapt the angle will lead to the gradient to be oriented differently, like this:

    An horizontal gradient, blue at the far left, white at the far right.A vertical gradient, blue at the top, white at the bottom

    Similar changes have been made to the radial gradient syntax, with a newly introduced at keyword.

    More HTML5 & friends goodies

    Unprefixing mature CSS features is not the only improvement in the area of supporting standards:

    • IndexedDB has reached Candidate Recommendation status and has been unprefixed too. This is amazing.
    • Support for the HTML5 Microdata API landed.
    • Support for the HTML5 <meter> element landed.
    • We unprefixed the Battery API.
    • We unprefixed the Vibration API.
    • We improved our media queries support by adding support for the dppx unit.
    • The CSS properties height and width are now animatable.
    • The CSS animations can be “reversed“:  the reverse and alternate-reverse keywords have been added.
    • Our implementation of JavaScript improved with several new features in Harmony (the maybe future EcmaScript 6):
      • Support for direct proxies
      • Support for the Array‘s spread operator
      • Improvement of Number, supporting now toInteger(), isInteger() and isFinite()
    • Improvement of Keyboard (still prefixed as mozKeyboard), now supporting setSelectedOption(), setValue() and onfocuschange().


    A giant step has been done in making Firefox more accessible. Support for VoiceOver on Mac OS has landed. It was the last platform where our accessibility features where severely behind. This is very exciting for all people needing such features on the Mac. More information.

    Developers Tools

    Last but not least, we continued to improved our developer tools!

    Now you can toggle a developer toolbar: go to Tools > Web Developer > Developer Toolbar, or press Shift-F2. The toolbar itself looks like this:

    The toolbar has a command line interface and also nice buttons to the right to quickly reach useful tools. The command line interface is easy to expand and more commands are expected in the future. Typing help in it displays the supported commands.

    The Web Console also has been improved and displays now a nifty error count.

    Finally our Scratchpad gained a list of recently opened files. Always convenient.

    Other notable changes

    See more details in the release notes and in Firefox 16 for developers.


    Firefox 16 is on the way to being a very strong release for Web developers, both on the support of standards, and with the nice improvements in our tools, maturing quickly. In the future, Web sites will be easier to do and more powerful!

  3. Aurora 14 is out! What's new in it?

    We have just released Firefox Aurora 14, which includes a number of improvements. If all goes well, these features should be released in 12 weeks as part of Firefox 14.


    There are a few of things we’d like to shine some extra light on here:

    • Native Fullscreen Support in Mac OS X 10.7 “Lion”: Firefox can now use the native full-screen mode and button. It animates and behaves properly in that mode, like any other well-integrated application.
    • Great news for gamers! The Pointer Lock API, sometimes called the Mouse Lock API, lets games better control the mouse, by removing the pointer and letting the application capture and handle the mouse move coordinates directly.
    • The four default ways to search — using the search bar, the address bar, the contextual menu, or the home page, now all use the Google https search service in Aurora. This increase the security of your searches.
    • The dev tools now allow easily inspecting pseudo-classes states: when hovering over an element with the dev tools activated, the contextual menu now lists the different states of the element, like :hover, :active, and :focus. When selecting one of these items, the element is locked in the associated state and can be inspected. That feature was already there in Aurora 13, but the interface to access it is now very convenient!
      The menu allowing the pseudo-class state to be locked on an element
      The element with the :hover pseudo-class locked

    List of improvements

    Here is a (more or less) complete list of the improvements.


    • New keyboard shortcuts have been added to the Source Editor JS module (used by the Scratchpad or the Style Editor) to quickly jump to the code block start and end.
    • Still in the Source Editor module, it is now possible to add or remove a comment on a line or the current selection with one keystroke.
    • Beside the new pseudo-class inspector, several improvements have been made to the infobar which has now an inspect button to the left and a node menu to the right (for example, it may be used to set the pseudo-class state on the node!)




    User Interface

    • The popup bubble containing a link URL that appears on the bottom of the page when hovering over a link is now longer when the URL doesn’t fit in it.
    • As part of the Australis theme evolution project, the navigation bar buttons have been modified (on Windows only).
    • The identity block has been redesigned. The favicon has been changed to show an icon describing the connection used:
      • The page is served unencrypted (http).
        Nav bar with http (unencrypted)
      • The page is served encrypted (via https) but some of its content comes from unencrypted servers.
        Nav bar with https (and unencrypted content)
      • The page and its content is served encrypted (and the server uses a CV certificate).
        Nav bar with https and CV certificate
      • The page and its content is served encrypted (and the server uses an EV certificate).
        Nav bar with https and EV certificate



    • Both the Internet Explorer and Safari migrators have been rewritten in JavaScript. Using asynchronous I/O, they don’t block the browser when they run and it improves their maintainability. This has been done as part of the Snappy project.
    • On Linux, the $LANG system variable is now used when not able to locate a given dictionary in another way. Useful for system-wide installed dictionaries.
    • For add-ons writers, the js-ctypes library has been extended. Variadic ctypes functions — that is, support for functions with a variable number of arguments — have been added.
    • Several bugs in our WebGL implementation have been fixed (and workarounds for some common driver bugs added). We are close to WebGL 1.0.1 conformance, but your help is still needed.
    • Extra flexibility has been added to the Garbage Collector (GC): it could previously be applied on a single compartment or on all compartments. Now it can also be applied on a set of compartments. This will let it be launched in more cases in the future, leading to a finer control of memory and of GC pauses.

    Note: pdf.js and the new panel-based Download Manager, though they landed on Nightly, have not been lifted to Aurora 14 as they need further polishing. Similarly, support of GStreamer for videos, though it landed last week, has not been activated yet.

  4. HiDPI support, HTML5 notifications, Parallel JS, asm.js and more – Firefox Development Highlights

    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.


    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;
    <input type="range">

    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) {
    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.


    Parallel JS

    The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.


    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;


    @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!

  5. Helping with the MDN: what about linking to us?

    We are working toward writing the best documentation about the Open Web. That’s a huge task but, day by day, our docs improve. Javascript is already considered an excellent resource, our CSS reference is now in pretty good shape, and a lot of work goes into our HTML, SVG and MathML documentation.

    Our Open Web documentation is aimed at Web developers: we want it to be useful for you. To achieve this, we follow several principles:

    • The MDN Open Web documentation must be browser-agnostic. As a Web developer, you are writing Web sites for all. You aren’t designing for a specific browser. Gecko-only documentation would be next to useless. That’s why we started about one year ago the work on making our documentation independent of the browser. We are far from being finished but huge progress has been made.
    • Our documentation must be practical. We are documenting today’s Web, not the one of yesterday or tomorrow. We base our articles on what the standard says, whether it’s complete or still a work in progress, and we point out the differences in implementation, if any.
    • Our documentation is tailored for developers of different levels. We propose tutorials for beginners, more descriptive articles for intermediate users and reference articles for seasoned developers.
    • We keep the documentation up-to-date. That’s one of our most challenging goals: outdated articles are useless. So we follow standards development daily, as well as implementation improvements. With the fast release cycles adopted by several browser vendors, standards support improves quickly, but also our amount of work. (We are happy with that!)

    Thanks to the hard work based on these principles, we see a steady increase in number of readers. For us, that’s the best reward.

    Helping us

    We regularly get questions about how you can help us. Writing new content (during a doc sprint or any other time), correcting typos, writing examples or translating articles are great ways to improve the documentation. But not everybody has the time or the knowledge.

    You can also help us with link love: Link to us from your blogs, both in-context and in the sidebar mention. This will let us get more attention, attract more editors and will help us reach our goal to provide accurate and complete documentation about the Open Web.

    To help you, we have now written a small linking guide which gives you hints and information about how to link to MDN in a pertinent way for your readers.

    So, don’t hesitate to link to our technology entry pages (like the CSS page) or to very specific pages. But don’t forget the basic rule: you are adding links for your users, the links you choose should help them quickly find accurate information. Because your readers are the important people, not us, not you.

    One way to make this into an easy habit: each time you write a blog post about an Open Web technology, take five minutes to consider if adding one or the other link to the MDN would improve your article. If it does, please add those links!

    That way, together, we will be able to improve the Open Web documentation out there. Thank you very much for your support.