Data di pubblicazione: 3 giugno 2026
Ti diamo il benvenuto nel riepilogo mensile di Baseline. A maggio 2026, diverse nuove funzionalità CSS, proprietà evento e aggiunte API sono diventate Baseline Newly available, mentre le unità CSS, le proprietà di interazione utente e le pseudo-classi hanno raggiunto Baseline Widely available, insieme a importanti aggiornamenti della community di sviluppatori.
Sondaggio sullo stato del programma CSS nel 2026
È arrivato il sondaggio annuale della community web: il sondaggio State of CSS 2026 è ora aperto. Quest'anno, gli organizzatori hanno compiuto uno sforzo consapevole per perfezionare il sondaggio, concentrandosi sulle funzionalità più importanti per gli sviluppatori in un'era di programmazione assistita dall'AI. I fornitori di browser monitorano attentamente questi risultati per dare la priorità alle loro roadmap di ingegneria e risolvere i punti critici degli sviluppatori. Assicurati di far sentire la tua voce e condividere la tua esperienza con il panorama CSS in evoluzione prima della chiusura del programma il 1° luglio.
Funzionalità di base appena disponibili
Le funzionalità in questa sezione sono supportate a partire da maggio 2026 nel set di browser di base e sono ora disponibili come Baseline.
Query di stile del contenitore
Le query sui contenitori non sono più limitate alle dimensioni. Con le query di stile, ora puoi applicare stili agli elementi in base alle proprietà personalizzate di un contenitore principale. In questo modo puoi creare componenti altamente modulari che possono adattare il tema o lo stile in base al posizionamento contestuale senza fare affidamento su strutture di classi complesse.
Scopri di più nella pagina di riferimento MDN per @container.
:open pseudo-classe
Gli elementi di stile con stati aperti e chiusi, come <dialog> e <details>, in precedenza richiedevano il controllo degli attributi o la gestione delle classi. La pseudo-classe :open semplifica questa operazione abbinando questi elementi solo quando sono attualmente nello stato aperto, consentendo un CSS più pulito e dichiarativo.
Scopri di più nella pagina MDN per la pseudo-classe :open.
ToggleEvent.source
Quando lavori con l'API Popover, reagire ai cambiamenti di stato è fondamentale. La proprietà source dell'interfaccia ToggleEvent restituisce l'elemento di controllo che ha attivato l'azione di attivazione/disattivazione del popup. In questo modo, puoi identificare l'origine dell'evento e coordinare interazioni complesse della UI.
Scopri di più nella documentazione MDN per ToggleEvent.source.
image-rendering struttura
La proprietà CSS image-rendering consente di controllare l'algoritmo di scalabilità utilizzato durante il ridimensionamento delle immagini. Ciò è particolarmente utile per la pixel art, le immagini a bassa risoluzione o i codici QR, dove è importante evitare l'interpolazione sfocata e mantenere la scalabilità nitida e pixelata.
Scopri come utilizzarlo nella pagina MDN per image-rendering.
text-decoration-skip-ink: all
Le sottolineature che passano attraverso le aste discendenti a volte possono sembrare disordinate. Mentre text-decoration-skip-ink: auto salta l'inchiostro solo quando si interseca, impostandolo su all la sottolineatura salta tutti i glifi indipendentemente dall'intersezione, offrendo un maggiore controllo sull'estetica della tipografia.
Leggi i dettagli nella guida MDN per text-decoration-skip-ink.
SharedWorker
L'API SharedWorker fornisce un worker in background specializzato a cui è possibile accedere da più contesti di navigazione, ad esempio finestre, schede o iframe diversi sulla stessa origine. Questa funzionalità è utile per condividere lo stato, gestire le connessioni o coordinare le attività in background tra i limiti delle schede.
Consulta la documentazione di MDN per SharedWorker.
Funzionalità di base ampiamente disponibili
Le seguenti funzionalità sono diventate ampiamente disponibili in Baseline, il che significa che ora sono ampiamente compatibili e utilizzabili nei tuoi progetti.
Unità di lunghezza lh
L'unità relativa lh corrisponde all'altezza della linea calcolata dell'elemento su cui viene utilizzata. In questo modo è più semplice dimensionare gli elementi, come i badge delle icone o le evidenziazioni dello sfondo, in modo che corrispondano perfettamente all'altezza di una riga di testo.
Scopri di più nella documentazione di riferimento di MDN per le unità di lunghezza.
Unità di lunghezza rlh
Analogamente a lh, l'unità rlh rappresenta l'altezza della riga, ma in particolare dell'elemento root (<html>). In questo modo puoi stabilire un ritmo verticale coerente in tutta la pagina, indipendentemente dalle dimensioni del carattere locali o dagli override dell'altezza della riga.
Scopri di più nella documentazione di riferimento di MDN sulle unità di lunghezza.
Navigator.userActivation
Molte API web (come la riproduzione video, i popup o l'accesso agli appunti) richiedono l'interazione utente prima di poter essere attivate. La proprietà Navigator.userActivation restituisce un oggetto contenente informazioni sullo stato di attivazione attuale e storico dell'utente nella finestra, consentendo agli script di verificare se si è verificata un'attivazione dall'utente.
Scopri come utilizzarlo nella pagina MDN per Navigator.userActivation.
clip-path
La proprietà CSS clip-path consente di creare una regione di ritaglio che definisce quale parte di un elemento deve essere visibile. Utilizzando forme di base (come cerchi, ellissi o poligoni) o percorsi SVG, puoi creare layout e transizioni coinvolgenti senza nascondere l'overflow.
Controlla i dettagli di implementazione nella pagina MDN per clip-path.
:user-invalid pseudo-classe
A differenza di :invalid, che applica lo stile non appena viene caricata una pagina (spesso con conseguente UX scadente), la pseudoclasse :user-invalid corrisponde solo agli elementi del modulo non validi dopo che l'utente ha interagito con loro. Ciò significa che puoi mostrare il feedback di convalida del modulo dopo che l'utente ha lasciato il campo.
Scopri come funziona nella documentazione MDN per :user-invalid.
Conclusioni
Se ritieni che abbiamo dimenticato qualcosa relativo a Baseline, comunicacelo e ci assicureremo che venga incluso in una versione futura. Se hai domande o vuoi fornire feedback su Baseline, puoi segnalare un problema nel nostro strumento di monitoraggio dei problemi.