Novità di Chrome 110

Adriana Jara

Tieni presente quanto segue:

  • Aggiungi uno stile personalizzato ai tuoi elementi Picture in picture con la nuova pseudo classe :picture-in-picture.
  • Imposta il comportamento di avvio dell'app web con launch_handler nel file manifest.
  • Utilizza l'attributo credentialless negli iframe per incorporare contenuti di terze parti che non impostano criteri per l'incorporamento multiorigine
  • E ce ne sono molti altri.

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

pseudo lezione Picture in picture

Grazie all'API Picture in picture, i siti web possono creare una finestra video mobile, sempre in primo piano, in modo che gli utenti continuino a consumare contenuti multimediali mentre interagiscono con altri contenuti.

Ora con la pseudo-classe CSS :picture-in-picture puoi aggiungere stili agli elementi per migliorare l'esperienza.

Lo snippet riportato di seguito mostra come utilizzare la classe Picture in picture per aggiungere un messaggio al contenitore video per ricordare all'utente che il video è ora in riproduzione altrove.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Usa di nuovo la pseudo-classe sull'elemento video per renderlo trasparente e visualizzare correttamente il messaggio.

Guarda l'esempio per migliorare le tue esperienze video Picture in picture.

membro del file manifest Launch_handler.

L'API Launch Handler ti consente di controllare le modalità di avvio della tua app web, ad esempio se utilizza una finestra esistente o una nuova e se la finestra scelta viene aperta verso l'URL di avvio.

Vediamo un esempio: in ambienti desktop, se installi un'app e poi la visiti nel browser, è presente un pulsante per passare alla finestra dell'app autonoma. In precedenza, l'unico comportamento possibile era avviare l'app in una nuova finestra.

Ora, utilizzando le app web di launch_handler membro del file manifest è possibile personalizzare il comportamento dell'avvio.

Ad esempio, lo snippet seguente fa sì che tutti i lanci di questa app web si concentrino su una finestra dell'app esistente e vi acceda (se esistente) anziché aprire sempre una nuova finestra.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframe.

Una delle sfide maggiori dell'isolamento multiorigine è che tutti gli iframe multiorigine devono eseguire il deployment di COEP e CORP . Un iframe senza queste intestazioni non verrà caricato dal browser.

L'attributo credentialless consente di incorporare iframe di terze parti che non impostano queste intestazioni.

Con credentialless, l'iframe viene caricato da un altro contesto vuoto. In particolare, viene caricato senza cookie. L'iframe inizia con un barattolo di cookie vuoto.

Allo stesso modo, le API di archiviazione come LocalStorage, CacheStorage e così via caricano e archiviano i dati nella nuova partizione temporanea. Tutto questo spazio di archiviazione viene svuotato una volta eseguito l'unload del documento di primo livello. Ciò consente di rimuovere la restrizione COEP.

Puoi trovare ulteriori informazioni in questo articolo su come utilizzare credentialless in modo sicuro per caricare contenuti di terze parti nei tuoi iframe.

E tanto altro.

E, ovviamente, c'è molto altro.

SQL web viene ora rimosso in contesti non sicuri.

La proprietà initial-letter CSS consente di impostare il numero di righe che una lettera iniziale deve scendere nelle righe di testo successive.

FileSystemHandle ora include un metodo remove().

Per approfondire

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

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.

Sono Adriana Jara e non appena uscirà Chrome 111 sarò qui per farti conoscere le novità di Chrome.