Pubblicato: 15 maggio 2026
Le decorazioni per gli spazi CSS sono disponibili in Chrome e Edge a partire dalla versione 149. Applica uno stile agli spazi tra i layout a griglia, flexbox e a più colonne senza utilizzare bordi o pseudo-elementi. Questa funzionalità è stata creata in collaborazione tra i team di Microsoft Edge e Google Chrome.
Il problema
Gli spazi di stile tra gli elementi del layout hanno sempre richiesto soluzioni alternative. Bordi su singoli elementi, pseudo-elementi, hack dello sfondo. Questi approcci hanno costi:
- Dipendono dalla struttura. L'aggiunta di un separatore visivo comporta la modifica del markup o la scrittura di selettori per elementi specifici.
- Interferiscono con l'accessibilità. Elementi DOM aggiuntivi vengono visualizzati nell'albero di accessibilità quando non dovrebbero.
- Sono difficili da mantenere. I layout reattivi violano i presupposti su cui si basa lo stile degli spazi.
- Hanno un impatto negativo sul rendimento. Più nodi DOM, più lavoro di layout.
- Hanno un'ergonomia di creazione scadente. Spesso erano necessari calcoli geometrici complessi per far funzionare correttamente le cose.
La proprietà column-rule gestisce le decorazioni degli spazi per i layout a più colonne, ma in precedenza le griglie e i flexbox non disponevano di funzionalità equivalenti.
Soluzione
I contenitori griglia e flexbox ora accettano column-rule. Una nuova proprietà row-rule gestisce gli spazi orizzontali. Queste decorazioni sono puramente visive e non influiscono sui layout esistenti. Se utilizzi la proprietà column-rule nei layout a più colonne, il comportamento esistente rimane invariato.
Ad esempio, ecco un contenitore flessibile con tre riquadri che utilizza un elenco di stili per le regole di colonna e riga:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Come illustrato in questo esempio, sia row-rule che column-rule accettano la
stessa abbreviazione per larghezza, stile e colore. Utilizza l'abbreviazione rule per impostare entrambi
contemporaneamente.
Nuove proprietà
Tuttavia, non abbiamo solo portato column-rule in altre modalità di layout e aggiunto la controparte
row. Abbiamo anche introdotto controlli per perfezionare le decorazioni:
come si interrompono agli incroci, quanto sono distanti dai bordi degli spazi, quando
appaiono rispetto agli elementi e come variare gli stili negli spazi. Anche la larghezza, il colore e gli inserti della regola sono animabili.
Sintassi repeat()
Le decorazioni per spazi vuoti supportano repeat() per i valori di larghezza, stile e colore. In questo modo puoi variare le decorazioni negli spazi vuoti del formato breve, in modo simile alla sintassi repeat() utilizzata per le definizioni delle tracce nella griglia:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
In questo modo, i primi due spazi tra le righe hanno una regola di 1 px e il terzo una regola di 4 px, con un ciclo se ci sono più spazi che valori. Puoi anche passare più valori direttamente senza repeat(). Ad esempio, stili di regole di riga alternati per i limiti di ora e mezz'ora in un calendario:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Controllare le interruzioni della decorazione
Le proprietà column-rule-break e row-rule-break controllano il comportamento delle decorazioni nelle intersezioni degli spazi:
normal(predefinito): il comportamento dipende dal tipo di contenitore. Per saperne di più, consulta la specifica.none: Le decorazioni vengono eseguite ininterrottamente negli incroci.intersection: interruzione delle decorazioni in cui si incrociano gli spazi tra righe e colonne.
Ad esempio, se imposti rule-break su intersection in un contenitore a griglia, le regole si interrompono in corrispondenza delle intersezioni degli spazi vuoti anziché continuare:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
Se imposti rule-break su none, le regole vengono eseguite in modo continuo negli incroci:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Puoi provare questo valore nel playground interattivo.
Estendere o ridurre le decorazioni
Le proprietà column-rule-inset e row-rule-inset controllano l'estensione delle decorazioni all'interno di uno spazio. Puoi impostare gli inset su tutti i lati contemporaneamente con la notazione abbreviata o scegliere come target gli inset in modo asimmetrico con column-rule-inset-cap (per gli endpoint senza spazi vuoti) e column-rule-inset-junction (per gli endpoint che si intersecano con altri spazi vuoti).
I valori possono essere lunghezze, percentuali o la parola chiave overlap-join, che unisce le decorazioni degli spazi vuoti negli angoli. Ad esempio, se imposti rule-inset su 5 px, tutte le decorazioni vengono ridotte di 5 px verso l'interno:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
Se imposti rule-inset-cap su 0 px e rule-inset-junction su 10 px, ottieni decorazioni a filo sui bordi del contenitore, ma rientrate nelle intersezioni. La
demo della dashboard mostrata in precedenza utilizza questo approccio e gli inserti vengono animati al
passaggio del mouse:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Visibilità
Le proprietà column-rule-visibility-items e row-rule-visibility-items controllano quando vengono visualizzate le regole in base all'adiacenza degli elementi:
normal(predefinito): dipende dal tipo di contenitore.all: le regole vengono visualizzate in ogni spazio, anche in quelli vuoti.around: le regole vengono visualizzate ovunque siano presenti uno o più elementi adiacenti.between: Le regole vengono visualizzate solo tra due elementi adiacenti.
L'abbreviazione rule-visibility-items imposta entrambi contemporaneamente.
Se imposti rule-visibility-items su between, le regole verranno mostrate solo tra elementi adiacenti:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
D'altra parte, se imposti rule-visibility-items su all, le regole verranno mostrate
in ogni spazio, anche in quelli senza elementi adiacenti:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Attiva/disattiva il valore nella demo live per vedere la differenza.
Animare le decorazioni
La larghezza, il colore e gli inserti della regola sono animabili. Puoi eseguire la transizione al passaggio del mouse o a qualsiasi altra modifica dello stato. La demo della dashboard mostrata in precedenza esegue la transizione dei colori e degli inserti delle regole al passaggio del mouse:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
Demo
Tutte le demo mostrate in questo post sono disponibili sul sito demo di Edge.
Il post del blog sulla prova per gli sviluppatori include diverse altre demo, tra cui un playground interattivo, un menu a hamburger, un layout a notebook e un layout in stile rivista con una griglia di sudoku.
Modifiche apportate dalla prova per sviluppatori
Se hai provato le decorazioni degli spazi vuoti durante la prova per sviluppatori (Chrome 139), tieni presente le seguenti modifiche:
- La funzionalità è disponibile per impostazione predefinita, non sono necessari flag.
- Alcuni nomi delle proprietà sono stati aggiornati in modo da essere in linea con le ultime specifiche (ad esempio,
column-rule-outseterow-rule-outsetsono diventaticolumn-rule-inseterow-rule-inset). - Sono state aggiunte le proprietà
column-rule-visibility-itemserow-rule-visibility-items. - È stato aggiunto il supporto per le animazioni.
Utilizzare le decorazioni per le lacune oggi
Le decorazioni del divario funzionano in Chrome ed Edge a partire dalla versione 149. Se le decorazioni degli spazi sono puramente decorative, la funzionalità è un potenziamento progressivo; nei browser senza supporto, gli spazi vengono visualizzati normalmente senza decorazioni visibili. È in fase di sviluppo un polyfill per i browser che non lo supportano ancora.
Segnala i bug nello strumento Issue Tracker di Chromium. Per ulteriori informazioni, consulta la specifica CSS Gap Decorations.