Novità di Chrome 121

Adriana Jara

Tieni presente quanto segue:

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

Aggiornamenti del CSS.

Iniziamo dagli aggiornamenti CSS:

Le proprietà scrollbar-color e scrollbar-width sono ora disponibili. che consentono di personalizzare le barre di scorrimento e modificarne il colore e la larghezza, come avrai intuito.

La proprietà font-palette ti consente di selezionare una tavolozza specifica per il rendering di un carattere di colore. Questa proprietà ora supporta le animazioni, pertanto il passaggio da una tavolozza all'altra diventa una transizione uniforme 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 il controllo ortografico personalizzato con un aspetto più integrato.

Il mascheramento CSS per SVG è stato migliorato. Questo è un follow-up al supporto migliorato delle maschere CSS in Chrome 120, con l'aggiunta del nuovo supporto delle maschere a SVG (più maschere, oltre a mask-mode, mask-composite, mask-position e mask-repeat). Inoltre, sono ora supportate le maschere SVG remote (ad esempio,: url(masks.svg#star)).

Correzione: una versione precedente di questo articolo affermava l'aggiunta del supporto delle condizioni supports() a @import, ma in realtà non è così. La modifica è inclusa in Chrome 122.

Aggiornamenti dell'API Speculation Rules

I siti possono utilizzare l'API Speculation Rules per indicare in modo programmatico a Chrome quali pagine eseguire il prerendering, creando una migliore esperienza utente riducendo i tempi di navigazione nelle pagine.

Ora l'API include il supporto per le regole documenti, che sono 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 per i documenti possono includere criteri per l'utilizzo di questi link. Ciò, insieme al nuovo campo "eagerness", ti consente di precaricare automaticamente o prerenderizzare i link nelle pagine immediatamente, al passaggio del mouse o al mousedown.

Ecco un esempio di regole per i documenti:

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

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

Inoltre, il suggerimento No-Vary-Search consente la corrispondenza dei precaricamenti speculativi anche se i parametri di query dell'URL cambiano. L'intestazione della risposta HTTP No-Vary-Search dichiara che è possibile ignorare alcune o tutte le parti della query di un URL 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 alcuni parametri di query noti dovrebbero causare mancate corrispondenze.

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

Prova dell'origine dell'API Element Capture

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

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 scenario, potresti voler acquisire l'iframe come video e trasmetterlo ai partecipanti remoti.

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

Tieni presente che puoi utilizzare Region Capture per farlo, ma in questo caso se alcuni contenuti, ad esempio un elenco a discesa, vengono disegnati sopra quelli selezionati, questo elenco a discesa farà parte della registrazione.

Screenshot di un elenco a discesa acquisito.
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.

Screenshot dell&#39;elemento target senza alcun elenco a discesa visualizzato.
François non vede l'elenco a discesa di Elad.

Controlla l'opzione Acquisisci uno stream video da qualsiasi elemento per gli esempi di codice e registrati alla prova dell'origine di Element Capture.

E tanto altro.

Ovviamente c'è molto altro.

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

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

  • scope_extensions è in prova delle origini e consente di espandere il comportamento 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 trattati solo alcuni punti salienti. Controlla i seguenti link per ulteriori modifiche in Chrome 121.

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.

Adriano Jara e non appena uscirà Chrome 122, sarò qui per farti conoscere le novità di Chrome.