Novità di Chrome 116

Adriana Jara

Tieni presente quanto segue:

Mi chiamo Adriana Jara. Vediamo quali sono le novità di Chrome 116 per gli sviluppatori.

Documenta l'API Picture-in-Picture.

L'API Document Picture in picture consente di aprire una finestra sempre in primo piano che può essere completata 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 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 supera mai la 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);
});

Dai un'occhiata alla sezione Picture in picture per qualsiasi elemento per ulteriori dettagli ed esempi.

Miglioramenti al debug dei fogli di stile mancanti in DevTools.

DevTools ha ricevuto una serie di miglioramenti per identificare e 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.

Inoltre, Origini > Editor ora sottolinea e mostra le descrizioni comando relative agli errori incorporati accanto alle istruzioni Non riuscito,@import, url() e href.

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

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

Il riquadro Problemi con i link a fonti e 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. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 116.

Iscriviti

Per rimanere al passo con le 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à di Chrome.