Firefox 67: Dark Mode CSS, WebRender, and more

Home Dev Firefox 67: Dark Mode CSS, WebRender, and more

Firefox 67 is available today, bringing a faster and better JavaScript debugger, support for CSS prefers-color-scheme media queries, and the initial debut of WebRender in stable Firefox.

These are just the highlights. For complete information, see:

CSS Color Scheme Queries

New in Firefox 67, the prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android. As an example of what this looks like in the real world, Bugzilla uses prefers-color-scheme to trigger a brand new dark theme if the user has set that preference.

A screenshot of Bugzilla showing both light and dark themes

The prefers-color-scheme media feature is currently supported in Firefox and Safari, with support in Chrome expected later this year.

Additionally, the revert keyword is now supported, making it possible to revert one or more CSS property values back to their original values specified by the user agent’s default styles (or by a custom user stylesheet if one is set). Defined in Cascading and Inheritance Level 4, revert is also supported by Safari.

WebRender’s Stable Debut

Nearly four years ago we started work on a new rendering architecture for Firefox with the goal of better utilizing modern graphics hardware. Today, we’re beginning to gradually enable WebRender for users on Windows 10 with qualified hardware. This marks the first time that WebRender has been enabled outside of Nightly and Beta builds of Firefox, and we hope to expand the supported platforms in future releases.

A drawing of a computer chip with 4 CPU cores and a GPU

You can read more about WebRender in The whole web at maximum FPS: How WebRender gets rid of jank.

More Capable DevTools

Firefox 67 and 68 Developer Edition bring enormous improvements to Firefox’s JavaScript Debugger. Discover faster load times, amazing support for source maps, more predictable breakpoints, brand new logpoints, and much more.

The DevTools Debugger inspecting an application that has spawned several WebWorker threads

We’ve collected the Debugger improvements in their own article: Faster, Smarter JavaScript Debugging in Firefox DevTools.

In addition to the Debugger, the Web Console saw numerous updates, including greater keyboard accessibility and support for importing modules into the current page.

We’ve also removed or deprecated a few seldom-used and experimental tools, including the Canvas Debugger, Shader Editor, Web Audio Inspector, and WebIDE.

Browser Features

Side-by-Side Profiles

Firefox now defaults to using different profiles for each installed version, making it easier than ever to run multiple copies of Firefox side-by-side.

The macOS dock showing Firefox, Firefox Developer Edition, and Firefox Nightly all running simultaneously

In addition, the browser will warn you if you try to open a newer profile with an older version of Firefox, as such mismatches can occasionally lead to data loss. This protection can be bypassed with the new -allow-downgrade command line argument.

Enhanced Privacy Controls

Firefox 67 better protects your privacy online with new Content Blocking options to avoid known cryptominers and fingerprinters.

Screenshot of the new Content Blocking options: Cryptominer and Fingerprinter blockingYou also have more control over your extensions, which can be prevented from running in private browsing windows.

Screenshot of uBlock Origin's settings with a banner reading "Allowed in Private Windows"This is the default for all newly installed extensions in Firefox 67, though your previously installed extensions will receive permission by default. You can adjust these permissions on a per-extension basis by visiting about:addons.

Easier Access to Firefox Accounts and Saved Passwords

We’re working hard to make Firefox Accounts more useful and discoverable this year, starting with a new default icon in the browser toolbar.

Screenshot of the new Firefox Accounts toolbar button and its associated menu

The new icon indicates whether or not you’re signed into a Firefox Account, and makes it easy to perform actions like sending tabs to other devices or manually triggering a sync. Like other toolbar buttons, you can freely move or hide the Firefox Account button according to your preferences.

Check out the many improvements to Firefox’s built-in password manager, including quicker access to your list of saved credentials. You can either click on the new “Logins and Passwords” item in the main menu, or the new “View Saved Logins” button in the login autocomplete popup.

Screenshots of the View Saved Logins popup during autocomplete, and the Logins and Passwords item in the main menu

This can be especially useful if you need to look up or edit a login outside of the normal autofill workflow. And, if you use Firefox Sync, you can access your saved passwords with the Firefox Lockbox app for Android or iOS.

Web Platform Features

Support for legacy FIDO U2F APIs

We’ve enabled legacy FIDO U2F support to improve backwards compatibility with sites that have not yet upgraded to its standards-based successor, WebAuthn.

These APIs make it possible for websites to authenticate users with strong, hardware-backed authentication mechanisms like USB security keys or Windows Hello.

AV1 on Windows, Linux, and macOS

Firefox now supports AV1, a next-generation video codec, on all major desktop platforms. Also, playback on those platforms is now powered by dav1d, a faster and more efficient AV1 decoder developed by the VideoLAN and FFmpeg communities.

JavaScript: String.prototype.matchAll() and Dynamic Imports

Firefox joins Chrome in supporting the matchAll() String prototype method, which takes a regular expression and returns an iterator of all matching text, including capturing groups.

The import() function can now be used to dynamically load JavaScript modules, similarly to how the static import statement works. Now it’s possible to load modules conditionally or in response to user actions, though such imports are harder to reason about for build tools that use static analysis for optimizations like tree shaking.

And more awaits!

This release includes plenty of other fixes and enhancements not covered here, and lots more to come. So what are you waiting for? Download Firefox 67 today and let us know what you think!

The post Firefox 67: Dark Mode CSS, WebRender, and more appeared first on Mozilla Hacks – the Web developer blog.

Leave a Reply

Your email address will not be published.