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 <a title="The CSS calc() function" href="">calc</a>()

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( <em>direction</em> , <em>color-stop</em> )

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 <strong><meter></strong> 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!

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…


  1. Michael Beckwith

    Once they can all be combined into one window, if in the works, I’ll be giving it a go to replace firebug.

    July 20th, 2012 at 23:36

  2. WebUser

    Does anyone know when Firefox developers implement a[download] attribute?
    I try to find a way to name files (blobs) generated by JS code on client side.
    Chromium supports a[download] (HTML 5) and “filesystem:” (File API: Writer).

    July 21st, 2012 at 12:23

    1. Jean-Yves Perrier

      I’ve found to trace of a[download] on bugzilla. Maybe you should file a bug request for it, with your use case.

      July 21st, 2012 at 12:41

      1. WebUser

        I’ve found “Bug 676619 – Implement proposed download attribute “. Thank you for your advice.

        July 21st, 2012 at 13:36

        1. Jean-Yves Perrier

          Thank you, your bugzilla search skill are better than mine!

          July 21st, 2012 at 13:38

  3. pd

    Ctrl+Shift+V conflicts with AdBlock Plus

    July 22nd, 2012 at 00:58

    1. Jean-Yves Perrier

      Have you filled a bug report?

      July 22nd, 2012 at 01:02

    2. jon

      BTW, Ctrl+Shift+V is also used by “Paste without formatting” (bug 410986).

      I am not filed a bug, hopefully someone interested in those native devtools can do it.

      July 22nd, 2012 at 15:20

    3. Thomas S.

      The text is simply wrong, in the shipping browser the shortcut is “Shift-F2”.

      July 23rd, 2012 at 07:30

      1. Jean-Yves Perrier

        Your absolutely right. I fixed the text.

        July 23rd, 2012 at 07:35

  4. Jason Ng

    If radial-gradient is unprefixed, what’s the status of that with the newer syntax and defined size of the circle/ellipse?

    July 23rd, 2012 at 09:40

    1. Jean-Yves Perrier

      That’s the latest syntax with radial-gradient which is implemented unprefixed: with the newer syntax, the ‘at’ keyword and defined size of circle or ellipse. (The two-value syntax is also supported).

      July 23rd, 2012 at 09:53

  5. Binyamin

    Good news on unprefixing Web.
    Unfortunately Firefox 16 release unprefixed “repeating-linear-gradient” with unresolved bug will bring Firefox bad experience and tons of failures.

    July 23rd, 2012 at 13:08

    1. Jean-Yves Perrier

      Both the use cases in this bug, including your double use cases, are working fine for me on Nightly: no crash, no hang, and the gradient(s) displayed. (I unprefixed them, though). Can you also test locally?

      July 23rd, 2012 at 13:52

      1. Binyamin

        Try to test on latest Nightly. Firefox will hang on unprefixed “repeating-linear-gradient” because of “background-size”.

        July 23rd, 2012 at 14:03

        1. Jean-Yves Perrier

          A little but slow, but no hang. The whole page is displayed after 4-5 seconds.

          July 23rd, 2012 at 14:23

          1. Binyamin

            On latest Firefox Nightly it hangs for few minutes on Win7 64-bit and Win8 64-bit. Without “repeating-linear-gradient” and “background-size” it would be responded immediately. For testing case see (, after opening try to click anywhere on Firefox screen.

            July 23rd, 2012 at 22:52

          2. Jean-Yves Perrier

            Yes, you are right; I wasn’t testing with Windows. It looks like it is which is actively worked on and should land before the release. It is Windows-specific.

            July 23rd, 2012 at 22:55

          3. MonkeyHite

            I tested the page and it may not hang Firefox but it sure makes Firefox unusable… it took the page 2 minutes and 12 seconds to comeup then I couldn’t go to any other tabs immediately…it took 30 or more seconds for any command from a mouse or keyboard to take effect. This is a bug. I’m on Firefox 16.01.

            October 12th, 2012 at 10:29

          4. Jean-Yves Perrier

            This is this bug. (This site was reported earlier on this thread)

            October 12th, 2012 at 10:35

          5. Binyamin

            Mozilla has released stable Firefox 16 and has not fixed the reported bugs related to “repeating-linear-gradient” and “background-size” what brigs the time of Firefox bad UX and lots of websites crashes.

            October 13th, 2012 at 14:20

          6. Binyamin

            To handle respond on Firefox 16, I just removed unprefixed property “repeating-linear-gradient” and switched to SVG because of Firefox related bug

            Of course it is not a solution, and Mozilla has deviled unprefixed property without ability to handle it.

            October 13th, 2012 at 15:14

  6. Binyamin

    @Jean-Yves Perrier, try to test on latest Nightly. Firefox will hang on unprefixed “repeating-linear-gradient” because of “background-size”.

    July 23rd, 2012 at 14:03

  7. Jason Ng

    What about color pre-multiplication for color-stops, such as (red, transparent, green)?

    July 23rd, 2012 at 15:28

    1. Jean-Yves Perrier

      You can see progress on this one in that bug:

      July 23rd, 2012 at 15:39

  8. Ishan Oshadi Jayawardene

    Encouraging changes. Really like the new fast-paced release cycle.

    July 24th, 2012 at 06:40

  9. F

    Someone once mentioned that the Developers Tools was extensible for third party developers. If so, is there any documentation for this yet?

    July 24th, 2012 at 10:38

    1. Janet Swisher

      There is draft documentation in process for the Source Editor API:

      July 24th, 2012 at 10:47

  10. kizi

    Great! Is this stuff related to IonMonkey?

    July 26th, 2012 at 15:17

    1. Jean-Yves Perrier

      No, but work on IonMonkey continues.

      July 26th, 2012 at 21:05

  11. Peter

    Is it possible “linear-gradient(to 90deg)” should be just 90deg, without the “to”. As otherwise it doesn’t work in my Firefox (Nightly).

    July 29th, 2012 at 01:16

    1. Jean-Yves Perrier

      It is. It was a typo, the ‘to’ keyword is only needed for keywords, not absolute values.

      July 29th, 2012 at 01:17

  12. CiNiTriQs

    Uniformity is coming close! Now all the other browsers still have to follow ;) I give it another two years at least.

    July 29th, 2012 at 03:11

  13. Pikadude No. 1

    I just tested with -moz-transition – height and width have been animatable since at least Firefox 14.

    August 14th, 2012 at 00:16

    1. Jean-Yves Perrier

      You’re right: the work started some times ago. But until Fx 16, it wasn’t possible to animate them on any element. The last to be added were the SVG elements.

      August 14th, 2012 at 00:26

  14. Pray For Rain

    How about -webkit-transform:rotate(random(30,60)deg); ?I’m still thinking wheather I set wrong code or my explorer could not support it.

    September 28th, 2012 at 23:16

    1. Jean-Yves Perrier

      First, this is with -webkit prefix and would work only in Webkit browsers. Second, random(30,60) doesn’t exist in CSS.

      September 29th, 2012 at 00:03

  15. alex

    Firefox 16 has broken the transform:rotate(xdeg) and as such has ruined 3 sites I have recently made. “great release for developers” … whatever.
    Ever heard of “backwards compatibility”.
    Totally ruined my month…

    November 20th, 2012 at 18:28

    1. Jean-Yves Perrier

      Except for the unprefixing (the prefixed version is still supported), only bug fixes should have altered the behavior of rotate(). If you have found more alteration, you should fill a bug with a use case so that it can be investigated.

      November 21st, 2012 at 00:29

Comments are closed for this article.