Nieuw in Chrome 116

Adriana Jara

Dit is wat u moet weten:

• Gebruik de Document Picture in Picture API om de gebruikersproductiviteit te verhogen.
• Het is nu eenvoudiger om ontbrekende stylesheets in DevTools te debuggen
• En er is nog veel meer .

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 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.

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

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 weergegeven, inclusief verbroken URL's, mislukte verzoeken en verkeerd geplaatste @import instructies.

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 voor 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 afvalverzameling worden verminderd en de responsiviteit voor gebruikers wordt verbeterd.

Update: in een eerdere versie van dit bericht stond dat de Back/Forward cache notRestoredReasons API was opgenomen in Chrome 116, maar deze functie is uitgesteld tot een toekomstige release.

Verder lezen

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

• Wat is er nieuw in Chrome DevTools (116)
• Beëindigingen en verwijderingen van Chrome 116
• ChromeStatus.com-updates voor Chrome 116
• Wijzigingslijst voor Chromium-bronrepository's
• Chrome-releasekalender

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!