New in Chrome 105

Pete LePage

Here's what you need to know:

Container queries and :has() are a match made in responsive heaven.
The new Sanitizer API provides a robust processor for arbitrary strings to help reduce cross site scripting vulnerabilities.
We’re taking another step towards deprecating Web SQL.
And there's plenty more.

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 105.

Container queries and the `:has()` CSS property

Container queries, one of the most highly requested features are landing in Chrome 105. They enable developers to query a parent selector for its size and styling information, making it possible for a child element to own its responsive styling logic, no matter where it lives on a page.

They’re similar to a @media query, except they evaluate against the size of a container instead of the size of the viewport.

To use container queries, you need to set containment on a parent element. For example, you might have a card with an image and some text.

Single two-column card.

To create a container query, set container-type on the card container. Setting container-type to inline-size queries the inline-direction size of the parent.

.card-container {
  container-type: inline-size;
}

Now, we can use that container to apply styles to any of its children using @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

In this case, when the container is less than 400px, it switches to a single column layout.

CSS `:has()` pseudo-class

We can take this a step further with the CSS :has() pseudo-class. It allows you to check if a parent element contains children with specific parameters.

For example, p:has(span) indicates a paragraph selector with a span inside of it. You can use this to style the parent paragraph itself, or anything within it. Or, you can use figure:has(figcaption) to style a figure element that contains a caption.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Check out Una’s article @container and :has(): two powerful new responsive APIs for a more detailed explanation and some fun demos.

Sanitizer API

Most web apps frequently deal with untrusted strings, but safely rendering that content can be tricky. Without sufficient care, it's easy to accidentally create opportunities for cross-site scripting vulnerabilities.

There are libraries like DomPurify that help, but add a small maintenance burden. The HTML Sanitizer API helps to reduce the number of cross-site scripting vulnerabilities by building sanitization into the platform.

To use it, create a new instance of Sanitizer. Then, call setHTML() on the element you want to insert the sanitized content into.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

The Sanitizer API is designed to be safe by default and customizable, allowing you to specify different config options, for example dropping certain elements, or allowing others.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Check out Safe DOM manipulation with the Sanitizer API for more details.

Deprecating Web SQL for non-secure contexts

Some time ago, we announced our plans to deprecate Web SQL. Starting in Chrome 105, Web SQL will be deprecated in non-secure contexts.

Warning: This deprecation will currently only affect sites that use Web SQL via http://, for example, some intranet or enterprise scenarios. It will not affect sites that use Web SQL via https://.

If you’re using Web SQL in non-secure contexts, you should migrate to IndexDB, or another local storage container as soon as possible.

And more!

Of course there's plenty more.

You can now update the name of an installed PWA on both desktop and mobile by updating the web app manifest.
The multi-screen window placement API gets accurate screen name labels.
The window controls overlay API is now available. It lets PWAs provide a more app-like feel by swapping the existing full-width title bar for a small overlay. This allows you to place custom content in the title bar area.

New in Chrome 105

Container queries and the :has() CSS property

CSS :has() pseudo-class

Sanitizer API

Deprecating Web SQL for non-secure contexts

And more!

Further reading

Subscribe

Container queries and the `:has()` CSS property

CSS `:has()` pseudo-class