Novità di Chrome 121

Adriana Jara

Tieni presente quanto segue:

• Aggiungi un tocco unico al tuo testo con l'animazione font-palette e altri aggiornamenti CSS.
• Sono stati apportati miglioramenti all'API Speculation Rules.
• Puoi provare l'API Element Capture in una prova dell'origine.
• E ce ne sono molti altri.

Sono Adriana Jara. Scopriamo le novità di Chrome 121 per gli sviluppatori.

Aggiornamenti CSS.

Iniziamo con gli aggiornamenti CSS:

Le proprietà scrollbar-color e scrollbar-width sono ora disponibili. Con questi elementi puoi personalizzare le barre di scorrimento e, come probabilmente hai intuito, modificarne il colore e la larghezza.

La proprietà font-palette consente di selezionare una tavolozza specifica per il rendering di un carattere di colore. Questa proprietà ora supporta l'animazione, quindi il passaggio da una tavolozza all'altra diventa una transizione fluida tra le due tavolozze selezionate.

Gli pseudo-elementi ::spelling-error e ::grammar-error ti consentono di personalizzare i colori per gli errori ortografici e grammaticali, evidenziare le parole con errori ortografici con colori di sfondo o altre decorazioni e implementare la correzione ortografica personalizzata con un aspetto più integrato.

Il mascheramento CSS per SVG è stato migliorato. Si tratta di un aggiornamento del supporto delle maschere CSS in Chrome 120, che aggiunge il supporto di nuove maschere a SVG (più maschere, nonché mask-mode, mask-composite, mask-position e mask-repeat). Inoltre, ora sono supportate le maschere SVG remote (ad esempio mask: url(masks.svg#star)).

Correzione: una versione precedente di questo articolo menzionava l'aggiunta del supporto per le condizioni supports() a @import, il che non era vero. La modifica è inclusa in Chrome 122.

Aggiornamenti dell'API Speculation Rules

I siti possono utilizzare l'API Speculation Rules per indicare a Chrome in modo programmatico quali pagine prerenderizzare, creando un'esperienza utente migliore riducendo il tempo di navigazione nelle pagine.

Ora l'API supporta le regole per i documenti: si tratta di un'estensione della sintassi delle regole di speculazione che consente al browser di ottenere l'elenco di URL per il caricamento speculativo dagli elementi di una pagina. Le regole dei documenti possono includere i criteri per stabilire quali di questi link possono essere utilizzati. Questo, insieme al nuovo campo "eagerness", consente di precaricare o eseguire il prerendering automatico dei link nelle pagine immediatamente, al passaggio del mouse o al passaggio del mouse.

Ecco un esempio di regole del documento:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Una modifica separata consente di specificare regole di speculazione utilizzando l'intestazione della risposta HTTP Speculation-Rules. L'intestazione è un'alternativa all'utilizzo di elementi <script> in linea. Il valore di questa intestazione deve essere un URL che rimandi a una risorsa di testo con tipo MIME "application/speculationrules+json". Le regole della risorsa verranno aggiunte all'insieme di regole del documento.

Inoltre, l'indicazione No-Vary-Search consente alle preletture speculative di corrispondere anche se i parametri di query dell'URL cambiano. L'intestazione di risposta HTTP No-Vary-Search dichiara che alcune o tutte le parti della query di un URL possono essere ignorate ai fini della corrispondenza. Può dichiarare che l'ordine delle chiavi dei parametri di query non deve impedire le corrispondenze, che parametri di query specifici non devono impedire le corrispondenze o che solo determinati parametri di query noti devono causare mancate corrispondenze.

Per saperne di più su queste modifiche, consulta Miglioramenti all'API Speculation Rules.

Prova dell'origine dell'API Element Capture

L'API Element Capture è disponibile in una prova dell'origine. Questa API ti consente di acquisire e registrare uno specifico elemento HTML. Trasforma un'acquisizione dell'intera scheda in un'acquisizione di un sottoalbero DOM specifico, acquisendo solo i discendenti diretti dell'elemento target. In altre parole, ritaglia e rimuove sia i contenuti che ostruiscono l'inquadratura sia quelli coperti.

Un esempio di utilità dell'API Element Capture è un'app per videoconferenze che consente di incorporare applicazioni di terze parti in un iframe. In questo caso, ti consigliamo di acquisire l'iframe come video e di trasmetterlo ai partecipanti remoti.

Elad utilizza un'applicazione di terze parti in una chiamata di videoconferenza con François.

Tieni presente che puoi utilizzare Acquisizione regione per farlo, ma in questo caso se alcuni contenuti, come un elenco a discesa, vengono visualizzati sopra quelli selezionati, quell'elenco a discesa farà parte della registrazione.

L'elenco a discesa di Elad viene visualizzato sopra i contenuti ricevuti da François.

L'API Element Capture risolve questo problema consentendoti di scegliere come target l'elemento che vuoi condividere.

François non vede l'elenco a discesa di Elad.

Consulta Acquisisci uno stream video da qualsiasi elemento per gli esempi di codice e registrati alla prova dell'origine ElementCapture

E tanto altro.

Ovviamente ce ne sono molti altri.

• I metodi resizeBy() e resizeTo(), che fanno parte dell'API Document Picture-in-Picture, ora richiedono un gesto dell'utente.

• Puoi aprire in modo programmatico il selettore di opzioni di un elemento <select> con il metodo showPicker() di HTMLSelectElement.

• scope_extensions, è in prova dell'origine, consente di espandere i comportamenti di un'app web in modo da includere altre origini, se esiste un accordo tra l'origine principale di un'app web e le origini associate.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Consulta i seguenti link per altre modifiche in Chrome 121.

• Novità di Chrome DevTools (121)
• Ritiro e rimozione di funzionalità in Chrome 121
• Aggiornamenti di ChromeStatus.com per Chrome 121
• Elenco delle modifiche al repository di codice sorgente di Chromium
• Calendario delle release di Chrome

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al canale YouTube degli sviluppatori di Chrome: riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciato Chrome 122, sarò qui per raccontarti le novità di Chrome.