Novità di Chrome 121

Adriana Jara

Tieni presente quanto segue:

Mi chiamo 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. che consentono di personalizzare le barre di scorrimento e modificarne, come avrai intuito, il loro colore e la loro larghezza.

La proprietà font-palette ti 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 consentono di personalizzare i colori per gli errori ortografici e grammaticali, evidenziare 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. Si tratta di un follow-up del supporto migliorato per le maschere CSS in Chrome 120, con l'aggiunta di un nuovo supporto per le maschere SVG (più maschere, oltre a mask-mode, mask-composite, mask-position e mask-repeat). Inoltre, ora sono supportate le maschere SVG remote (ad es. maschera url(masks.svg#star)).

Correzione: una versione precedente di questo articolo citava l'aggiunta del supporto per le condizioni supports() a @import, ma 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 le pagine di cui eseguire il prerendering, creando una migliore esperienza utente riducendo i tempi 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 per i documenti possono includere criteri per l'utilizzo di questi link. 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 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 hint No-Vary-Search consente la corrispondenza dei precaricamento speculativi anche se i parametri di query dell'URL cambiano. L'intestazione della risposta HTTP No-Vary-Search dichiara che alcune o tutte le parti della query di un URL possono essere ignorate per la 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 errori di corrispondenza.

Visita la pagina Miglioramenti all'API Speculation Rules per ulteriori informazioni su queste modifiche.

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 l'acquisizione dell'intera scheda in uno specifico sottoalbero DOM, in modo da acquisire solo i discendenti diretti dell'elemento target. In altre parole, ritaglia e rimuove sia i contenuti oscuri che quelli occulti.

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 un video e trasmetterlo ai partecipanti da remoto.

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

Per farlo, puoi utilizzare Acquisizione regione, ma in questo caso se alcuni contenuti, come un elenco a discesa, vengono visualizzati sopra i contenuti selezionati, quell'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 un elenco a discesa visualizzato.
François non vede l'elenco a discesa di Elad.

Vai a Acquisisci uno stream video da qualsiasi elemento per esempi di codice e registrati alla prova dell'origine di Element Capture

E tanto altro.

Naturalmente 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 di opzioni di un elemento <select> con il metodo showPicker() di HTMLSelectElement.

  • scope_extensions, in fase di prova dell'origine, consente di espandere i comportamenti di un'app web per 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. Visita i seguenti link per altre modifiche in Chrome 121.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Ciao Adriana Jara, non appena verrà rilasciato Chrome 122, sarò qui per illustrarti le novità di Chrome.