Novità di Chrome 116

Adriana Jara

Tieni presente quanto segue:

Sono Adriana Jara. Analizziamo le novità di Chrome 116 per gli sviluppatori.

l'API Document 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 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 della stessa origine vuota aperta utilizzando window.open(), con alcune differenze:

  • La finestra Picture in picture è sospesa sopra altre finestre.
  • La finestra Picture in picture non supera mai la finestra che si apre.
  • Impossibile navigare nella finestra Picture in picture.
  • La posizione della finestra Picture in picture non può essere impostata dal sito web.

Il codice HTML seguente consente di impostare un video player personalizzato e un elemento 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 codice JavaScript seguente 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, guarda Picture in picture per qualsiasi elemento.

DevTools senza miglioramenti al debug dei fogli di stile.

DevTools ha apportato una serie di miglioramenti per identificare ed eseguire il debug dei problemi relativi ai fogli di stile mancanti.

Primo: la struttura Origini > Pagina ora mostra solo i fogli di stile di cui è stato eseguito il deployment e che sono stati caricati correttamente per ridurre al minimo la confusione.

Anche Origini > Editor ora evidenzia e mostra le descrizioni comando degli errori incorporati accanto alle istruzioni non riuscite, @import, url() e href.

Istruzioni sottolineate con descrizioni comando nel riquadro Origini.

  • La console, oltre ai link alle richieste non riuscite, ora fornisce link alla riga esatta che fa riferimento a un foglio di stile il cui caricamento non è riuscito.

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

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

Nel riquadro Problemi sono elencati tutti i problemi di caricamento dei fogli di stile, inclusi URL non funzionanti, richieste non riuscite e istruzioni @import in posizione errata.

Il riquadro Problemi con link a origini e richieste.

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

E tanto altro.

Ovviamente c'è molto altro.

  • Percorso 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 con fotogrammi chiave, che consentono di aggiungere animazioni di uscita esclusivamente in CSS.
  • L'API di fetch ora può essere utilizzata con i lettori Bring Your Own Buffer per ridurre il sovraccarico e le copie della garbage collection e migliorare la reattività per gli utenti.

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 116.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Adriano Jara e, non appena uscirà Chrome 117, sarò felice di presentarti le novità di Chrome.