Mozilla

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

Accessiblity

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.

Conclusion

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!

39 comments

Comments are now closed.

  1. Michael Beckwith wrote on July 20th, 2012 at 23:36:

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

  2. WebUser wrote on July 21st, 2012 at 12:23:

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

    1. Jean-Yves Perrier wrote on July 21st, 2012 at 12:41:

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

      1. WebUser wrote on July 21st, 2012 at 13:36:

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

        1. Jean-Yves Perrier wrote on July 21st, 2012 at 13:38:

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

  3. pd wrote on July 22nd, 2012 at 00:58:

    Ctrl+Shift+V conflicts with AdBlock Plus

    1. Jean-Yves Perrier wrote on July 22nd, 2012 at 01:02:

      Have you filled a bug report?

    2. jon wrote on July 22nd, 2012 at 15:20:

      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.

    3. Thomas S. wrote on July 23rd, 2012 at 07:30:

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

      1. Jean-Yves Perrier wrote on July 23rd, 2012 at 07:35:

        Your absolutely right. I fixed the text.

  4. Jason Ng wrote on July 23rd, 2012 at 09:40:

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

    1. Jean-Yves Perrier wrote on July 23rd, 2012 at 09:53:

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

  5. Binyamin wrote on July 23rd, 2012 at 13:08:

    Good news on unprefixing Web.
    Unfortunately Firefox 16 release unprefixed “repeating-linear-gradient” with unresolved bug https://bugzilla.mozilla.org/show_bug.cgi?id=644444 will bring Firefox bad experience and tons of failures.

    1. Jean-Yves Perrier wrote on July 23rd, 2012 at 13:52:

      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?

      1. Binyamin wrote on July 23rd, 2012 at 14:03:

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

        1. Jean-Yves Perrier wrote on July 23rd, 2012 at 14:23:

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

          1. Binyamin wrote on July 23rd, 2012 at 22:52:

            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 http://jsfiddle.net/laukstein/zuCbG/show/ (http://jsfiddle.net/laukstein/zuCbG/), after opening try to click anywhere on Firefox screen.

          2. Jean-Yves Perrier wrote on July 23rd, 2012 at 22:55:

            Yes, you are right; I wasn’t testing with Windows. It looks like it is https://bugzilla.mozilla.org/show_bug.cgi?id=768775 which is actively worked on and should land before the release. It is Windows-specific.

          3. MonkeyHite wrote on October 12th, 2012 at 10:29:

            I tested the page http://laukstein.com 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.

          4. Jean-Yves Perrier wrote on October 12th, 2012 at 10:35:

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

          5. Binyamin wrote on October 13th, 2012 at 14:20:

            Mozilla has released stable Firefox 16 http://www.mozilla.org/en-US/firefox/16.0.1/releasenotes/ 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.

          6. Binyamin wrote on October 13th, 2012 at 15:14:

            To handle laukstein.com respond on Firefox 16, I just removed unprefixed property “repeating-linear-gradient” and switched to SVG because of Firefox related bug https://plus.google.com/u/0/111710573164225089703/posts/57wiL9vNMBF

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

  6. Binyamin wrote on July 23rd, 2012 at 14:03:

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

  7. Jason Ng wrote on July 23rd, 2012 at 15:28:

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

    1. Jean-Yves Perrier wrote on July 23rd, 2012 at 15:39:

      You can see progress on this one in that bug: https://bugzilla.mozilla.org/show_bug.cgi?id=591600

  8. Ishan Oshadi Jayawardene wrote on July 24th, 2012 at 06:40:

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

  9. F wrote on July 24th, 2012 at 10:38:

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

    1. Janet Swisher wrote on July 24th, 2012 at 10:47:

      There is draft documentation in process for the Source Editor API: https://developer.mozilla.org/en/JavaScript_code_modules/source-editor.jsm

  10. kizi wrote on July 26th, 2012 at 15:17:

    Great! Is this stuff related to IonMonkey?

    1. Jean-Yves Perrier wrote on July 26th, 2012 at 21:05:

      No, but work on IonMonkey continues.

  11. Peter wrote on July 29th, 2012 at 01:16:

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

    1. Jean-Yves Perrier wrote on July 29th, 2012 at 01:17:

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

  12. CiNiTriQs wrote on July 29th, 2012 at 03:11:

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

  13. Pikadude No. 1 wrote on August 14th, 2012 at 00:16:

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

    1. Jean-Yves Perrier wrote on August 14th, 2012 at 00:26:

      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.

  14. Pray For Rain wrote on September 28th, 2012 at 23:16:

    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.

    1. Jean-Yves Perrier wrote on September 29th, 2012 at 00:03:

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

  15. alex wrote on November 20th, 2012 at 18:28:

    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…

    1. Jean-Yves Perrier wrote on November 21st, 2012 at 00:29:

      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.

Comments are closed for this article.