Gepubliceerd: 11 juni 2025
Zeg vaarwel tegen border- en pseudo-element-hacks en hallo tegen CSS-gapdecoraties.
Het Microsoft Edge-team is verheugd om aan te kondigen dat CSS gap decoration, een nieuwe manier om de ruimtes tussen items in flex-, raster- en multi-kolomlay-outs te stylen, nu beschikbaar is voor ontwikkelaars in Chrome en Edge 139!
Probeer het uit en deel uw feedback om de toekomst van deze API te helpen vormgeven.
Nuttige links
Probleem
Het aanbrengen van stijlgaten in UI-componenten zoals kalenders, kaarten of gegevensrasters kan de leesbaarheid aanzienlijk verbeteren en bijdragen aan de algehele esthetiek. Het bereiken van dit effect in raster- en flexbox-indelingen vereiste echter traditioneel lastige oplossingen met randen, pseudo-elementen of achtergrondtrucs. Deze oplossingen kunnen om verschillende redenen problematisch zijn.
- Niet-intuïtief: Ze introduceren structurele afhankelijkheden voor visuele styling, wat in strijd is met de principes van semantische HTML.
- Onvriendelijk voor toegankelijkheid: Ze vereisen vaak extra DOM-elementen, die de werking van ondersteunende technologieën, zoals schermlezers, kunnen verstoren.
- Moeilijk te onderhouden: Ze vereisen een ingewikkelde lay-outlogica en maken het lastiger om een consistente styling voor alle componenten te handhaven.
- Slecht voor de prestaties: Deze oplossingen voegen mogelijk onnodige elementen toe aan de DOM, wat tot prestatieproblemen kan leiden.
Hoewel het webplatform al stylinggaten ondersteunt met de eigenschap column-rule , is dit momenteel beperkt tot lay-outs met meerdere kolommen . Webontwikkelaars vragen al lang om een consistente manier om gaten te stylen in andere relevante lay-outtypen, zoals grid en flexbox.
De oplossing: CSS-gapdecoraties
Gap-decoraties breiden de eigenschap column-rule uit om te werken met andere lay-outtypen, zoals raster en flexbox, en introduceren een nieuwe eigenschap row-rule als aanvulling hierop. Dit zorgt voor consistentie en nieuwe aanpasbaarheid in de manier waarop gaten worden vormgegeven in verschillende lay-outtypen.
CSS-gapdecoraties bieden de volgende voordelen:
- Geen impact op de lay-out: de decoraties zijn puur visueel. Ze hebben geen invloed op de lay-out of ruimte, dus je kunt ze toepassen zonder bang te zijn dat je bestaande ontwerpen overtreft.
- Herhaal-syntaxis: vergelijkbaar met CSS Grid kunt u de
repeat()syntaxis gebruiken om patronen van decoraties in verschillende delen van een container te maken, wat rijke, consistente ontwerpen mogelijk maakt met minimale CSS. - Schonere markering: Er zijn geen extra elementen of pseudo-elementen nodig; u kunt de gaten gewoon direct opmaken.
- Aanpasbaarheid: Nieuwe CSS-eigenschappen zoals
*rule-break,*rule-outsetengap-rule-paint-orderbieden meer aanpassingsopties dan de traditionele regelopmaak van breedte, stijl en kleur.
Met CSS-gapdecoraties is het eenvoudiger dan ooit om visueel onderscheidende en onderhoudbare paginalay-outs te maken.
Gap-decoraties in actie
Als u vandaag de dag met CSS-gapdecoraties wilt experimenteren, gebruikt u een browser die deze ondersteunt: Edge of Chrome, vanaf versie 139, en schakelt u de vlag 'Enable Experimental Web Platform Features ' in door naar edge://flags of chrome://flags te gaan.
Interactieve ontwikkelaarsspeeltuin
Wilt u de verschillende typen lay-outs uitproberen waarbij CSS-gapdecoraties worden ondersteund en die boordevol nieuwe eigenschappen zitten, probeer dan onze interactieve ontwikkelaarsomgeving .
Burgermenu
In de demo van het burgermenu ziet u hoe u de eigenschap column-rule-break: intersection kunt gebruiken om kolomopeningdecoraties bij elke zichtbare kruising met rijopeningen te verbreken.
In de demo wordt ook column-rule-offset: -15px gebruikt om de lengte van de versieringen aan te passen en ze verder van de randen van elke kruising af te trekken.
Notitieboekje
In de notebookdemo zorgt row-rule-break: none ervoor dat rijdecoraties niet worden onderbroken bij kruispunten: ze lopen doorlopend van links naar rechts in de container. column-rule-break: spanning-item daarentegen zorgt ervoor dat kolomdecoraties niet achter overspannende items worden getekend: ze beginnen en stoppen bij overspannende items die een zichtbare T-kruising vormen.
De eigenschap row-rule gebruikt de functie repeat() om nauwkeurige controle te hebben over hoe tussenruimtedecoraties worden toegepast op verschillende secties van de lay-out. Dit maakt een stijlpatroon mogelijk waarbij rijregels verborgen zijn in de kop- en voettekst, dikker zijn rond de hoofdinhoud en subtieler elders.
Dagelijks CSS-nieuws
De demo van Daily CSS News maakt gebruik van een lay-out in magazine-stijl en definieert CSS-gapdecoraties over meerdere raster- en flexboxcontainers.
Let op het Sudoku-spel aan de rechterkant, waarbij een raster van 9x9 wordt gebruikt en een herhalend patroon om de dunne en dikke lijnen tussen rijen en kolommen te tekenen:
.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);
}
Oproep voor feedback
We zijn blij dat je CSS gap-decoraties gaat uitproberen. We denken dat het een veelvoorkomend probleem oplost en we horen graag je feedback, zodat we de functie kunnen verfijnen en aan je behoeften kunnen laten voldoen.
De CSS-functie voor gap-decoraties wordt nog steeds geïmplementeerd in Chromium. Als je het test, houd er dan rekening mee dat we er nog steeds actief aan werken en dat je gevallen kunt tegenkomen waarin het niet naar behoren functioneert. Enkele van de huidige beperkingen hebben betrekking op het animeren van gap-decoraties en het gebruik van een zeer groot aantal rastersporen.
Als u een bug vindt of opmerkingen hebt over de functie, deel dan uw feedback door een nieuwe Chromium-bug te openen.