Today, three months after the release of Firefox 4, we release Firefox 5, thanks to our new development cycle. Developers will be able to create richer animations using CSS3 Animations. This release comes with various improvements, performance optimization and bug fixes.
CSS3 Animations
CSS Animations (check out the documentation) are a new way to create animations using CSS. Like CSS Transitions, they are efficient and run smoothly (see David Baron’s article), and the developers have a better controls over the intermediate steps (keyframes), and can now create much more complex animations.
Notable changes
- You can now pass an image as a parameter to createImageDatato copy its dimensions.
- setTimeout and setInterval will only be able to execute callbacks once per second in inactive tabs. This follows the behavior of requestAnimationFrame to save CPU and power consumption.
Other Bug Fixes and Performance Improvements:
HTML
- All HTML elements now have the
<a class="new" href="https://developer.mozilla.org/en/DOM/element.accessKey">accessKey</a>
attribute, as well as the<a href="https://developer.mozilla.org/en/DOM/element.blur">blur()</a>
,<a href="https://developer.mozilla.org/en/DOM/element.click">click()</a>
, and<a href="https://developer.mozilla.org/en/DOM/element.focus">focus()</a>
methods. These are specified in the<a href="https://developer.mozilla.org/en/DOM/HTMLElement">HTMLElement</a>
interface. - In order to comply with the HTML5 specification, support for the UTF-7 and UTF-32 character sets has been removed.
- When in quirks mode, empty
<a href="https://developer.mozilla.org/en/HTML/Element/map"><map></a>
s are no longer skipped over in favor of non-empty ones when matching. See the Gecko notes on the<a href="https://developer.mozilla.org/en/HTML/Element/map"><map></a>
element for details. - Firefox mobile on Android now supports WOFF fonts for
<a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>
. - WebGL no longer loads textures from domains other than the originating domain, as a security measure.
Canvas improvements
- The
<a href="https://developer.mozilla.org/en/HTML/Element/canvas"><canvas></a>
2D drawing context now supports specifying anImageData
object as the input to thecreateImageData()
method; this creates a newImageData
object initialized with the same dimensions as the specified object, but still with all pixels preset to transparent black. - Specifying non-finite values when adding color stops through a call to the
<a href="https://developer.mozilla.org/en/DOM/CanvasGradient">CanvasGradient</a>
methodaddColorStop()
now correctly throwsINDEX_SIZE_ERR
instead ofSYNTAX_ERR
. - The
<a href="https://developer.mozilla.org/en/DOM/HTMLCanvasElement">HTMLCanvasElement</a>
methodtoDataURL()
now correctly lower-cases the specified MIME type before matching. getImageData()
now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.drawImage()
andcreateImageData()
now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.- Specifying non-finite values when calling
createImageData()
now properly throws aNOT_SUPPORTED_ERR
exception. createImageData()
andgetImageData()
now correctly return at least one pixel’s worth of image data if a rectangle smaller than one pixel is specified.- Specifying a negative radius when calling
createRadialGradient()
now correctly throwsINDEX_SIZE_ERR
. - Specifying a
null
orundefined
image when callingcreatePattern()
ordrawImage()
now correctly throws aTYPE_MISMATCH_ERR
exception. - Specifying invalid values for
globalAlpha
no longer throws aSYNTAX_ERR
exception; these are now correctly silently ignored. - Specifying invalid values when calling
translate()
,transform()
,rect()
,clearRect()
,fillRect()
,strokeRect()
,lineTo()
,moveTo()
,quadraticCurveTo()
, orarc()
no longer throws an exception; these calls are now correctly silently ignored. - Setting the value of
shadowOffsetX
,shadowOffsetY
, orshadowBlur
to an invalid value is now silently ignored. - Setting the value of
rotate
orscale
to an invalid value is now silently ignored.
CSS
- Support for CSS animations has been added, using the
-moz-
prefix for now.
DOM
- The
<a href="https://developer.mozilla.org/en/DOM/selection">selection</a>
object’smodify()
method has been changed so that the “word” selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit’s implementation. - The
<a href="https://developer.mozilla.org/en/DOM/window.setTimeout">window.setTimeout()</a>
method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to). - Similarly, the
<a href="https://developer.mozilla.org/en/DOM/window.setInterval">window.setInterval()</a>
method now clamps to no more than one interval per second in inactive tabs. XMLHttpRequest
now supports theloadend
event for progress listeners. This is sent after any transfer is finished (that is, after theabort
,error
, orload
event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer.- The
<a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a>
and, by extension, the<a href="https://developer.mozilla.org/en/DOM/File">File</a>
objects’slice()
method has been removed and replaced with a new, proposed syntax that makes it more consistent withArray.slice()
andString.slice()
methods in JavaScript. This method is namedmozSlice()
for now. - The value of
<a href="https://developer.mozilla.org/en/DOM/window.navigator.language">window.navigator.language</a>
is now determined by looking at the value of theAccept-Language
HTTP header.
JavaScript
- Regular expressions are no longer callable as if they were functions; this change has been made in concert with the WebKit team to ensure compatibility (see WebKit bug 28285).
- The
Function.prototype.isGenerator()
method is now supported; this lets you determine if a function is a generator.
SVG
- The
<a href="https://developer.mozilla.org/en/SVG/Attribute/class">class</a>
SVG attribute can now be animated. - The following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a
length
property indicating the number of items in the lists:<a class="new" href="https://developer.mozilla.org/en/DOM/SVGLengthList">SVGLengthList</a>
,<a class="new" href="https://developer.mozilla.org/en/DOM/SVGNumberList">SVGNumberList</a>
,<a class="new" href="https://developer.mozilla.org/en/DOM/SVGPathSegList">SVGPathSegList</a>
, and<a class="new" href="https://developer.mozilla.org/en/DOM/SVGPointList">SVGPointList</a>
.
HTTP
- Firefox no longer sends the “Keep-Alive” HTTP header; we weren’t formatting it correctly, and it was redundant since we were also sending the
<a href="https://developer.mozilla.org/en/HTTP/Headers#Connection">Connection:</a>
or<a href="https://developer.mozilla.org/en/HTTP/Headers#Proxy-Connection">Proxy-Connection:</a>
header with the value “keep-alive” anyway. - The HTTP transaction model has been updated to be more intelligent about reusing connections in the persistent connection pool; instead of treating the pool as a FIFO queue, Necko now attempts to sort the pool with connections with the largest congestion window (CWND) first. This can reduce the round-trip time (RTT) of HTTP transactions by avoiding the need to grow connections’ windows in many cases.
- Firefox now handles the Content-Disposition HTTP response header more effectively if both the
filename
andfilename*
parameters are provided; it looks through all provided names, using thefilename*
parameter if one is available, even if afilename
parameter is included first. Previously, the first matching parameter would be used, thereby preventing a more appropriate name from being used. See bug 588781 .
MathML
- Support for embellished operators
Developer tools
- The Web Console’s
Console
object now has adebug()
method, which is an alias for itslog()
method; this improves compatibility with certain existing sites.
About louisremi
Developer Relations Team, long time jQuery contributor and Open Web enthusiast. @louis_remi
120 comments