Total Cookie Protection in Firefox 86, CSS container queries, and Safari Technology Preview 121 | Front End News #019
Tags: frontendnews, news
Published: 2021-03-02 05:42:41

> **NOTE:** This is issue #019 of my newsletter, which went live on Monday, March 1st. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

Firefox 86 is out, bringing over Total Cookie Protection (and a special logo for the Nightly edition). CSSWG accepted the `@container` queries proposal into the CSS specification process. Smashing Magazine offers awesome advice on useful DevTools tips and shortcuts. Software Updates include Lighthouse v7.2.0, Node February 2021 Security Releases, and TypeScript 4.2.

***

## Fleshing out @container queries with single-axis containment

CSS `@container` queries are one step closer to becoming reality. The CSS Working Group has accepted the proposal by Miriam Suzanne into the CSS specification process.

- [https://github.com/w3c/csswg-drafts/issues/5796](https://github.com/w3c/csswg-drafts/issues/5796)

***

## Useful DevTools Tips And Shortcuts

Developer Tools are your best friend when crafting code. This Smashing Magazine article puts together a treasure of information that you will find extremely useful.

- [Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)](https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/)

***

## Browser news

### Firefox

The Firefox 86 update went live last week. By far, the most important feature is the implementation of State Partitioning (or Total Cookie Protection).

> Our new feature, Total Cookie Protection, works by maintaining a separate “cookie jar” for each website you visit. Any time a website, or third-party content embedded in a website, deposits a cookie in your browser, that cookie is confined to the cookie jar assigned to that website, such that it is not allowed to be shared with any other website.

More details about this update, as well as the rest of the release notes are available in the following articles:

- [A Fabulous February Firefox — 86!](https://hacks.mozilla.org/a-fabulous-february-firefox-86/)
- [Firefox 86 for developers](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/86)
- [Introducing State Partitioning](https://hacks.mozilla.org/introducing-state-partitioning/)
- [Firefox 86 Introduces Total Cookie Protection](https://blog.mozilla.org/security/2021/02/23/total-cookie-protection/)

On a lighter side, there seems to be a meme trend affectionately called "fox gate" playing on the (not so) recent rebranding. So the team responded by re-enabling a special version of their logo for Firefox Nightly. Enjoy!

- [Here’s what’s happening with the Firefox Nightly logo](https://hacks.mozilla.org/heres-whats-happening-with-the-firefox-nightly-logo/)
- [Thank you for using Firefox Nightly](https://www.mozilla.org/en-US/firefox/nightly/firstrun/)

### WebKit

Safari Technology Preview 121 is out now, adding support for `aspect-ratio` on grid items and a lot of other updates.

- [Release Notes for Safari Technology Preview 121](https://webkit.org/blog/11555/release-notes-for-safari-technology-preview-121/)


***

## Software updates and Releases

- **[Critical v3.0.0](https://github.com/addyosmani/critical/releases/tag/v3.0.0)** - Extract & Inline Critical-path CSS in HTML pages
- **[Lighthouse v7.2.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v7.2.0)** - automated auditing, performance metrics, and best practices for the web
- **[Neutralino v1.8.0](https://github.com/neutralinojs/neutralinojs/releases/tag/v1.8.0)** - portable and lightweight cross platform application development framework
- **[Node February 2021 Security Releases](https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/)** - JavaScript runtime
- **[Puppeteer v8.0.0](https://github.com/puppeteer/puppeteer/releases/tag/v8.0.0)** - headless Chrome Node.js API
- **[SCEditor](https://github.com/samclarke/SCEditor/releases/tag/v3.0.0)** - A lightweight HTML and BBCode WYSIWYG editor
- **[TypeScript 4.2](https://devblogs.microsoft.com/typescript/announcing-typescript-4-2/)** - a language that builds on JavaScript by adding syntax for type declarations and annotations


***

## Wrapping things up

That's all I have prepared for this issue. Have a great and productive week, keep yourselves safe, and I will see you next time!