Nieuw in Chrome 110

Adriana Jara

Dit is wat u moet weten:

  • Voeg een aangepaste stijl toe aan uw picture-in-picture-elementen met de nieuwe :picture-in-picture pseudo-klasse .
  • Stel het startgedrag van uw web-app in met launch_handler in uw manifest.
  • gebruik het credentialless attribuut in iframes om inhoud van derden in te sluiten die geen Cross Origin Embedder Policy instelt
  • En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 110.

:picture-in-picture pseudo-klasse

Met de Picture-in-Picture API kunnen websites een zwevend videovenster creëren, altijd bovenaan, zodat gebruikers media kunnen blijven consumeren, terwijl ze interactie hebben met andere inhoud.

Met de :picture-in-picture css pseudo-klasse kun je nu stijlen aan de elementen toevoegen om de ervaring te verbeteren.

Het onderstaande fragment laat zien hoe u de klasse Picture-in-Picture kunt gebruiken om een ​​bericht toe te voegen aan de videocontainer dat de gebruiker eraan herinnert dat de video nu ergens anders wordt afgespeeld.

#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;
}

Gebruik de pseudo-klasse opnieuw op het video-element om het element transparant te maken en het bericht correct weer te geven.

Speel met het voorbeeld en verbeter uw beeld-in-beeld video-ervaringen.

launch_handler manifestlid.

Met de Launch Handler API kunt u bepalen hoe uw webapp wordt gestart. Bijvoorbeeld of deze een bestaand of een nieuw venster gebruikt en of het gekozen venster naar de start-URL wordt genavigeerd.

Laten we naar een voorbeeld kijken: als u in desktopomgevingen een app installeert en deze vervolgens in de browser bezoekt, is er een knop om naar het zelfstandige app-venster te gaan. Voorheen was het enige mogelijke gedrag het starten van de app in een nieuw venster.

Met behulp van het launch_handler manifest kunnen web-apps van leden nu hun startgedrag aanpassen.

Het onderstaande fragment zorgt er bijvoorbeeld voor dat alle lanceringen van deze web-app zich richten op een bestaand app-venster en ernaar navigeren (als dit bestaat) in plaats van altijd een nieuw venster te starten.

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

iframes credentialless .

Een van de grootste uitdagingen bij cross-origin-isolatie is dat alle cross-origin-iframes COEP en CORP moeten inzetten. Een iframe zonder deze headers wordt niet door de browser geladen.

Het credentialless attribuut helpt bij het insluiten van iframes van derden die deze headers niet instellen.

Met credentialless wordt het iframe geladen vanuit een andere, lege context. In het bijzonder wordt het zonder cookies geladen. Het iframe begint met een lege koektrommel.

Op dezelfde manier kunnen opslag-API's zoals LocalStorage, CacheStorage, enzovoort, gegevens laden en opslaan in de nieuwe kortstondige partitie. Al deze opslag wordt gewist zodra het document op het hoogste niveau is verwijderd. Hierdoor kan de COEP-beperking worden opgeheven.

In dit artikel vindt u meer informatie over hoe u credentialless veilig kunt gebruiken om inhoud van derden in uw iframes te laden.

En meer!

En er is natuurlijk nog veel meer.

Web SQL wordt nu verwijderd in niet-beveiligde contexten.

De eigenschap CSS initial-letter biedt een manier om het aantal regels in te stellen dat een beginletter in de volgende regels tekst moet plaatsen.

FileSystemHandle bevat nu een remove() methode .

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 110.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Adriana Jara, en zodra Chrome 111 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!