We set out in 2022 to reimagine Firefox’s design to be quick, fashionable and welcoming the primary time you run it and daily after. We’ve all the time had your again on privateness, and nonetheless do. Now with at present’s new Firefox launch we’re additionally bringing you a contemporary new look designed to streamline and calm issues down so you’ve a recent new internet expertise each time you employ Firefox.
We’re residing in a frenetic time, the place individuals are coping with powerful modifications in our day by day lives and arduous to resolve issues are popping up all over the place. We suppose the browser needs to be a chunk of software program you possibly can depend on to have your again, nice to take a look at and dealing seamlessly with the online.
We’re additionally on a mission to save lots of you time, whether or not that is by making pages load sooner, utilizing much less reminiscence, or by streamlining on a regular basis use of the browser. Good design is invisible. So if issues simply work, you do not actually give it some thought. But a ton of thought has been put into the stream. Our customers who’ve tried the brand new Firefox have mentioned, “the truth that I used to be utilizing a brand new internet browser slipped into the background of my consciousness.” And that is simply what we have been going for.
A smooth, clear Firefox design backed by analysis
Going into the Firefox redesign, our staff studied how individuals work together with the browser, observing their patterns and behaviors. We listened to suggestions and gathered concepts from common individuals who simply wish to have a better expertise on the internet. We obsessed over distractions, further clicks and wasted time. The ensuing new design is straightforward, fashionable and quick and delivers a lovely expertise to assist what individuals do most in Firefox.
Bright and buoyant all through
The recent new Firefox is simple on the eyes, brilliant and buoyant on screens of all sizes — computer systems, telephones and tablets. A brand new icon set, crisp typography and considerate spacing all through all mirror a contemporary aesthetic for 2021.
Streamlined toolbar and menus
The toolbar is of course the place you begin each internet go to. It’s the place the place you kind a URL to go someplace on-line. After internet web page content material, it is what you have a look at most in Firefox. The new toolbar is simplified and clutter-free so that you get to the great things effortlessly.
Menus are the place key Firefox actions and instructions dwell. We’ve consolidated further menus to scale back muddle and be extra intuitive by the three bars menu within the higher proper or by right-clicking to activate it in your laptop display screen. The new look reorganized and streamlined our menus to place the most effective actions shortly at your fingertips.
When privateness protections are engaged in Firefox, the defend icon within the toolbar glows subtly indicating that we’re working behind the scenes to guard you from nosy trackers. Fun reality: Firefox has blocked greater than 6 trillion — that is trillion with a T — trackers since we rolled out enhanced monitoring safety, stopping 1000’s of firms from viewing your on-line exercise.. We’re speaking about monitoring cookies, social media trackers, fingerprinters, cryptominers and extra. Go forward and click on on the defend to see who and what Firefox is obstructing… you is likely to be shocked by what you discover out.
A brand new search for tabs
Based on our analysis, we discovered that greater than half of you’ve 4+ tabs open on a regular basis, and a few of you’ve extra, much more. And we really feel that! Tab as a lot as you want, pals. Tabs acquired a makeover so they’re now gently curved and float above the toolbar. It’s an thrilling change that additionally serves as a reminder that tabs aren’t stationary. So seize these tabs, transfer them round and arrange them as you want. Tabs additionally acquired a glow-up to be a contact brighter when energetic.
Shhhhhh…. notifications
No one likes to be interrupted after they’re within the stream, however when you have to be alerted to one thing, at the very least it could actually look good. We’ve up to date notifications and alerts of every kind in Firefox to take up much less area for much less jarring interruptions. Plus, non-essential alerts and messages have been eliminated altogether. Media autoplay is turned off by default, so you will not be interrupted by a random video blasting unexpectedly. Spotting a loud tab is simple, and unmuting/muting takes only a fast click on on the tab itself.
Expanded privateness protections
Mozilla makes it our mission to place your privateness and safety first within the know-how we develop. Our aim is so that you can fear much less each time you go surfing. The newest Firefox launch involves you with next-level safety and privateness that you have come to anticipate from us.
The greatest non-public searching mode on the market
All browsers have a non-public searching mode, however none match Firefox. The widespread Total Cookie Protection strikes from the elective strict setting to always-on in non-public searching. This characteristic maintains a separate “cookie jar” for every web site you go to whereas searching privately. Any time a web site deposits a cookie, Firefox locks it up in its personal cookie jar in order that it could actually’t be shared with every other web site.
An even higher Firefox for iOS and Android
The recent new look covers Firefox all over the place, from desktop browsers to Android and iOS cell gadgets. The iOS expertise is optimized for iPhone and iPad, with key actions now taking fewer steps for faster searches, navigation and tab viewing. With refinements in iconography and menu names, the entire searching expertise is extra cohesive and harmonious throughout each platform.
Shape Up Your Floats
CSS Shapes lets a floated factor sculpt the stream of content material round it past the traditional rectangular bounding field we have been constrained to. For occasion, within the above screenshot and linked demo, the textual content is wrapping to the form of the grapes vs the picture’s border. There are properties for fundamental shapes all the best way as much as complicated polygons.
You can be taught extra in Josh Marinacci’s publish on the brand new CSS Shapes tooling from yesterday.
Variable Fonts Are Here
No punny title, I’m simply excited! OpenType Font Variations permit a single font file to include a number of situations of the identical font, encoding the variations between situations. In addition to being in a single file, font creators can expose any variety of variation axes that give builders fine-grained management on how a font is rendered. These could be customary variations like font weight (font weight 536 seems to be proper? no drawback!) or issues that have been by no means beforehand out there through CSS (x-height! serif-size!). In addition to the candy-store prospects for typography nerds, with the ability to serve a single file with a number of variants is a significant web page weight financial savings. Dan Callahan goes a lot deeper on the grooviness to be discovered and the way Firefox makes it simple to tweak these new customized values.
Devtools Commands
The Developer Toolbar was an alternate command repl enter within the Firefox Developer instruments, other than the Web Console. I say “was” as a result of as of Firefox 62, it has been eliminated. It was all the time a bit arduous to search out and never as well-advertised because it could possibly be, however did encapsulate some highly effective instructions. Most of those instructions have been progressively migrated elsewhere within the devtools, and that is wrapped up in Firefox 62, so we have eliminated the toolbar altogether.
One of the final instructions to be migrated is screenshot, which is a power-user model of the “take a screenshot” button out there within the devtools UI. The screenshot command is now out there as :screenshot within the Web Console. For instance, have you ever ever wanted a high-res screenshot of a web page for print? You can specify the next pixel density for a screenshot through the command: :screenshot –dpr 4
There are a bunch of different choices as effectively, similar to specifying output filenames, seize delays, and selector-cropped screenshots. Eric Meyer wrote a fantastic primer on the ability of :screenshot on his weblog, and it’ll change your web page seize sport.
What’s New:
New
- Avoided all the time posting a NSEvent to the occasion loop each time a non-native occasion is ran which ought to scale back the CPU utilization of the WindowServer course of.
- The Picture-in-Picture toggle button can now be moved to the other aspect of the video from the brand new context menu possibility Move Picture-in-Picture Toggle to Left (Right) Side.
- Reduced energy utilization of software program decoded video on macOS particularly in fullscreen. This contains many streaming websites like Netflix or Amazon Prime Video.
- RLBox — a brand new know-how that hardens Firefox in opposition to potential safety vulnerabilities in third-party libraries — is now enabled on all platforms.
Changed
- We’ve added a User Agent override for Slack.com, which permits Firefox customers to make use of extra Call options and have entry to Huddles.
Previous launch notes:
- Building on Total Cookie Protection, we have added a extra complete logic for clearing cookies that stops hidden information leaks and makes it simple for customers to grasp which web sites are storing native data. Learn extra
- Firefox now helps logging into Microsoft, work, and faculty accounts utilizing Windows single sign-on. Learn extra
- The simplify web page when printing characteristic is again! When printing, underneath More settings > Format choose the Simplified possibility when out there to get a clutter-free web page. Learn extra
- HTTPS-First Policy: Firefox Private Browsing home windows now try and make all connections to web sites safe, and fall again to insecure connections solely when web sites don’t assist it. Learn extra
- We’ve added a brand new locale: Scots (sco)
- The deal with bar now supplies Switch to Tab outcomes additionally in Private Browsing home windows.
- Firefox now routinely allows High Contrast Mode when “Increase Contrast” is checked on MacOS
- Firefox now does catch-up paints for nearly all consumer interactions, enabling a 10-20% enchancment in response time to most consumer interactions.
- Picture-in-Picture: Pop a video out of the browser window so you possibly can stream and multitask.
- Expanded Dark Mode: Take it simple in your eyes each time you go surfing.
- An further layer of safety: DNS over HTTPS (DoH) helps hold web service suppliers from promoting your information.
Simplified unencumbered navigation: The first step to going anyplace on-line is the toolbar, simply kind within the URL and press return/enter, and also you’re off. In some methods this space serves as your automotive’s dashboard that you simply have a look at each time you get behind the wheel. We saved it easy and centered on these three key areas of the toolbar: 1) Navigation – again, ahead and refresh 2) Address Bar – privateness defend (so your ambient data is all the time protected), safety lock and the place to kind in your URL. 3) Frequently Used Settings – reader mode, zoom degree and bookmark. Our intent was to make it simpler for individuals to give attention to the steadily used gadgets on this space and simply get to the place they wanted to go.
Streamlined clutter-free menus: There are some ways to get to your preferences and settings, and we discovered that the 2 hottest methods have been: 1) the hamburger menu – button on the far proper with three equal horizontal strains – and a couple of) the right-click menu. So, we prioritized the content material based mostly on what individuals clicked on after they visited the menu. We made the labels much less cryptic and clear and simpler to grasp, and we eliminated some icons in order that it was simpler for individuals to see at a look the place they needed to go.
Productivity-inspired new tab design: Tabs. We use them daily. They sign the place you might be, however we’d like them to do extra work. Everything from conveying details about what video is taking part in to the place your subsequent Zoom assembly is. It’s no shock that greater than 50% of individuals have 4 tabs or extra open. We redesigned these tabs in order that they floated neatly, and we added the visible indicators, like blocking autoplay movies till you are prepared to go to that tab. We indifferent the tab from the browser to ask you to maneuver, rearrange and pull out tabs into a brand new window to fit your stream, and arrange them in order that they’re simpler so that you can discover.
We shushed notifications: Your internet expertise should not be slowed down by a bunch of notifications, and if you need to be given a heads-up on one thing, it ought to look good and never be a distraction. You’ll see consolidated the panels so you possibly can reply extra shortly and get again to why you have been on-line within the first place sooner. We particularly decreased among the frustration and re-prompting related to getting out and in of Google Meet conferences. Thanks to this pared down interface, you will get to all of your internet calls and conferences with fewer clicks.
Fresh, new Firefox for iOS: And we took care to concentrate to the important thing touches significantly on Apple gadgets. The improved iPhone and iPad expertise features a modernized, optimized and differentiated Firefox consumer interface. We decreased the steps to look in a brand new tab by routinely popping up the keyboard, emphasizing the power to do fast searches with the search engine brand, and including the append characteristic. You’ll see improved navigation across the app with new tab views and moved the synced tabs into the tab tray for higher discoverability on any machine. We refreshed design components similar to iconography and menu gadgets naming to be constant throughout our desktop and Firefox for Android platforms.
