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 le nuove funzionalità relative ai colori.
• E c'è molto altro.

Sono Adriana Jara. Vediamo quali sono le novità di Chrome 111 per gli sviluppatori.

Visualizza API Transizione.

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.

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. Quindi, l'API acquisisce 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, CSS ora supporta la visualizzazione ad alta definizione, che consente di specificare i colori di gamut HD, offrendo al contempo spazi colore con specializzazioni.

In poche parole, significa che puoi scegliere il 50% di colori in più. Pensavi che 16 milioni di colori fossero troppi. Lo pensavo anch'io.

L'implementazione include la funzione color(); può essere utilizzata per qualsiasi spazio colore che specifica 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 di sviluppo colore.

Devtools ha nuove funzionalità per supportare la specifica CSS di livello 4 del colore.

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 colori supporta tutti i nuovi spazi 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 colori supporta anche la conversione dei colori da un formato all'altro.

Consulta questo post per saperne di più sul debug del colore e su altre nuove funzionalità di devtools.

E tanto altro.

Naturalmente c'è molto altro.

• Il CSS ha aggiunto funzioni trigonometriche, unità di caratteri principali e esteso lo pseudo selettore secondario.
• 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

Vengono illustrati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 111.

• Novità di Chrome DevTools (111)
• Ritiro e rimozioni in Chrome 111
• Aggiornamenti di ChromeStatus.com per Chrome 111
• Elenco delle modifiche al repository di origine di Chromium
• Calendario dei rilasci 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à rilasciata la versione 112 di Chrome, sarò qui per dirti quali sono le novità.