Novità di Chrome 111

Adriana Jara

Tieni presente quanto segue:

• Crea transizioni fluide nella tua app a pagina singola con l'API View Transiziones.
• Porta i colori a un livello superiore con il supporto del livello 4 di colore CSS.
• Scopri nuovi strumenti nel riquadro Stile per utilizzare al meglio la nuova funzionalità per i colori.
• E ce ne sono molti altri.

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

Visualizza l'API Transizione.

Creare transizioni fluide sul web è un'attività complessa. L'API View Transiziones consente di semplificare la creazione di transizioni nitide, creando snapshot delle visualizzazioni e consentendo al DOM di cambiare senza sovrapposizioni tra gli stati.

Transizioni create con l'API View Transizione. Prova il sito dimostrativo: richiede Chrome 111 o versioni successive.

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 attuale della pagina.

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

Tieni presente che l'API è stata lanciata per le app a pagina singola (APS), ma verrà implementato anche il supporto per altri modelli.

Questa API offre molti dettagli, scopri di più nel nostro articolo contenente esempi e dettagli o esplora la documentazione sulle transizioni su MDN.

Livello di colore CSS 4.

Con il livello di colore 4 CSS, ora CSS supporta la visualizzazione ad alta definizione, che consente di specificare i colori delle gamut HD e di offrire anche spazi colore con specializzazioni.

In poche parole, significa 50% in più di colori tra cui scegliere. Pensavi che 16 milioni di colori fossero molti. Anche io l'avevo pensato.

Viene mostrata una serie di immagini che passano da una gamma di colori ampia a una stretta e illustrano la nitidezza dei colori e i suoi effetti.
Fai una prova

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

Ecco alcuni esempi di utilizzo della funzione colore con spazi colore diversi.

.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 ulteriore documentazione su come sfruttare al meglio i colori ad alta definizione mediante CSS.

Nuovi strumenti per sviluppatori di colori.

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

Il riquadro Stili ora supporta i 12 nuovi spazi colore e 7 nuovi gamut descritti nelle specifiche. Ecco alcuni esempi di definizioni dei 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 color(display-p3 1 0 1). È stata aggiunta anche una linea di confine della gamma, che distingue tra sRGB e display-p3 per una migliore comprensione della gamma di colori selezionati.

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

Leggi questo post per ulteriori informazioni sul debug dei colori e su altre nuove funzionalità di DevTools.

E tanto altro.

Ovviamente c'è molto altro.

• Il CSS ha aggiunto funzioni trigonometriche, unità di carattere radice aggiuntive e ha esteso l'n-esima pseudo-selettore.
• L'API Document Picture in Picture è in prova dell'origine
• Le azioni previousslide e nextslide ora fanno parte dell'API Media Session. Guarda la demo qui.

Per approfondire

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

• Novità di Chrome DevTools (111)
• Deprecazioni e rimozioni di Chrome 111
• Aggiornamenti di ChromeStatus.com per Chrome 111
• 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.

Sono Adriana Jara e non appena uscirà Chrome 112 sarò qui per raccontarti le novità di Chrome.