Firefox 67: New Features Inside

Enhancing User Experience with Firefox 67

The latest release of Firefox 67 brings a host of exciting features that cater to both users and developers. One of the standout features is the introduction of the prefers-color-scheme query, which allows websites to adapt their designs according to the user’s preferred light or dark theme.

Improvements for Users

• Side-by-side profiles: Users can now run multiple versions of Firefox simultaneously, each with different profiles. This feature ensures a more fail-safe experience.
• WebRender’s enhanced performance: Firefox has started shipping its WebRender engine for Windows 10 users, resulting in faster animations and scrolling.
• Enhanced privacy controls: Firefox 67 allows users to block cryptominers and fingerprinters, providing an additional layer of security.
• Better account and password management: The new release includes features like easier access to saved logins, the ability to save passwords on private windows, and support for autocomplete="new-password".

Improvements for Developers

• JavaScript String.prototype.matchAll(): Firefox now supports the matchAll() method, which returns an iterator of all results matching a string against a regular expression.
• CSS revert keyword: The CSS revert keyword allows developers to reset any property for a selector back to the value specified in the user agent stylesheet.
• Prefers-color-scheme: The prefers-color-scheme media query enables websites to adapt their designs according to the user’s preferred light or dark theme.

Adapting to User Preferences

To cater to users who prefer dark themes, developers can use the prefers-color-scheme media query to adjust their website’s design. For instance, you can define colors for your website using CSS variables and switch their values in media queries to instantly adapt to the user’s preference.

Browser Support

While only Safari previously supported the prefers-color-scheme query, Firefox has now joined in, and Chrome is planning to support it in version 76. However, it’s essential to consider older browsers and provide alternative means for users to adjust theming when needed.

Best Practices

When using the prefers-color-scheme media query, remember to:

• Use it as a progressive enhancement
• Provide alternative means for users to adjust theming when needed
• Consider older browsers and devices
• Test your website thoroughly to ensure compatibility

By incorporating the prefers-color-scheme query into your website’s design, you can enhance the user experience and provide a more personalized and accessible experience for your users.