Firefox 96 enhances CSS, Canvas support for developers

Mozilla has released Firefox 96, an update to the browser that provides support for new CSS properties and functions, and adds image encoder support for the WebP format to the Canvas API.

Firefox 96 was published to release channel users on January 11. For CSS, Firefox now supports the color-scheme property, which allows an element to indicate which color schemes in which it can be comfortably rendered. Also, the counter-reset property now supports the reversed() function for building reversed CSS counters, which are intended for numbering elements in descending order. The reversed() functon can be used with the list-item counter to number ordered lists in reverse order.

Additionally for CSS, the hwb() function for use as a CSS color value has been implemented. The hwb() function describes a color according to its hue, whiteness, and blackness.

Firefox’s Canvas API for drawing graphics, meanwhile, gains image encoder support for the WebP image format. This allows canvas elements to export content as WebP data when using methods such as HTMLCanvasElement.toDataURL() and HTMLCanvasElement.toBlob().

Mozilla’s bulletin on Firefox 96 for developers cites no notable changes pertaining to either HTML or JavaScript. But other changes relevant to developers include the following:

• Cookies sent from the same domain but using different schemes are now considered to be from different sites with respect to the cookie SameSite directive. Also, cookies are assumed to be implicitly set SameSite=Lax if the SameSite attribute is not specified, and cookies with SameSite=None require a secure context.
• The canShare() API is now supported on Android, allowing code to check whether navigator.share() will succeed for particular targets. Also, the experimental Web Locks API is enabled by default, allowing web apps running in multiple tabs or workers to coordinate use of resources.
• For the DOM, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver" rel="nofollow">IntersectionObserver()</a> constructor now sets the default rootMargin if an empty string is passed in the associated parameter option, rather than throwing an exception.

Elsewhere in Firefox 96, improvements have been made in noise suppression, auto-gain control, and echo-cancellation to provide a better overall sound experience. Main-thread load has been reduced as well. For security, Firefox will now enforce Cookie Policy: Same-Site=lax by default to defend against cross-site request forgery attacks.