Chrome 123 beta

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 123 è in versione beta dal 21 febbraio 2024. Puoi scaricare la versione più recente su Google.com per computer o sul Google Play Store su Android.

CSS

Questa release aggiunge cinque nuove funzionalità CSS.

Funzione di colore light-dark() CSS

La funzione light-dark() in CSS consente agli sviluppatori di adattare più facilmente la schema-colore alle preferenze dell'utente per la modalità chiara o scura.

Utilizza light-dark() per specificare due valori di colore diversi all'interno di un'unica proprietà CSS. Il browser (o il dispositivo) sceglierà automaticamente il colore appropriato in base al valore color-scheme calcolato dell'elemento. Ad esempio, con il seguente CSS:

  • Se l'utente ha selezionato un tema chiaro, l'elemento .target avrà un sfondo verde lime.
  • Se l'utente ha selezionato un tema scuro, l'elemento .target avrà un sfondo verde.
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Modalità di visualizzazione Picture in picture CSS

Aggiunge il supporto alla funzionalità dei contenuti multimediali CSS display-mode per il valore picture-in-picture. In questo modo, gli sviluppatori web possono scrivere regole CSS specifiche che vengono applicate solo quando (parte di) l'app web viene mostrata in modalità Picture in picture.

Scopri di più su questa funzionalità multimediale nella documentazione relativa a Picture in picture.

Proprietà CSS align-content per i blocchi

La proprietà CSS align-content è ora supportata nei contenitori di blocco e nelle celle di tabella. In precedenza, questa proprietà era supportata solo per gli elementi in griglia e flessibili. Ad esempio, display: block, display: list-item e display: table-cell ora possono essere alinhati utilizzando align-content.

Scopri di più su Supporto di align-content nei layout di blocco e tabella.

La proprietà CSS field-sizing

Utilizzando la proprietà field-sizing, gli sviluppatori possono disattivare le dimensioni predefinite fisse dei controlli di forma e fare in modo che le dimensioni dipendano dai contenuti. In questo modo, hai la possibilità di creare campi di testo che si espandono automaticamente.

La proprietà CSS text-spacing-trim

Questa proprietà applica il kerning ai caratteri di punteggiatura cinese, giapponese e coreano (CJK) per produrre una tipografia gradevole dal punto di vista visivo, come definito da JLREQ (Requisiti per il layout del testo giapponese) e CLREQ (Requisiti per il layout del testo cinese).

Molti caratteri di punteggiatura CJK includono spazi interni ai glifi. Ad esempio, il punto e la parentesi tonda di chiusura CJK in genere hanno spazi interni ai glifi nella metà destra degli spazi dei glifi, per dare loro un avanzamento costante come gli altri caratteri ideografici. Tuttavia, quando vengono visualizzati in una riga, gli spazi interni ai glifi diventano eccessivi. Questa funzionalità regola gli spazi eccessivi.

La proprietà text-spacing-trim accetta uno dei seguenti quattro valori: normal, trim-start, space-all e space-first. Scopri di più nell'articolo Presentazione di quattro nuove funzionalità internazionali in CSS.

API web

Consentire la creazione di credenziali WebAuthn in un iframe cross-origin

Questa funzionalità consente agli sviluppatori web di creare credenziali WebAuthn (ovvero credenziali "publickey", note come passkey) in iframe cross-origin. Per questa nuova funzionalità sono necessarie due condizioni:

  • L'iframe ha un criterio di autorizzazione publickey-credentials-create-feature.
  • L'iframe ha un'attivazione utente temporanea.

In questo modo, gli sviluppatori potranno creare passkey in scenari incorporati, ad esempio dopo un flusso di verifica dell'identità in cui la terza parte attendibile fornisce un'esperienza di identità federata.

Bundle di funzionalità di generazione di report sull'attribuzione

Chrome 123 aggiunge la personalizzazione dei dati degli attivatori e i filtri dei valori aggregabili all'API Attribution Reporting incentrata su:

  • Ulteriore configurabilità dell'API per i report a livello di evento grazie al supporto della personalizzazione per la cardinalità e i valori dei dati degli attivatori.
  • Ulteriore configurabilità dell'API per i report di riepilogo grazie al supporto dei filtri nei valori aggregabili.

Misurazione dell'attribuzione tra app e web

Estende l'API Attribution Reporting per consentire di attribuire le conversioni generate sul web a eventi che si verificano al di fuori del browser, all'interno di altre applicazioni.

La proposta qui sfrutta il supporto dell'attribuzione a livello di sistema operativo. In particolare, offre allo sviluppatore la possibilità di consentire l'unione degli eventi sul web mobile con gli eventi in Privacy Sandbox di Android, anche se potrebbe essere implementato il supporto di altre piattaforme.

blocking=render negli script dei moduli in linea

Si tratta di una piccola modifica che rimuove una limitazione artificiale da <script blocking="render">. Prima di questa modifica, <script blocking="render"type="module"> richiedeva un attributo src, anche se questo src era un URI dati. Si tratta di un vincolo non necessario, poiché gli script dei moduli in linea che importano altri script devono comunque essere in grado di eseguire il blocco di rendering.

Il motivo è che le transizioni tra visualizzazioni di documenti spesso si basano su script che bloccano il rendering per la personalizzazione, quindi semplificare la creazione di script che bloccano il rendering supporterebbe questa funzionalità.

Picture-in-picture dei documenti: consenti all'API focus() di mettere a fuoco l'apridocumenti

Ora puoi utilizzare opener.focus() da una finestra Picture in picture del documento per impostare lo stato attivo a livello di sistema sulla scheda proprietaria della finestra Picture in picture del documento.

In questo modo, gli sviluppatori possono riportare la scheda originale in primo piano, se necessario. Ad esempio, quando l'utente deve accedere a un'esperienza utente che non si adatta alla finestra PiP più piccola.

Sintassi with per l'importazione degli attributi

Gli attributi di importazione sono una funzionalità di JavaScript che consente di annotare le dichiarazioni di importazione, ad esempio import xxx from "mod" with { type: "json" }. Chrome inizialmente aveva rilasciato una versione precedente della proposta (in Chrome 91) utilizzando assert come parola chiave. Questa versione è stata poi aggiornata per utilizzare with a causa di alcune modifiche necessarie durante l'integrazione con i moduli HTML per JSON e CSS.

jitterBufferTarget

L'attributo jitterBufferTarget consente alle applicazioni di specificare una durata media in millisecondi del jitter buffer da mantenere.RTCRtpReceiver Ciò influisce sulla quantità di buffering eseguita dallo user agent, che a sua volta influisce sulle ritrasmissioni e sul recupero della perdita di pacchetti. La modifica del valore target consente alle applicazioni di controllare il compromesso tra il ritardo di riproduzione e il rischio di esaurire i frame audio o video a causa del jitter di rete.

Temporizzazione dei frame dell'animazione lunga

L'API Long Animation Frames è un'estensione dell'API Long Tasks. Misura l'attività insieme al successivo aggiornamento del rendering, aggiungendo informazioni come script a esecuzione prolungata, tempo di rendering e tempo trascorso in layout e stile forzati, noto come thrashing del layout.

Gli sviluppatori possono utilizzarlo come strumento di diagnostica per la "lentezza", misurata dall'INP, individuando le cause della congestione del thread principale, che spesso è la causa di un INP scadente.

L'interfaccia NavigationActivation aggiunge navigation.activation. Memorizza lo stato relativo al momento in cui è stato attivato il documento corrente (ad esempio quando è stato inizializzato o ripristinato dalla cache back/forward).

Ciò significa che gli sviluppatori possono offrire pagine personalizzate in base alla pagina da cui è giunto l'utente. Ad esempio, puoi eseguire un'animazione diversa se l'utente proviene dalla home page.

evento pagereveal

L'evento pagereveal viene attivato nell'oggetto window di un documento alla prima opportunità di rendering dopo che un documento è stato caricato inizialmente, ripristinato dalla cache di navigazione a ritroso o attivato da un prerendering.

Può essere utilizzato da un autore della pagina per configurare un'esperienza di accesso alla pagina, ad esempio una transizione di visualizzazione da uno stato precedente.

PointerEvent.deviceId per la funzionalità di disegno con più penne

Poiché i dispositivi con funzionalità di input con penna avanzate sono sempre più comuni, è importante che la piattaforma web continui a evolversi per supportare completamente queste funzionalità avanzate al fine di offrire esperienze ricche sia agli utenti finali sia agli sviluppatori. Uno di questi progressi è la capacità del digitizer di un dispositivo di riconoscere più di un dispositivo con penna che interagisce con esso contemporaneamente. Questa funzionalità è un'estensione dell'interfaccia PointerEvent per includere un nuovo attributo, deviceId, che rappresenta un identificatore univoco persistente per la sessione e isolato per il documento che uno sviluppatore può utilizzare in modo affidabile per identificare i singoli pennelli che interagiscono con la pagina.

Controlli di accesso alla rete privata per le richieste di navigazione: modalità solo avviso

Prima che il sito web A acceda a un altro sito B nella rete privata dell'utente, questa funzionalità:

  1. Controlla se la richiesta è stata avviata da un contesto sicuro.
  2. Invia una richiesta preflight e controlla se B risponde con un'intestazione che consente l'accesso alla rete privata.

Esistono già funzionalità per risorse secondarie e worker, ma questa aggiunta è specifica per le richieste di navigazione.

Questi controlli vengono eseguiti per proteggere la rete privata dell'utente. Poiché questa funzionalità è in modalità "solo avviso", le richieste non andranno a buon fine se uno dei controlli non va a buon fine. In DevTools verrà invece visualizzato un avviso per aiutare gli sviluppatori a prepararsi all'applicazione imminente.

Suggerimento client Sec-CH-UA-Form-Factor

Questo suggerimento indica il "form factor" dello user agent o del dispositivo, in modo che il sito possa personalizzare la risposta.

API di routing statico di Service Worker

Questa API consente agli sviluppatori di configurare il routing e di scaricare operazioni semplici eseguite dai service worker. Se la condizione corrisponde, la navigazione avviene senza avviare i service worker o eseguire JavaScript, il che consente alle pagine web di evitare penalizzazioni delle prestazioni dovute alle intercettazioni dei service worker. Per ulteriori informazioni, consulta il post del blog precedente su questa API.

Aggiornamento dello spazio di archiviazione condiviso

Questo aggiornamento supporta l'esecuzione di worklet cross-origin senza dover creare un iframe.

Codifica zstd Content-Encoding

Zstandard, o zstd, è un meccanismo di compressione dei dati descritto in RFC8878. Si tratta di un algoritmo di compressione senza perdita di dati veloce, che ha come target scenari di compressione in tempo reale a livello di zlib e rapporti di compressione migliori. Il token zstd è stato aggiunto come token Content-Encoding registrato da IANA.

L'aggiunta del supporto di zstd come codifica dei contenuti contribuirà a caricare le pagine più velocemente, a utilizzare meno larghezza di banda e a spendere meno tempo, CPU e potenza per la compressione sui nostri server, con una conseguente riduzione dei costi.

Nuove prove dell'origine

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

Integrazione della promessa JavaScript WebAssembly

Per supportare le applicazioni adattabili scritte utilizzando WebAssembly, è necessario fornire funzionalità che consentano di sospendere e riprendere i programmi WebAssembly.

Il caso d'uso iniziale principale per l'integrazione delle promesse è consentire ai programmi WebAssembly il cui codice sorgente si basa su API sincrone di utilizzare API asincrone sempre più comuni sulla piattaforma web.

Registrati per la prova dell'origine dell'integrazione delle promesse.

Rimozioni

Chrome 123 rimuove la seguente funzionalità.

L'alias window-placement per l'autorizzazione e il criterio di autorizzazione window-management

In Chrome 111, window-management è stato aggiunto come alias per le stringhe di autorizzazione e criteri di autorizzazione window-placement. Questa operazione faceva parte di un progetto più ampio volto a rinominare le stringhe ritirando e rimuovendo window-placement. La modifica della terminologia migliora la longevità del descrittore man mano che l'API Window Management si evolve nel tempo.

Gli avvisi di ritiro dell'alias window-placement sono iniziati in Chrome 113 e ora verrà rimosso.