Tieni presente quanto segue:
- Aggiungi un tocco esclusivo al 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 molte altre.
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.
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.
L'API Element Capture risolve questo problema consentendoti di scegliere come target l'elemento che vuoi condividere.
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()
eresizeTo()
, 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 metodoshowPicker()
diHTMLSelectElement
.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.
- Novità di Chrome DevTools (121)
- Deprecazioni e rimozioni di Chrome 121
- Aggiornamenti di ChromeStatus.com per Chrome 121
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
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.