Chrome 133 beta

Rachel Andrew

Pubblicata: 15 gennaio 2024

Salvo diversa indicazione, 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 la versione più recente 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 CSS

Implementa l'aumento a attr() specificato nel livello 5 del CSS, 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ù nell'articolo Il CSS attr() riceve un upgrade.

Pseudo classe CSS :open

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

Query del contenitore dello stato di scorrimento CSS

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

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

  • stuck: un contenitore con posizionamento fisso è attaccato a uno dei bordi della casella di scorrimento.
  • snapped: un contenitore allineato allo snap di scorrimento è attualmente agganciato orizzontalmente o verticalmente.
  • scrollable: indica se è possibile scorrere un contenitore di scorrimento nella direzione della 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().

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

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

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

Queste proprietà ti consentono di controllare con precisione la spaziatura verticale utilizzando le misure del carattere. Scopri di più in CSS text-box-trim.

Il valore hint dell'attributo popover

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

L'esempio canonico è un selettore <select> aperto (popover=auto) e viene visualizzata una descrizione comando attivata dal passaggio del mouse (popover=hint). Questa azione non chiude il selettore <select>.

Miglioramenti al posizionamento dell'attivatore e dell'ancora del popup

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

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

Nel seguente caso, il clic sul pulsante attiva correttamente il popup, ma il clic sul popup stesso non dovrebbe chiuderlo.

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

In precedenza, ciò accadeva perché il clic sul popup si propagava a <button> e attivava l'attivatore, che chiudeva e riapriva il popup. Ora è stato modificato il comportamento previsto.

API web

Animation.overallProgress

Fornisce agli sviluppatori una rappresentazione pratica e coerente dell'avanzamento di un'animazione nelle sue iterazioni e indipendentemente dalla natura della sequenza temporale. Senza la proprietà overallProgress, devi calcolare manualmente il livello di 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 suggerire alla CPU che il codice corrente sta eseguendo un spinlock.

Report sugli hash CSP per gli script

Per motivi di sicurezza, le applicazioni web complesse devono spesso tenere traccia delle risorse secondarie che scaricano.

In particolare, le best practice e gli standard di settore imminenti (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 Reporting per segnalare gli URL e gli hash (per CORS/stessa origine) di tutte le risorse dello script caricate dal documento.

Spostamento che preserva lo stato del DOM

Aggiunge un elemento DOM primitivo (Node.prototype.moveBefore) che consente di spostare gli elementi all'interno di una struttura ad albero DOM, senza reimpostare lo stato dell'elemento.

Quando si sposta un elemento anziché rimuoverlo e inserirlo, viene mantenuto lo stato successivo, ad esempio quanto segue:

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

Esporre l'attributo attributionsrc in <area>

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

Inoltre, ha senso supportare l'attributo in <area>, poiché questo elemento è una piattaforma di navigazione di prima classe e Chrome lo supporta già sulle altre piattaforme di <a> e window.open

Esporre renderTime interorigine approssimato nei tempi degli elementi e nell'LCP (indipendentemente da Timing-Allow-Origin)

Le voci relative alla temporizzazione degli elementi e a LCP hanno un attributo renderTime, allineato al primo frame in cui è stata visualizzata un'immagine o un testo.

Attualmente questo attributo è protetto per le immagini cross-origin richiedendo un'intestazione Timing-Allow-Origin per la risorsa immagine. Tuttavia, questa limitazione è facile da aggirare (ad esempio, mostrando un'immagine di stessa origine e di origine diversa nello stesso frame).

Poiché questo ha generato confusione, prevediamo di rimuovere questa limitazione e di aumentare tutti i tempi di rendering di 4 ms quando il documento non è isolato da origini diverse. Sembra sufficientemente approssimativo da evitare la fuga di informazioni utili sul momento della decodifica delle immagini cross-origin.

Interfaccia FileSystemObserver

L'interfaccia FileSystemObserver informa i siti web delle modifiche al file system. I siti osservano le modifiche apportate a file e directory a cui l'utente ha precedentemente concesso l'autorizzazione, sul suo dispositivo locale o nel file system del bucket (noto anche come file system privato di origine) e ricevono una notifica con informazioni di base sulle modifiche, ad esempio il tipo di modifica.

Blocco in modalità Risparmio energetico

Quando la modalità Risparmio energetico è attiva, Chrome blocca un "gruppo di contesto di navigazione" che è stato nascosto e non attivo per più di cinque minuti se un sottogruppo di frame dello stesso indirizzo di origine al suo interno supera una soglia di utilizzo della CPU, a meno che:

  • Fornisce funzionalità di videoconferenza o audioconferenza (rilevate identificando l'acquisizione di microfono, videocamera o schermo/finestra/scheda o un RTCPeerConnection con un canale RTCData "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 un'altra connessione.

Il blocco consiste nell'interruzione 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

Al momento le mappe di importazione devono essere caricate prima di qualsiasi modulo ES e può essercene una sola per documento. Ciò li rende fragili e potenzialmente lenti da utilizzare in scenari reali: qualsiasi modulo caricato prima interrompe l'intera app e, nelle app con molti moduli, diventano una grande risorsa di blocco, poiché deve essere caricata prima l'intera mappa di tutti i moduli possibili.

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

Intestazioni di accesso allo spazio di archiviazione

Offre un modo alternativo per attivare i cookie non suddivisi per gli elementi incorporati autenticati. 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 di accesso allo spazio di archiviazione che sono già state concesse. Fornire un modo alternativo per attivare l'autorizzazione "accesso allo spazio di archiviazione" consente l'utilizzo da parte di risorse non iframe e può ridurre la latenza per gli embed autenticati.

Supportare la creazione di ClipboardItem con Promise<DOMString>

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

WebAssembly Memory64

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

​​API Web Authentication: metodo getClientCapabilities() PublicKeyCredential

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

WebGPU: formati dei vertici a un componente (e unorm8x4-bgra)

Aggiunge formati di vertici aggiuntivi non presenti nella release iniziale di WebGPU a causa della mancanza di supporto o di vecchie versioni di macOS (che non sono più supportate da nessun browser). I formati dei vertici a un componente consentono alle applicazioni di richiedere solo i dati necessari, mentre in precedenza dovevano richiederne almeno il doppio per i tipi di dati a 8 e 16 bit. Il formato unorm8x4-bgra consente di caricare i colori dei vertici codificati in BGRA mantenendo lo stesso shader in modo leggermente più comodo.

Algoritmo X25519 dell'API Web Cryptography

L'algoritmo "X25519" fornisce strumenti per eseguire lo scambio di chiavi 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 i seguenti nuovi sperimentali per le origini.

Disattivare il blocco in Risparmio energetico

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

Ritiro e rimozione

Questa versione di Chrome introduce i ritiri e le rimozioni elencati di seguito. Visita ChromeStatus.com per gli elenchi dei ritiri pianificati, dei ritiri in corso e delle rimozioni precedenti.

Questa release di Chrome ritira una funzionalità.

Ritiro del limite maxInterStageShaderComponents di WebGPU

maxInterStageShaderComponents limit è deprecato a causa di una combinazione di fattori. La data prevista per la rimozione in Chrome 135.

  • Redundanza con maxInterStageShaderVariables: questo limite ha già un scopo simile, ovvero controlla la quantità di dati trasmessi tra le fasi dello shader.
  • Discrepanze minori: anche se esistono lievi differenze nel modo in cui vengono calcolati i due limiti, queste differenze sono minime e possono essere gestite efficacemente entro il limite di maxInterStageShaderVariables.
  • Semplificazione: la rimozione di maxInterStageShaderComponents semplifica l'interfaccia dello shader e riduce la complessità per gli sviluppatori. Invece di gestire due limiti distinti con differenze sottili, possono concentrarsi sul maxInterStageShaderVariables più appropriato e completo.

Questa versione di Chrome rimuove due funzionalità.

In precedenza, quando una risorsa veniva prelevata 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 il recupero. Ora Chrome rimuove questo caso speciale e utilizza la normale semantica della cache HTTP.

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

Questo vale anche per <link rel=prerender> non standard.

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

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