Pubblicato: 11 giugno 2025
Di' addio ai hack per bordi e pseudo elementi e dai il benvenuto alle decorazioni con spazi CSS.
Il team di Microsoft Edge è lieto di annunciare che le decorazioni degli spazi CSS, un nuovo modo per impostare lo stile degli spazi tra gli elementi nei layout flessibili, a griglia e con più colonne, sono ora disponibili per la prova degli sviluppatori in Chrome ed Edge 139.
Provala e condividi il tuo feedback per contribuire a plasmare il futuro di questa API.
Link utili
Problema
Gli spazi di stile nei componenti dell'interfaccia utente, come calendari, schede o griglie di dati, possono migliorare notevolmente la leggibilità e contribuire all'estetica complessiva. Tuttavia, ottenere questo effetto nei layout di grid e flexbox ha tradizionalmente richiesto soluzioni ingegnose con bordi, pseudo-elementi o trucchi di sfondo. Queste soluzioni possono essere problematiche per diversi motivi.
- Non intuitivi: introducono dipendenze strutturali per lo stile visivo, contrariamente ai principi dell'HTML semantico.
- Non sono accessibili: spesso richiedono elementi DOM aggiuntivi, che potrebbero interferire con le tecnologie per la disabilità, come gli screen reader.
- Difficili da gestire: richiedono una logica di layout complicata e rendono più difficile la definizione di uno stile coerente tra i componenti.
- Risultato negativo sul rendimento: queste soluzioni alternative potrebbero aggiungere elementi non necessari al DOM, causando problemi di rendimento.
Sebbene la piattaforma web supporti già gli spazi di stile con la proprietà column-rule, al momento questa funzionalità è limitata solo ai layout multicolonna. Da tempo gli sviluppatori web richiedono un modo coerente per applicare stili agli spazi in altri tipi di layout pertinenti, come la griglia e flexbox.
La soluzione: decorazioni con spaziatura CSS
Le decorazioni spaziatura estendono la proprietà column-rule in modo che funzioni con altri tipi di layout come griglia e flexbox e introducono una nuova proprietà row-rule per completarla. In questo modo, viene garantita coerenza e nuova personalizzazione allo stile degli spazi tra diversi tipi di layout.
Le decorazioni degli spazi CSS offrono i seguenti vantaggi:
- Nessun impatto sul layout: le decorazioni sono puramente visive. Non influiscono sul layout o sulla spaziatura, quindi puoi adottarli senza temere di danneggiare i design esistenti.
- Sintassi di ripetizione: in modo simile a CSS Grid, puoi utilizzare la sintassi
repeat()per creare motivi di decorazioni in diverse parti di un contenitore, consentendo di realizzare design completi e coerenti con un CSS minimo. - Markup più pulito:non sono necessari elementi aggiuntivi o pseudo-elementi, ma solo stili di spaziatura diretti.
- Personalizzazione: le nuove proprietà CSS come
*rule-break,*rule-outsetegap-rule-paint-orderconsentono più opzioni di personalizzazione rispetto allo stile delle regole tradizionali di larghezza, stile e colore.
Con le decorazioni degli spazi CSS, è più facile che mai creare layout di pagine distinti visivamente e gestibili.
Decorazioni spaziature in azione
Per provare le decorazioni degli spazi CSS oggi, utilizza un browser che le supporta: Edge o Chrome, a partire dalla versione 139, e attiva/disattiva l'opzione Attiva funzionalità sperimentali della piattaforma web in edge://flags o chrome://flags.
Playground interattivo per sviluppatori
Per provare i diversi tipi di layout in cui sono supportate le decorazioni degli spazi CSS e tutte le nuove proprietà, prova il nostro laboratorio interattivo per sviluppatori.
Menu di navigazione
La demo del menu a tre linee mostra come utilizzare la proprietà column-rule-break: intersection per interrompere le decorazioni degli spazi tra le colonne a ogni intersezione visibile con gli spazi tra le righe.
La demo utilizza anche column-rule-offset: -15px per regolare la lunghezza delle decorazioni, allontanandole dai bordi di ogni incrocio.
Notebook
Nella demo del notebook,
row-rule-break: none garantisce che le decorazioni delle righe non vengano interrotte alle
intersezioni: vengono eseguite in modo continuo dalla sinistra alla destra del contenitore.
D'altra parte, column-rule-break: spanning-item garantisce che le decorazioni delle colonne non vengano dipinte dietro gli elementi che si estendono, ma inizino e terminino in corrispondenza di questi elementi formando un'intersezione a T visibile.
La proprietà row-rule utilizza la funzione repeat() per avere un controllo preciso sul modo in cui le decorazioni degli spazi vengono applicate a diverse sezioni del layout.
In questo modo, viene attivato uno schema di stile in cui le regole di riga sono nascoste nell'intestazione e nel piè di pagina, più spesse intorno ai contenuti principali e più sottili altrove.
Notizie giornaliere CSS
La demo di Daily CSS News utilizza un layout in stile rivista e definisce le decorazioni degli spazi CSS in più contenitori di grid e flexbox.
Notare il gioco di Sudoku a destra, che utilizza una griglia 9x9 e il pattern ripetuto per disegnare le linee sottili e spesse tra righe e colonne:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
Chiedere feedback
Siamo entusiasti che tu voglia provare le decorazioni degli spazi CSS. Riteniamo che risolva un problema comune e ci piacerebbe ricevere il tuo feedback in merito per poter perfezionare la funzionalità in base alle tue esigenze.
La funzionalità di decorazioni degli spazi CSS è ancora in fase di implementazione in Chromium. Se lo provi, tieni presente che stiamo ancora lavorando attivamente alla funzionalità e che potresti riscontrare casi in cui non si comporta come previsto. Alcuni dei limiti attuali riguardano l'animazione delle decorazioni degli spazi e l'utilizzo di un numero molto elevato di canali della griglia.
Se trovi un bug o hai commenti sulla funzionalità, condividi il tuo feedback aprendo un nuovo bug di Chromium.