Chrome 133 beta

Rachel Andrew

Data di pubblicazione: 15 gennaio 2024

Se non diversamente specificato, le seguenti modifiche si applicano alla release più recente del canale beta di Chrome per Android, ChromeOS, Linux, macOS e Windows. Scopri di più sulle funzionalità elencate qui tramite i link forniti o dall'elenco su ChromeStatus.com. Chrome 133 è in versione beta dal 15 gennaio 2024. Puoi scaricare l'ultima versione su Google.com per computer o sul Google Play Store su Android.

CSS e UI

Questa release aggiunge sette nuove funzionalità CSS e UI.

Funzione attr() avanzata del CSS

Implementa l'aumento di attr() specificato nel CSS di livello 5, che consente tipi diversi da <string> e l'utilizzo in tutte le proprietà CSS (oltre al supporto esistente per lo pseudo-elemento content).

Scopri di più in CSS attr() gets an upgrade.

Pseudo-classe :open del CSS

La pseudo-classe :open corrisponde a <dialog> e <details> quando sono nel loro stato aperto e corrisponde a <select> e <input> quando sono in modalità con un selettore e il selettore è visualizzato.

Query sui contenitori dello stato di scorrimento del CSS

Utilizza le query sui contenitori per applicare lo stile ai discendenti dei contenitori in base al loro stato di scorrimento.

Il contenitore di query è un contenitore di scorrimento o un elemento interessato dalla posizione di scorrimento di un contenitore di scorrimento. È possibile eseguire query sui seguenti stati:

  • stuck: un contenitore con posizione fissa è bloccato su uno dei bordi della casella di scorrimento.
  • snapped: un contenitore allineato con l'ancoraggio di scorrimento è attualmente ancorato orizzontalmente o verticalmente.
  • scrollable: indica se un contenitore di scorrimento può essere scorrevole in una direzione di cui è stata eseguita la query.

Un nuovo container-type: scroll-state consente di eseguire query sui contenitori.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Scopri di più in CSS scroll-state().

text-box, text-box-trim e text-box-edge del CSS

Per ottenere un bilanciamento ottimale dei contenuti di testo, le proprietà text-box-trim e text-box-edge, insieme alla proprietà abbreviata text-box, consentono un controllo più preciso dell'allineamento verticale del testo.

La proprietà text-box-trim specifica i lati da tagliare, sopra o sotto, e la proprietà text-box-edge specifica come deve essere tagliato il bordo.

Queste proprietà consentono di controllare con precisione la spaziatura verticale utilizzando le metriche dei caratteri. Scopri di più in CSS text-box-trim.

Il valore hint dell'attributo popover

L'API Popover specifica il comportamento di due valori dell'attributo popover: auto e manual. Questa funzionalità descrive un terzo valore, popover=hint. I suggerimenti, che sono più spesso associati a comportamenti di tipo "tooltip", hanno comportamenti leggermente diversi. La differenza principale è che un hint è subordinato a auto quando si aprono stack nidificati di popup. È quindi possibile aprire un popup hint non correlato mentre uno stack esistente di popup auto rimane aperto.

L'esempio canonico è che un <select> selettore è aperto (popover=auto) e viene visualizzato un tooltip attivato al passaggio del mouse (popover=hint). Questa azione non chiude il <select> selettore.

Miglioramenti al posizionamento dell'ancoraggio e dell'invoker del popup

Aggiunge un modo imperativo per impostare le relazioni di invoker tra i popup con popover.showPopover({source}). Consente alle relazioni di invoker di creare riferimenti impliciti agli elementi di ancoraggio.

Il popup nidificato all'interno dell'invoker non deve richiamarlo di nuovo

Nel caso seguente, se fai clic sul pulsante il popup viene attivato correttamente, ma se fai clic sul popup stesso non deve essere chiuso.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

In precedenza, questo accadeva perché il clic sul popup si propagava a <button> e attivava l'invoker, che chiudeva il popup. Ora è stato modificato in modo da avere il comportamento previsto.

API web

Animation.overallProgress

Fornisce agli sviluppatori una rappresentazione comoda e coerente dell'avanzamento di un'animazione nelle sue iterazioni e indipendentemente dalla natura della sua sequenza temporale. Senza la proprietà overallProgress, devi calcolare manualmente l'avanzamento di un'animazione, tenendo conto del numero di iterazioni dell'animazione e se currentTime dell'animazione è una percentuale del tempo totale (come nel caso delle animazioni basate sullo scorrimento) o una quantità di tempo assoluta (come nel caso delle animazioni basate sul tempo).

Il metodo pause() dell'oggetto Atomics

Aggiunge il metodo pause() all'oggetto dello spazio dei nomi Atomics per indicare alla CPU che il codice corrente sta eseguendo uno spinlock.

Report hash CSP per gli script

Le applicazioni web complesse spesso devono tenere traccia delle risorse secondarie che scaricano per motivi di sicurezza.

In particolare, i prossimi standard e best practice del settore (ad esempio, PCI-DSS v4) richiedono che le applicazioni web mantengano un inventario di tutti gli script che scaricano ed eseguono.

Questa funzionalità si basa su CSP e sull'API di reporting per segnalare gli URL e gli hash (per CORS/stessa origine) di tutte le risorse di script caricate dal documento.

Spostamento che preserva lo stato del DOM

Aggiunge una primitiva DOM (Node.prototype.moveBefore) che consente di spostare gli elementi in un albero DOM senza reimpostare lo stato dell'elemento.

Quando sposti anziché rimuovere e inserire, viene mantenuto lo stato seguente:

  • <iframe> elementi rimangono caricati.
  • L'elemento attivo mantiene lo stato attivo.
  • I popup, le finestre di dialogo modali e a schermo intero rimangono aperti.
  • Le transizioni e le animazioni CSS continuano.

Esporre l'attributo attributionsrc su <area>

Allinea l'esposizione dell'attributo attributionsrc su <area> al comportamento di elaborazione esistente dell'attributo, anche quando non è stato esposto.

Inoltre, è logico supportare l'attributo su <area>, poiché questo elemento è una superficie di navigazione di prima classe e Chrome lo supporta già su altre superfici di <a> e window.open

Esporre renderTime interorigine approssimativo in Element Timing e LCP (indipendentemente da Timing-Allow-Origin)

Le voci Element Timing e LCP hanno un attributo renderTime, allineato al primo frame in cui è stata disegnata un'immagine o un testo.

Attualmente, questo attributo è protetto per le immagini interorigine richiedendo un'intestazione Timing-Allow-Origin sulla risorsa immagine. Tuttavia, questa limitazione è facile da aggirare (ad esempio, visualizzando un'immagine della stessa origine e interorigine nello stesso frame).

Poiché questa è stata una fonte di confusione, prevediamo di rimuovere questa limitazione e di approssimare tutti i tempi di rendering di 4 ms quando il documento non è isolato interorigine. Questo sembra essere sufficientemente approssimativo da evitare di divulgare informazioni utili sul tempo di decodifica delle immagini interorigine.

Ripristinare responseStart e introdurre firstResponseHeadersStart

Con i suggerimenti iniziali 103 abilitati, le risposte hanno due timestamp:

  • Quando arrivano i suggerimenti iniziali (103)
  • Quando arrivano le intestazioni finali (ad es. 200)

Quando Chrome 115 ha spedito firstInterimResponseStart per consentire la misurazione di questi due timestamp, abbiamo anche modificato il significato di responseStart (utilizzato da Time to First Byte (TTFB)) in "le intestazioni finali". Ciò ha creato un problema di compatibilità web con browser e strumenti che non hanno apportato una modifica simile per questa metrica di uso comune.

Chrome 133 ripristina questa modifica di responseStart per risolvere il problema di compatibilità e introduce invece firstResponseHeadersStart per consentire ai siti di misurare il tempo necessario per le intestazioni finali, mantenendo la definizione originale di TTFB.

L'interfaccia FileSystemObserver

L'FileSystemObserverinterfaccia notifica ai siti web le modifiche apportate al file system. I siti osservano le modifiche apportate a file e directory a cui l'utente ha concesso l'autorizzazione in precedenza, nel dispositivo locale dell'utente o nel Bucket File System (noto anche come Origin Private File System), e ricevono una notifica delle informazioni di base sulle modifiche, come il tipo di modifica.

Blocco in Risparmio energetico

Quando il risparmio energetico è attivo, Chrome blocca un "gruppo di contesti di navigazione" nascosto e silenzioso da più di cinque minuti se un sottogruppo di frame della stessa origine al suo interno supera una soglia di utilizzo della CPU, a meno che:

  • Fornisce funzionalità di videoconferenza audio o video (rilevate identificando l'acquisizione di microfono, videocamera o schermo/finestra/scheda o un RTCPeerConnection con un RTCDataChannel "aperto" o un MediaStreamTrack "live").
  • Controlla un dispositivo esterno (rilevato con l'utilizzo di WebUSB, Web Bluetooth, WebHID o Web Serial).
  • Contiene un blocco web o una connessione IndexedDB che blocca un aggiornamento della versione o una transazione su una connessione diversa.

Il blocco consiste nella sospensione dell'esecuzione. È definito formalmente nell'API Page Lifecycle.

La soglia di utilizzo della CPU verrà calibrata per bloccare circa il 10% delle schede in background quando il risparmio energetico è attivo.

Più mappe di importazione

Attualmente, le mappe di importazione devono essere caricate prima di qualsiasi modulo ES e può essere presente una sola mappa di importazione per documento. Questo le rende fragili e potenzialmente lente da utilizzare in scenari reali: qualsiasi modulo caricato prima di esse interrompe l'intera app e, nelle app con molti moduli, diventano una risorsa di blocco di grandi dimensioni, poiché è necessario caricare prima l'intera mappa per tutti i moduli possibili.

Questa funzionalità consente di utilizzare più mappe di importazione per documento, unendole in modo coerente e deterministico.

Intestazioni di accesso allo spazio di archiviazione

Offre un modo alternativo per gli incorporamenti autenticati di attivare i cookie non partizionati. Queste intestazioni indicano se i cookie non partizionati sono (o possono essere) inclusi in una determinata richiesta di rete e consentono ai server di attivare le autorizzazioni "storage-access" che sono già state concesse. Fornire un modo alternativo per attivare l'autorizzazione "storage-access" consente l'utilizzo da parte di risorse non iframe e può ridurre la latenza per gli incorporamenti autenticati.

Supporto per la creazione di ClipboardItem con Promise<DOMString>

ClipboardItem, che è l'input del metodo write() della clipboard asincrona, ora accetta valori stringa oltre ai blob nel suo costruttore. ClipboardItemData può essere un blob, una stringa o una promessa che si risolve in un blob o in una stringa.

WebAssembly Memory64

La proposta memory64 aggiunge il supporto per le memorie WebAssembly lineari con dimensioni superiori a 2^32 bit. Non fornisce nuove istruzioni, ma estende le istruzioni esistenti per consentire indici a 64 bit per memorie e tabelle.

API Web Authentication: metodo getClientCapabilities() di PublicKeyCredential

Il metodo getClientCapabilities() di PublicKeyCredential consente di determinare quali funzionalità WebAuthn sono supportate dal client dell'utente. Il metodo restituisce un elenco di funzionalità supportate, consentendo agli sviluppatori di personalizzare le esperienze e i flussi di lavoro di autenticazione in base alle funzionalità specifiche del client.

WebGPU: formati di vertici a 1 componente (e unorm8x4-bgra)

Aggiunge altri formati di vertici non presenti nella release iniziale di WebGPU a causa della mancanza di supporto o delle versioni precedenti di macOS (che non sono più supportate da alcun browser). I formati di vertici a 1 componente consentono alle applicazioni di richiedere solo i dati necessari quando in precedenza dovevano richiedere almeno il doppio per i tipi di dati a 8 e 16 bit. Il formato unorm8x4-bgra semplifica leggermente il caricamento dei colori dei vertici codificati in BGRA mantenendo lo stesso shader.

Algoritmo X25519 dell'API Web Cryptography

L'algoritmo "X25519" fornisce strumenti per eseguire l'accordo chiave utilizzando la funzione X25519 specificata in [RFC7748]. L'identificatore dell'algoritmo "X25519" può essere utilizzato nell'interfaccia SubtleCrypto per accedere alle operazioni implementate: generateKey, importKey, exportKey, deriveKey e deriveBits.

Nuove prove dell'origine

In Chrome 133 puoi attivare le seguenti nuove prove dell'origine.

Disattivare il blocco in Risparmio energetico

Questa prova di disattivazione consente ai siti di disattivare il comportamento di blocco in Risparmio energetico fornito in Chrome 133.

Ritiri e rimozioni

Questa versione di Chrome introduce i ritiri e le rimozioni elencati di seguito. Visita ChromeStatus.com per visualizzare gli elenchi di ritiri pianificati, ritiri attuali e rimozioni precedenti.

Questa release di Chrome ritira una funzionalità.

Ritirare il limite maxInterStageShaderComponents di WebGPU

Il maxInterStageShaderComponents limit è ritirato a causa di una combinazione di fattori. La data di rimozione prevista in Chrome 135.

  • Ridondanza con maxInterStageShaderVariables: questo limite ha già uno scopo simile, ovvero controllare la quantità di dati passati tra le fasi dello shader.
  • Discrepanze minori: sebbene esistano lievi differenze nel modo in cui vengono calcolati i due limiti, queste differenze sono minime e possono essere gestite in modo efficace all'interno del limite maxInterStageShaderVariables.
  • Semplificazione: la rimozione di maxInterStageShaderComponents semplifica l'interfaccia dello shader e riduce la complessità per gli sviluppatori. Invece di gestire due limiti separati con differenze sottili, possono concentrarsi su maxInterStageShaderVariables, che ha un nome più appropriato e completo.

Questa release di Chrome rimuove due funzionalità.

In precedenza, quando una risorsa veniva precaricata utilizzando <link rel=prefetch>, Chrome ignorava la semantica della cache (ovvero max-age e no-cache) per il primo utilizzo entro cinque minuti, per evitare di recuperarla di nuovo. Ora, Chrome rimuove questo caso speciale e utilizza la normale semantica della cache HTTP.

Ciò significa che gli sviluppatori web devono includere le intestazioni di memorizzazione nella cache appropriate (Cache-Control o Expires) per usufruire dei vantaggi di <link rel=prefetch>.

Ciò influisce anche su <link rel=prerender> non standard.

Rimuovere l'attivazione della pagina di benvenuto di Chrome con le schede di prima esecuzione delle preferenze iniziali

L'inclusione di chrome://welcome nella proprietà first_run_tabs del file initial_preferences non avrà alcun effetto. Questa pagina è stata rimossa perché è ridondante con l'esperienza di prima esecuzione che viene attivata sulle piattaforme desktop.