Data di pubblicazione: 2 marzo 2026
Ti diamo il benvenuto nell'edizione di gennaio 2026 del riepilogo di Baseline. Ogni mese, mettiamo in evidenza le funzionalità della piattaforma web che hanno raggiunto nuovi traguardi in Baseline, aiutandoti a capire quali strumenti sono pronti per essere utilizzati nei tuoi progetti oggi.
Gennaio è stato un inizio anno entusiasmante, con diverse API e unità CSS significative che sono passate alla categoria Nuove disponibili, oltre a un importante miglioramento del layout che è diventato Disponibile su larga scala.
Funzionalità di base di recente disponibili
Le seguenti funzionalità web sono diventate Baseline Newly available a gennaio 2026.
Transizione della visualizzazione attiva
La
pseudo-classe CSS :active-view-transition
è ora disponibile in Baseline Newly. Questo selettore consente agli sviluppatori di scegliere come target e
applicare uno stile specifico all'elemento radice di un documento mentre è in corso una transizione di visualizzazione. Ciò è particolarmente utile per applicare stili o aggiustamenti globali
che devono esistere solo durante il periodo di transizione, ad esempio per modificare il
colore di sfondo dell'overlay di transizione o per regolare lo z-index di livelli specifici
per garantire un flusso visivo uniforme.
Moduli JavaScript nei service worker
I service worker ora supportano i moduli JavaScript
in tutti i principali motori del browser. Se imposti l'opzione type: 'module' quando
chiami navigator.serviceWorker.register(), puoi utilizzare le istruzioni standard import e
export all'interno dello script del service worker. In questo modo, i service worker sono in linea con le moderne pratiche di sviluppo JavaScript, consentendo una migliore organizzazione del codice, una gestione più semplice delle dipendenze e la possibilità di condividere il codice tra il thread principale e il service worker in background.
API Navigation
L'API Navigation
fornisce un'alternativa moderna e appositamente creata all'API History legacy,
progettata specificamente per le esigenze delle applicazioni a pagina singola (SPA). Offre un modo centralizzato per avviare, intercettare e gestire tutti i tipi di azioni di navigazione, incluse quelle attivate dai pulsanti Indietro e Avanti del browser. Con eventi come Maps, gli sviluppatori possono implementare un routing lato client più fluido con meno codice boilerplate. Per approfondire in che modo questa modifica influisce sul modo in cui creiamo per il web, consulta il nostro post del blog dedicato: Routing lato client moderno: l'API Navigation.
rcap unità CSS
L'unità rcap
è un'unità di lunghezza relativa al carattere principale uguale all'"altezza delle maiuscole" (l'altezza nominale
delle lettere maiuscole) del carattere dell'elemento principale. Ciò consente di ottenere layout tipografici precisi che vengono scalati in base al carattere principale utilizzato sul sito, anziché solo alle dimensioni del carattere.
rch unità CSS
Simile all'unità ch, ma relativa all'elemento radice, l'unità rch
rappresenta la larghezza, o più precisamente la misura di avanzamento, del glifo "0" (zero)
nel carattere dell'elemento radice. È ideale per creare layout che dipendono
dalla larghezza dei caratteri, ad esempio un contenitore che deve adattarsi con precisione a un numero specifico
di caratteri nel carattere radice.
rex unità CSS
L'unità rex
è
la versione relativa alla radice di ex, pari all'altezza x del carattere
dell'elemento radice. Questa unità è particolarmente utile per l'allineamento verticale e il dimensionamento
degli elementi rispetto all'altezza delle lettere minuscole nella tipografia
principale del documento.
ric unità CSS
L'unità ric è
la controparte relativa alla radice dell'unità ic. È uguale alla misura di avanzamento "ideografica" (in genere la larghezza o l'altezza di un ideogramma CJK) del carattere dell'elemento radice. Si tratta di uno strumento fondamentale per gli sviluppatori che creano layout internazionalizzati, in particolare quelli che utilizzano caratteri cinesi, giapponesi o coreani.
Funzionalità di base ampiamente disponibili
Le seguenti funzionalità web sono diventate ampiamente disponibili in Baseline a gennaio 2026.
Proprietà CSS display a due valori
La
sintassi multichiave per la proprietà display
è ora ampiamente disponibile nella baseline. Questo aggiornamento ti consente di definire in modo esplicito
i tipi di visualizzazione "esterno" e "interno" di una casella. Ad esempio, anziché il carattere
precomposto inline-flex, puoi utilizzare display: inline flex. In questo modo viene chiarito
se un elemento partecipa al flusso di blocco o in linea (il tipo esterno) e come
vengono disposti i relativi elementi secondari (il tipo interno, come flex o grid). Questa modifica
rende il motore di layout CSS più logico e coerente per gli sviluppatori.
La proprietà CSS animation-composition
La proprietà animation-composition
definisce il modo in cui più animazioni devono interagire quando influiscono contemporaneamente sulla stessa
proprietà. Puoi scegliere tra replace, add o
accumulate, che ti consentono di controllare con precisione il modo in cui vengono calcolate le animazioni complesse e a più livelli.
Array per copia
JavaScript ora include
metodi che ti consentono di trasformare gli array
senza modificare i dati originali. Metodi come toReversed(), toSorted()
e toSpliced() restituiscono una nuova copia modificata dell'array, promuovendo uno stile di programmazione più
funzionale e sicuro.
Aiutaci a migliorare
Come al solito, facci sapere se abbiamo dimenticato qualcosa relativo a Baseline e ci assicureremo che venga incluso in un'edizione futura. Se hai domande o vuoi fornire feedback su Baseline, puoi segnalare un problema nel nostro strumento di monitoraggio dei problemi.