Novità di Chrome 116

Adriana Jara

Tieni presente quanto segue:

Sono Adriana Jara. Vediamo quali sono le novità per gli sviluppatori in Chrome 116.

Documenta l'API Picture-in-Picture.

L'API Document Picture-in-Picture consente di aprire una finestra sempre in primo piano che può essere compilata con contenuti HTML arbitrari.

Una finestra Picture in picture che riproduce il video del trailer di Sintel.
Una finestra Picture-in-Picture creata con l'API Document Picture-in-Picture (demo).

La finestra Picture in picture nell'API Document Picture in Picture è simile a una finestra vuota dello stesso origine aperta utilizzando window.open(), con alcune differenze:

  • La finestra Picture in picture viene visualizzata sopra le altre finestre.
  • La finestra Picture in picture non sopravvive mai alla finestra di apertura.
  • Non è possibile navigare nella finestra Picture in picture.
  • La posizione della finestra Picture in picture non può essere impostata dal sito web.

Il seguente codice HTML configura un video player personalizzato e un elemento di pulsante per aprire il video player in una finestra Picture in picture.

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

Il seguente codice JavaScript chiama documentPictureInPicture.requestWindow() quando l'utente fa clic sul pulsante per aprire una finestra Picture-in-Picture vuota. La promessa restituita viene risolta con un oggetto JavaScript della finestra Picture in picture. Il video player viene spostato in quella finestra utilizzando append().

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

Per ulteriori dettagli ed esempi, consulta Picture-in-picture per qualsiasi elemento.

Miglioramenti al debug dei fogli di stile mancanti in DevTools.

DevTools ha ricevuto una serie di miglioramenti per identificare e risolvere i problemi relativi ai fogli di stile mancanti.

Innanzitutto, l'albero Origini > Pagina ora mostra solo gli stili di foglie di stile di cui è stato completato il deployment e il caricamento per ridurre al minimo la confusione.

Inoltre, Origini > Editor ora sottolinea e mostra descrizioni comando degli errori in linea accanto alle istruzioni failed,@import, url() e href.

Dichiarazioni sottolineate con descrizioni comando nel riquadro Origini.

  • La console, oltre ai link alle richieste non riuscite, ora fornisce i link alla riga esatta che fa riferimento a un foglio di stile che non è stato caricato.

La console fornisce i link alle righe esatte con le istruzioni problematiche.

Il pannello della rete compila in modo coerente la colonna Initiator con i link alla riga esatta che fa riferimento a un foglio di stile il cui caricamento non è riuscito.

Il riquadro Problemi elenca tutti i problemi di caricamento dei fogli di stile, inclusi URL non validi, richieste non riuscite e istruzioni @import fuori posto.

Il riquadro Problemi con i link alle fonti e alle richieste.

Consulta le novità di DevTools per tutti i dettagli e ulteriori informazioni su DevTools in Chrome 116.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • Il percorso di animazione consente agli autori di posizionare qualsiasi oggetto grafico e animarlo lungo un percorso specificato dallo sviluppatore.
  • Le proprietà display e content-visibility sono ora supportate nelle animazioni dei fotogrammi chiave, il che consente di aggiungere animazioni di uscita esclusivamente in CSS.
  • Ora l'API fetch può essere utilizzata con i lettori Bring Your Own Buffer, riducendo il sovraccarico e le copie della raccolta dei rifiuti e migliorando la reattività per gli utenti.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 116.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciata la versione 117 di Chrome, sarò qui per dirti le novità del browser.