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|
||Using CSS Animations|
||Using CSS Transitions|
||Using CSS Transforms|
|CSS3 Image Values||
||Using CSS Gradients|
|CSS3 Values & Units||
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:
So here again, you need to change
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
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
- We unprefixed the Battery API.
- We unprefixed the Vibration API.
- We improved our media queries support by adding support for the
- The CSS properties
widthare now animatable.
- The CSS animations can be “reversed“: the
alternate-reversekeywords have been added.
- Support for direct proxies
- Support for the
- Improvement of
Number, supporting now
- Improvement of
Keyboard(still prefixed as
mozKeyboard), now supporting
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.
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.
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.