Novità di Chrome 110

Adriana Jara

Tieni presente quanto segue:

  • Aggiungi uno stile personalizzato agli elementi in modalità PiP con la nuova pseudo classe :picture-in-picture.
  • Imposta il comportamento di lancio dell'app web con launch_handler nel file manifest.
  • Utilizza l'attributo credentialless negli iFrame per incorporare contenuti di terze parti che non impostano i criteri sull'incorporamento multiorigine
  • E c'è molto altro.

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

Pseudo classe :picture-in-picture

Con l'API Picture in picture, i siti web possono creare una finestra video mobile, sempre in primo piano, in modo che gli utenti possano continuare 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 al contenitore del video un messaggio che ricordi all'utente che il video è 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;
}

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

Prova l'esempio e migliora le tue esperienze video in Picture in picture.

Elemento manifest launch_handler.

L'API Launch Gestori ti consente di controllare la modalità di avvio della tua app web, ad esempio se utilizza una finestra esistente o una nuova e se la finestra scelta viene indirizzata all'URL di avvio.

Vediamo un esempio: negli ambienti desktop, se installi un'app e poi la visiti sul 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 l'elemento launch_handler manifest, le app web possono personalizzare il comportamento di lancio.

Ad esempio, lo snippet riportato di seguito fa in modo che tutti i lanci di questa app web si concentrino su una finestra dell'app esistente e passino a questa (se esistente) anziché aprire sempre una nuova finestra.

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

credentialless iframe.

Una delle maggiori sfide dell'isolamento multiorigine è che tutti gli iframe cross-origin devono implementare 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 contesto diverso e vuoto. In particolare, viene caricato senza cookie. L'iframe inizia con un cookie jar vuoto.

Analogamente, 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 cancellato una volta scaricato il documento di primo livello. Ciò consente di rimuovere la restrizione COEP.

Consulta questo articolo per scoprire di più su come utilizzare in sicurezza credentialless per caricare contenuti di terze parti nei tuoi iframe.

E tanto altro.

E ovviamente c'è molto altro.

Web SQL è stato rimosso dai contesti non sicuri.

La proprietà initial-letter CSS consente di impostare il numero di righe in cui una lettera iniziale deve essere inserita nelle righe di testo successive.

FileSystemHandle ora include un metodo remove().

Per approfondire

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

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à rilasciato Chrome 111, sarò qui per raccontarti le novità di Chrome.