v149 · CSS

Compatibility Lab

Probes column-rule in flex/grid contexts, row-rule, and the repeat() gap-rule syntax with CSS.supports(). Shows native gap decorations side by side with the old border-hack fallback, and provides the @supports progressive-enhancement pattern.

CSS.supports() probes

Native vs fallback: grid layout

Left: column-rule + row-rule on the grid container. Right: border on every cell with first/last-child hacks.

Gap decorations (native)

.grid {
  display: grid;
  gap: 0.5rem;
  column-rule: 2px solid #000;
  row-rule: 2px solid #000;
}

Border hack (fallback)

.cell {
  border-right: 2px solid;
  border-bottom: 2px solid;
}
.cell:nth-child(3n) { border-right: none; }
.cell:nth-last-child(-n+3) { border-bottom: none; }

Native vs fallback: flex layout

Left: column-rule on a flex container with flex-wrap: wrap. Right: borders on each flex item.

column-rule on flex (native)

React Vue Angular Svelte Solid

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  column-rule: 2px dashed #000;
}

Border hack (fallback)

React Vue Angular Svelte Solid

.item {
  border-right: 2px dashed;
  border-bottom: 2px dashed;
}
.item:last-child { border-right: none; }

Progressive enhancement pattern

/* Fallback: border on cells (works everywhere) */ .grid-cell { border-right: 2px solid var(--border-black); border-bottom: 2px solid var(--border-black); } .grid-cell:last-child { border-right: none; } .grid-cell:nth-last-child(-n+3) { border-bottom: none; } /* Enhancement: gap decorations (Chrome 149 / Firefox) */ @supports (column-rule: 1px solid) and (row-rule: 1px solid) { /* Remove border hacks — gap decorations take over */ .grid-cell { border: none; } .grid { column-rule: 2px solid var(--border-black); row-rule: 2px solid var(--border-black); } } /* Feature detection in JavaScript */ const HAS_GAP_DECORATIONS = CSS.supports('column-rule', '1px solid') && CSS.supports('row-rule', '1px solid');

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗