Novità di Chrome 111

Adriana Jara

Tieni presente quanto segue:

• Crea transizioni raffinate nella tua app a pagina singola con l'API View Transitions.
• Porta i colori a un livello superiore con il supporto del livello di colore CSS 4.
• Scopri i nuovi strumenti nel riquadro degli stili per sfruttare al meglio la nuova funzionalità di colore.
• E c'è molto altro.

Sono Adriana Jara. Vediamo le novità per gli sviluppatori in Chrome 111.

Visualizza l'API Transitions.

Creare transizioni fluide sul web è un'attività complessa. L'API View Transitions semplifica la creazione di transizioni raffinate acquisendo istantanee delle visualizzazioni e consentendo al DOM di cambiare senza sovrapposizioni tra gli stati.

Transizioni create con l'API View Transition. Prova il sito demo: è richiesta la versione 111 o successive di Chrome.

La transizione di visualizzazione predefinita è una dissolvenza incrociata. Il seguente snippet implementa questa esperienza.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Quando viene chiamato .startViewTransition(), l'API acquisisce lo stato corrente della pagina.

Al termine, viene chiamato callback passato a .startViewTransition(). È qui che viene modificato il DOM. L'API acquisisce quindi il nuovo stato della pagina.

Tieni presente che l'API è stata lanciata per le app a pagina singola (SPA), ma è in corso l'implementazione del supporto anche per altri modelli.

Questa API presenta molti dettagli. Scopri di più nel nostro articolo contenente esempi e dettagli o consulta la documentazione di View Transitions su MDN.

Livello di colore CSS 4.

Con il livello di colore CSS 4, il CSS ora supporta i display ad alta definizione, specificando i colori dalle gamme HD e offrendo contemporaneamente spazi di colore con specializzazioni.

In poche parole, significa che hai a disposizione il 50% in più di colori tra cui scegliere. Pensavi che 16 milioni di colori fossero troppi. Lo pensavo anche io.

Viene mostrata una serie di immagini che passano da gamme di colori ampie a ristrette, illustrando la vivacità dei colori e i relativi effetti.
Prova

L'implementazione include la funzione color(); può essere utilizzata per qualsiasi spazio colore che specifichi i colori con i canali R, G e B. color() prende prima un parametro dello spazio colore, poi una serie di valori di canale per RGB e, facoltativamente, un po' di alfa.

Di seguito sono riportati alcuni esempi di utilizzo della funzione di colore con diversi spazi di colore.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Consulta questo articolo per ulteriori informazioni su come sfruttare al meglio i colori ad alta definizione utilizzando il CSS.

Nuovi strumenti per gli sviluppatori per i colori.

DevTools offre nuove funzionalità per supportare la specifica del livello 4 dei colori CSS.

Il riquadro Stili ora supporta i 12 nuovi spazi di colore e le 7 nuove gamme descritte nella specifica. Di seguito sono riportati alcuni esempi di definizioni di colori CSS con color(), lch(), oklab() e color-mix().

Quando utilizzi color-mix(), che consente di mescolare una percentuale di un colore con un altro, puoi visualizzare l'output del colore finale nel riquadro Calcolato.

Inoltre, il selettore di colori supporta tutti i nuovi spazi di colore con più funzionalità. Ad esempio, fai clic sul campione di colore di color(display-p3 1 0 1). È stata aggiunta anche una linea di confine della gamma che distingue le gamme sRGB e Display P3 per una comprensione più chiara della gamma del colore selezionato.

Il selettore di colori supporta anche la conversione dei colori tra formati di colore.

Consulta questo post per ulteriori informazioni sul debug del colore e su altre nuove funzionalità di devtools.

E tanto altro.

Ovviamente ce ne sono molti altri.

• CSS ha aggiunto funzioni trigonometriche, unità di caratteri principali aggiuntive e ha esteso il selettore pseudo figlio n-esimo.
• L'API Document Picture in Picture è in prova dell'origine
• Le azioni previousslide e nextslide fanno ora parte dell'API Media Session. Dai un'occhiata alla demo qui.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 111.

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

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciata la versione 112 di Chrome, sarò qui per dirti quali sono le novità.