By
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="https://developer.mozilla.org/en/CSS/calc">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:
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:
→ 
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
dppxunit. - The CSS properties
heightandwidthare now animatable. - The CSS animations can be “reversed“: the
reverseandalternate-reversekeywords 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‘sspreadoperator - Improvement of
Number, supporting nowtoInteger(),isInteger()andisFinite()
- Improvement of
Keyboard(still prefixed asmozKeyboard), now supportingsetSelectedOption(),setValue()andonfocuschange().
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
- We slightly changed our UA string not to display the 3rd digit of our versioning system.
- Incremental GC, a major part in our effort to revamp our Garbage Collector, is now enabled by default.
- Opus, a low-latency codec aimed at real-time communication, is enabled by default.
- By default, we do not accept anymore MD5 hashes in X.509 certificates.
about:memoryis now displaying memory usage ‘per tab’.- We tweaked the context menu, removing the ‘Send link…’ item and combining the ‘Stop’ and ‘Reload’ ones.
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!
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.
39 comments