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.
- Novità di Chrome DevTools (110)
- Deprecazioni e rimozioni di Chrome 110
- Aggiornamenti di ChromeStatus.com per Chrome 110
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
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.