Gepubliceerd: 15 mei 2026
CSS-decoraties voor tussenruimtes zijn beschikbaar in Chrome en Edge vanaf versie 149. Hiermee kunt u de tussenruimtes tussen grid-, flexbox- en multi-column-layouts vormgeven zonder gebruik te maken van randen of pseudo-elementen. Deze functie is ontwikkeld in samenwerking tussen de Microsoft Edge- en Google Chrome-teams.
Het probleem
Het opsmuk van tussenruimtes tussen lay-outelementen vereist altijd omslachtige oplossingen. Randen rond individuele elementen, pseudo-elementen, trucjes met de achtergrond. Deze benaderingen hebben echter hun nadelen:
- Ze zijn afhankelijk van de structuur. Het toevoegen van een visuele scheiding betekent dat je je markup moet aanpassen of selectors moet schrijven voor specifieke items.
- Ze belemmeren de toegankelijkheid. Er verschijnen extra DOM-elementen in de toegankelijkheidsstructuur waar ze niet thuishoren.
- Ze zijn lastig te onderhouden. Responsieve lay-outs doorbreken de aannames waarop je gap-styling was gebaseerd.
- Ze hebben een negatieve invloed op de prestaties. Meer DOM-elementen, meer lay-outwerk.
- Ze hebben een slechte ergonomie voor het maken van software. Vaak waren complexe geometrische berekeningen nodig om alles correct te laten werken.
De eigenschap column-rule regelt de opmaak van tussenruimtes bij lay-outs met meerdere kolommen, maar `grid` en `flexbox` beschikten voorheen niet over een vergelijkbare functionaliteit.
De oplossing
Grid- en flexbox-containers accepteren nu column-rule . Een nieuwe eigenschap, row-rule regelt horizontale tussenruimtes. Deze decoraties zijn puur visueel en hebben geen invloed op bestaande lay-outs. Als u de eigenschap column-rule gebruikt in lay-outs met meerdere kolommen, blijft het bestaande gedrag hetzelfde.
Hier is bijvoorbeeld een flexcontainer met drie panelen die een lijst met stijlen gebruikt voor de kolom- en rijregels:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Zoals in dit voorbeeld te zien is, accepteren zowel row-rule als column-rule dezelfde verkorte notatie voor breedte, stijl en kleur. Gebruik de rule notatie voor lijnen om beide tegelijk in te stellen.
Nieuwe woningen
We hebben echter niet alleen column-rule naar andere lay-outmodi gebracht en de row toegevoegd. We hebben ook opties geïntroduceerd om je decoraties nauwkeurig af te stellen: hoe ze afbreken bij kruispunten, hoe ver ze van de randen van de tussenruimtes af staan, wanneer ze verschijnen ten opzichte van items en hoe je stijlen kunt variëren over tussenruimtes. Lijnbreedte, kleur en afstand zijn ook allemaal te animeren.
De repeat() syntaxis
Gap-decoraties ondersteunen repeat() voor hun breedte, stijl en kleur. Hierdoor kun je decoraties in een beknopte vorm variëren, vergelijkbaar met de repeat() -syntaxis die wordt gebruikt voor trackdefinities in grid:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
Dit geeft de eerste twee rij-openingen een regel van 1px en de derde een regel van 4px, waarbij de regel zich herhaalt als er meer openingen dan waarden zijn. Je kunt ook meerdere waarden rechtstreeks doorgeven zonder repeat() . Bijvoorbeeld, afwisselende regelstijlen voor uur- en halfuurgrenzen in een kalender:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Beheers de onderbrekingen in de decoratie
De eigenschappen column-rule-break en row-rule-break bepalen hoe decoraties zich gedragen bij het overbruggen van lege ruimtes:
-
normal(standaard): Het gedrag is afhankelijk van het type container. Meer informatie is te vinden in de specificatie . -
none: Decoraties lopen ononderbroken door kruispunten. -
intersection: Decoraties worden onderbroken waar de openingen tussen rijen en kolommen elkaar kruisen.
Als je bijvoorbeeld in een rastercontainer rule-break instelt op intersection , worden de regels onderbroken bij de snijpunten van gaten in plaats van dat ze doorlopen:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
Als je rule-break op ' none instelt, worden de regels continu uitgevoerd, zelfs bij kruispunten:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Je kunt deze waarde uitproberen in de interactieve speelplaats .
Verleng of verklein de decoraties
De eigenschappen column-rule-inset en row-rule-inset bepalen hoe ver decoraties zich binnen een opening uitstrekken. U kunt in één keer aan alle zijden inspringingen instellen met de verkorte notatie, of inspringingen asymmetrisch richten met column-rule-inset-cap (voor eindpunten zonder kruisende openingen) en column-rule-inset-junction (voor eindpunten die andere openingen kruisen).
Waarden kunnen lengtes, percentages of het trefwoord overlap-join , waarmee decoraties in hoeken worden samengevoegd. Als je bijvoorbeeld rule-inset instelt op 5px, worden alle decoraties 5px naar binnen verkleind:
.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;
}
rule-inset-cap op 0px en rule-inset-junction op 10px in te stellen, krijg je decoraties die gelijk liggen met de randen van de container, maar iets naar binnen wijzen op de kruispunten. De eerder getoonde dashboarddemo gebruikt deze aanpak, en de inzetstukken animeren bij het hoveren:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Zichtbaarheid
De eigenschappen column-rule-visibility-items en row-rule-visibility-items bepalen wanneer regels verschijnen op basis van de nabijheid van items:
-
normal(standaard): Afhankelijk van het containertype. -
all: Regels verschijnen in elke opening, zelfs in lege openingen. -
around: Regels verschijnen overal waar één of meer aangrenzende items zijn. -
between: Regels verschijnen alleen tussen twee naast elkaar gelegen items.
De verkorte notatie rule-visibility-items stelt beide tegelijk in. Door rule-visibility-items in te stellen op between worden alleen regels tussen aangrenzende items weergegeven:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
Aan de andere kant zorgt het instellen rule-visibility-items op ' all ervoor dat regels in elke lege ruimte worden weergegeven, zelfs in ruimtes zonder aangrenzende items:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Wijzig de waarde in de live demo om het verschil te zien!
Levendige decoraties
De lijndikte, kleur en inzet zijn animeerbaar. Je kunt ze laten veranderen bij het hoveren of bij elke andere statuswijziging. In de eerder getoonde dashboarddemo worden de kleuren en inzet van de lijnen bij het hoveren aangepast:
.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's
Alle demo's die in dit bericht worden getoond, zijn beschikbaar op de Edge-demosite .
Het blogbericht over de ontwikkelaarstest bevat nog diverse demo's, waaronder een interactieve speelplaats , een hamburgermenu , een notitieboekindeling en een lay-out in tijdschriftstijl met een sudoku-raster.
Wijzigingen sinds de ontwikkelaarstest
Als je tijdens de ontwikkelaarstest (Chrome 139) de gap decorations hebt uitgeprobeerd, houd dan rekening met de volgende wijzigingen:
- Deze functie is standaard beschikbaar; er zijn geen vlaggen nodig.
- Sommige eigenschapsnamen zijn bijgewerkt om te voldoen aan de nieuwste specificatie (zo zijn
column-rule-outsetenrow-rule-outsetgewijzigd incolumn-rule-insetenrow-rule-inset). - De eigenschappen
column-rule-visibility-itemsenrow-rule-visibility-itemszijn toegevoegd. - Ondersteuning voor animaties is toegevoegd.
Gebruik vandaag nog gap-decoraties.
Gap-decoraties werken in Chrome en Edge vanaf versie 149. Als uw gap-decoraties puur decoratief zijn, is dit een progressieve verbetering; in browsers zonder ondersteuning worden gaps normaal weergegeven zonder zichtbare decoraties. Er wordt gewerkt aan een polyfill voor browsers die nog geen ondersteuning bieden.
Meld bugs via de Chromium-probleemtracker . Zie de CSS Gap Decorations-specificatie voor meer achtergrondinformatie.