New in Chrome 110

Here’s what you need to know:

Add custom style to your picture-in-picture elements with the new :picture-in-picture pseudo class.
Set your web app launch behavior with launch_handler in your manifest.
use the credentialless attribute in iframes to embed third party content that doesn’t set a Cross Origin Embedder Policy
And there’s plenty more.

I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 110.

:picture-in-picture pseudo class

With the picture in picture API websites can create a floating video window, always on top so that users continue consuming media, while interacting with other content.

Now with the :picture-in-picture css pseudo-class you can add styles to the elements to improve the experience.

The snippet below shows how to use the picture-in-picture class to add a message to the video container that reminds the user the video is now playing somewhere else.

#video-container:has(video:picture-in-picture)::before {
bottom: 36px;
color: #ddd;
content: 'Video is now playing in a Picture-in-Picture window';
position: absolute;
right: 36px;
}

Use the pseudo-class again on the video element, to make the element transparent to display the message correctly.

Play with the example and improve your picture-in-picture video experiences.

launch_handler manifest member.

The Launch Handler API lets you control how your web app launches For example, whether it uses an existing or a new window, and whether the chosen window is navigated to the launch URL.

Let’s look at an example: in desktop environments, if you install an app and then visit it on the browser, there is a button to move to the standalone app window.
Previously, the only possible behavior was to launch the app in a new window.

Now, using the launch_handler manifest member web apps can customize their launch behavior.

For example, the snippet below causes all this web app’s launches to focus on an existing app window and navigate to it (if it exists) instead of always launching a new window.

{
"launch_handler": {
"client_mode": "navigate-new"
}
}

`credentialless` iframes.

One of the biggest challenges with cross origin isolation is that all cross-origin iframes must deploy COEP and CORP . An iframe without those headers will not be loaded by the browser.

The credentialless attribute helps to embed third-party iframes that don’t set these headers.

With credentialless, the iframe is loaded from a different, empty context. In particular, it is loaded without cookies. The iframe starts with an empty cookie jar.

Likewise, storage APIs such as LocalStorage, CacheStorage, and so on, load and store data in the new ephemeral partition. All this storage is cleared once the top-level document is unloaded. This allows for removing the COEP restriction.

Find more information in this article to securely use credentialless to load third party content into your iframes.

And more!

And of course there is plenty more.

Web SQL is now removed in non-secure contexts.

The CSS initial-letter property provides a way to set the number of lines that an initial-letter should sink into following lines of text.

FileSystemHandle now includes a remove() method

# :picture-in-picture pseudo class

# launch_handler manifest member.

# credentialless iframes.

# And more!

# Further reading

# Subscribe

:picture-in-picture pseudo class

launch_handler manifest member.

`credentialless` iframes.

And more!

Further reading

Subscribe