Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More

Firefox 53, available today, includes the following key new features and enhancements.

Quantum Compositor Process on Windows

One of the first pieces of Project Quantum, the Compositor Process, has arrived on Windows. Compositors are responsible for flattening all of the various elements on a webpage into a single image to be drawn on the screen. Firefox can now run its compositor in a completely separate process from the main Firefox program, which means that Firefox will keep running even if the compositor crashes—it can simply restart it.

For more details on how this aspect of Project Quantum reduces crash rates for Firefox users, check out Anthony Hughes’ blog post.

Light and Dark Compact Themes

The “compact” themes that debuted with Firefox Developer Edition are now a standard feature of Firefox. Users can find light and dark variants of this space-saving, square-tabbed theme listed under the “Themes” menu in Customize mode.

Screenshot of the new compact themes in Firefox

New WebExtension Features

WebExtensions are browser add-ons that are designed to work safely and efficiently in Firefox, Chrome, Opera, and Edge, while also supporting powerful features unique to Firefox.

In Firefox 53, WebExtensions gained compatibility with several pre-existing Chrome APIs:

  • The browsingData API lets add-ons clear the browser’s cache, cookies, history, downloads, etc. For example, Firefox’s Forget Button could now be implemented as a WebExtension.
  • The identity API allows add-ons to request OAuth2 tokens with the consent of the user, making it easier to sign into services within an add-on.
  • The storage.sync API allows add-ons to save user preferences to Firefox Sync, where it can be shared and synchronized between devices.
  • The webRequest.onBeforeRequest API can now access the request body, in addition to headers.
  • The contextMenus API now supports adding menus to browser actions and page actions.

Firefox 53 also supports the following unique APIs:

New CSS Features: Positioned Masks and Flow-Root

Firefox 53 supports positioned CSS Masks, which allow authors to partially or fully hide visual elements within a webpage. Masks work by overlaying images or other graphics (like linear gradients) that define which regions of an element should be visible, translucent, or transparent.

Masks can be configured to use either luminance or alpha values for occlusion. When the mode is set to luminance, white pixels in the mask correspond to fully visible pixels in the underlying element, while black pixels in the mask render that area completely transparent. The alpha mode simply uses the mask’s own opacity: transparent pixels in the mask cause transparent pixels in the element.

Many masking properties function similarly to the equivalent background-* properties. For example, mask-repeat works just like background-repeat. To learn more about the available properties, see the documentation on MDN.

The specification also defines methods for clipping based on shapes and vector paths. Firefox 53 has partial support for clipping, and complete support is expected in Firefox 54.

Lastly, Firefox also supports the new display: flow-root value, which achieves similar results to clearfix, but using a standard CSS value instead of pseudo-elements or other hacks.

A Better Default Media Experience

Alongside many other UI refinements in Firefox 53, the default <video> and <audio> controls got a new, modern look:

Screenshot of the default HTML5 video controls in Firefox 53

Additionally, Firefox 53 includes brand new anti-annoyance technology: By default, HTML5 media will not autoplay until its tab is first activated. Try it by right-clicking on this link and choosing “Open in New Tab.” Notice that the video doesn’t start until you change to that tab.

64-bit Everywhere

Windows users can now select between 32-bit and 64-bit Firefox during installation:

Screenshot of the Firefox installer on Windows offering a choice of 32-bit or 64-bit

We’ve also removed support for 32-bit Firefox on macOS, and for older Pentium 4 and Opteron CPUs on Linux.

More Info

To find out more about Firefox 53, check out the general Release Notes as well as Firefox 53 for Developers on MDN.

Source: Mozilla Hacks Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More