New in Chrome 105

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 WebSQL.
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 WebSQL for non-secure contexts

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

Warning

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

If you’re using WebSQL in non-secure contexts, you should migrate to IndexDB,
or another local storage container as soon as possible. For more information
about this deprecation and the planned deprecation of WebSQL see
Deprecating and removing Web SQL.

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.