Novità di Chrome 114

Adriana Jara

Tieni presente quanto segue:

  • Il CSS text-wrap: balance è disponibile per migliorare i layout di testo.
  • I cookie partizionati per sito di primo livello (CHIPS) sono visualizzati qui.
  • I popover sono più facili che mai con l'API Popover.
  • E ce ne sono molti altri.

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

text-wrap:balance.

Usa text-wrap: balance per migliorare i layout del testo. La seguente animazione mostra la differenza che puoi fare con questa riga.

Prova una demo

In qualità di sviluppatore, non conosci le dimensioni finali, la dimensione del carattere o persino la lingua del testo. Tutte le variabili sono necessarie per un trattamento efficace del testo a capo. Poiché il browser conosce tutti i fattori, con text-wrap:balance puoi richiedere al browser di individuare la soluzione migliore per il wrapping di righe bilanciato.

I due esempi precedenti vengono mostrati insieme: uno è contrassegnato come non bilanciato e l'altro come bilanciato.

Il blocco di testo bilanciato è più piacevole per gli occhi del lettore. Attira meglio l'attenzione ed è nel complesso più facile da leggere.

L'equilibrio dei titoli sarà e dovrebbe essere il caso d'uso principale per text-wrap: balance. Esiste un costo in termini di prestazioni per bilanciare il testo, quindi per mitigare il costo funziona solo per un massimo di quattro righe.

Consulta questo articolo contenente esempi e ulteriori dettagli per migliorare i layout di testo.

CHIPS: cookie con stato partizionato indipendente.

CHIPS (Cookie che hanno stato partizionato indipendente), consente di attivare il partizionamento dei cookie di terze parti per sito di primo livello utilizzando il nuovo attributo dei cookie Partitioned.

Prima dei CHIPS, quando un utente visita il sito A, il sito incorporato C poteva impostare un cookie sul computer dell'utente. Se l'utente visita successivamente il sito B, che incorpora anche il sito C, quest'ultimo potrebbe accedere allo stesso cookie che è stato impostato sul sito A. Ciò consente al sito C di compilare l'attività di navigazione di un utente sul sito A, B e su ogni sito in cui è incorporato.

Diagramma che mostra siti e spazio di archiviazione con cookie non partizionati.

Sebbene il monitoraggio tra siti sia un problema, esistono esigenze valide relative ai cookie tra siti che possono essere raggiunte con un approccio incentrato sulla tutela della privacy mediante il partizionamento dei cookie.

Con i CHIPS quando un utente visita il sito A e il contenuto incorporato dal sito C imposta un cookie con l'attributo Partizionato, il cookie viene salvato in un jar partizionato solo per i cookie che il sito C imposta quando è incorporato nel sito A. Il browser invia tale cookie solo quando il sito di primo livello è A.

Diagramma che mostra i siti e lo spazio di archiviazione abbinato ai cookie.

Quando l'utente visita un nuovo sito, ad esempio il sito B, il sito C non riceve il cookie impostato al momento dell'incorporamento del sito A.

Consulta questo articolo per ulteriori dettagli sulla procedura di disattivazione dei cookie di terze parti.

L'API Popover.

Con l'API Popover è più facile creare elementi di interfaccia utente temporanei che vengono visualizzati sopra tutte le altre UI delle app web.

Questi includono elementi interattivi per l'utente come menu di azioni, suggerimenti per gli elementi dei moduli, selettori di contenuti e UI per l'insegnamento.

Il nuovo attributo popover consente la visualizzazione automatica di qualsiasi elemento nel livello superiore. Ciò significa che non dovrai più preoccuparti di posizionamento, sovrapposizione di elementi, stato attivo o interazioni da tastiera per lo sviluppatore.

È simile all'elemento <dialog>, ma presenta diverse differenze importanti, tra cui il comportamento di chiusura in modalità leggera, la gestione dell'interazione popover, il supporto degli eventi e l'assenza di una modalità "modale".

Per ulteriori informazioni, consulta questo articolo.

E tanto altro.

Ovviamente c'è molto altro.

  • DevTools consente di mettere in pausa ed eseguire il debug del codice C e C++ nelle app WebAssembly con supporto DWARF.
  • L'opzione exclusionFilters in navigator.bluetooth.requestDevice() consente agli sviluppatori web di escludere alcuni dispositivi dal selettore del browser.
  • È disponibile una prova dell'origine per Sfocatura sfondo.

Per approfondire

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

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.

Adriana Jara e non appena uscirà Chrome 115 sarò qui per raccontarti le novità di Chrome.