Nieuw in Chrome 116

Adriana Jara

Dit is wat u moet weten:

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

Document Picture-in-Picture-API.

De Document Picture-in-Picture API maakt het mogelijk om een ​​altijd zichtbaar venster te openen dat kan worden gevuld met willekeurige HTML-inhoud.

Een Picture-in-Picture-venster waarin Sintel-trailervideo wordt afgespeeld.
Een Picture-in-Picture-venster gemaakt met de Document Picture-in-Picture API ( demo ).

Het Picture-in-Picture-venster in de Document Picture-in-Picture API is vergelijkbaar met een leeg venster van dezelfde oorsprong dat wordt geopend met window.open() , met enkele verschillen:

  • Het Picture-in-Picture-venster zweeft bovenop andere vensters.
  • Het Picture-in-Picture-venster overleeft nooit het openingsvenster.
  • Er kan niet door het Picture-in-Picture-venster worden genavigeerd.
  • De Picture-in-Picture-vensterpositie kan niet door de website worden ingesteld.

Met de volgende HTML wordt een aangepaste videospeler en een knopelement ingesteld om de videospeler in een Picture-in-Picture-venster te openen.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Het volgende JavaScript roept documentPictureInPicture.requestWindow() aan wanneer de gebruiker op de knop klikt om een ​​leeg Picture-in-Picture-venster te openen. De geretourneerde belofte wordt opgelost met een Picture-in-Picture-venster JavaScript-object. De videospeler wordt met append() naar dat venster verplaatst.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Bekijk Picture-in-picture voor elk element voor meer details en voorbeelden.

DevTools ontbreken stijlbladen voor foutopsporingsverbeteringen.

DevTools heeft een aantal verbeteringen gekregen om problemen met ontbrekende stylesheets te identificeren en op te lossen.

Ten eerste: de Bronnen > Paginastructuur toont nu alleen de succesvol geïmplementeerde en geladen stylesheets om verwarring te minimaliseren.

Ook de Bronnen > Editor onderstreept en toont nu tooltips voor inline fouten naast mislukte, @import , url() en href instructies.

Onderstreepte uitspraken met tooltips in het paneel Bronnen.

  • De Console biedt, naast koppelingen naar mislukte verzoeken, nu koppelingen naar de exacte regel die verwijst naar een stylesheet die niet kon worden geladen.

De console biedt links naar de exacte regels met problematische uitspraken.

Het paneel Netwerk vult de kolom Initiator consequent in met koppelingen naar de exacte regel die verwijst naar een stylesheet die niet kon worden geladen.

In het paneel Problemen worden alle problemen met het laden van stylesheets vermeld, inclusief verbroken URL's, mislukte verzoeken en verkeerd geplaatste @import instructies.

Het paneel Problemen met links naar bronnen en verzoeken.

Bekijk wat er nieuw is in DevTools voor alle details en meer informatie over DevTools in Chrome 116.

En meer!

Natuurlijk is er nog veel meer.

  • Met Bewegingspad kunnen auteurs elk grafisch object positioneren en animeren langs een pad dat door de ontwikkelaar is opgegeven.
  • De eigenschappen display en content-visibility worden nu ondersteund in keyframe-animaties, waardoor exit-animaties puur in CSS kunnen worden toegevoegd.
  • De fetch-API kan nu worden gebruikt met Bring Your Own Buffer-lezers , waardoor de overhead en kopieën van afvalinzameling worden verminderd en de responsiviteit voor gebruikers wordt verbeterd.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 116.

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.

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