From 83771ac70179bd3bd8b2eeba3c11b64cd45a7827 Mon Sep 17 00:00:00 2001 From: Kevin Babbitt Date: Wed, 4 Feb 2026 16:50:07 -0800 Subject: [PATCH 1/2] copilot first pass --- css-gap-decorations/burger-menu.html | 4 +- css-gap-decorations/daily-css-news.html | 27 +++++----- css-gap-decorations/guitar-fretboard.html | 4 +- css-gap-decorations/notebook.html | 6 +-- css-gap-decorations/personal-site.html | 2 +- css-gap-decorations/playground.html | 62 +++++++++++------------ css-gap-decorations/the-daily-oddity.html | 4 +- 7 files changed, 54 insertions(+), 55 deletions(-) diff --git a/css-gap-decorations/burger-menu.html b/css-gap-decorations/burger-menu.html index c7e8da69..f6af8d3e 100644 --- a/css-gap-decorations/burger-menu.html +++ b/css-gap-decorations/burger-menu.html @@ -20,8 +20,8 @@ column-rule: 1.5px solid #ccc; row-rule: 3px solid #000; column-rule-break: intersection; - column-rule-outset: -15px; - row-rule-outset: -8px; + column-rule-inset: 15px; + row-rule-inset: 8px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); max-width: 1000px; diff --git a/css-gap-decorations/daily-css-news.html b/css-gap-decorations/daily-css-news.html index ef11aa5b..0d359304 100644 --- a/css-gap-decorations/daily-css-news.html +++ b/css-gap-decorations/daily-css-news.html @@ -47,7 +47,7 @@ column-rule-width: 1px; column-rule-style: solid; column-rule-color: var(--accent); - gap-rule-paint-order: column-over-row; + rule-overlap: column-over-row; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } @@ -73,7 +73,7 @@ row-rule-width: 1px; row-rule-style: solid; row-rule-color: var(--rule); - gap-rule-paint-order: row-over-column; + rule-overlap: row-over-column; background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 4px; @@ -98,9 +98,8 @@ grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2rem; - rule-width: 2px; - rule-style: dashed; - rule-color: var(--rule); + row-rule: 2px dashed var(--rule); + column-rule: 2px dashed var(--rule); } @media (max-width: 900px) { @@ -137,7 +136,7 @@ column-rule-width: 1px; column-rule-style: solid; column-rule-color: var(--rule); - gap-rule-paint-order: column-over-row; + rule-overlap: column-over-row; margin: 0; } @@ -147,7 +146,7 @@ row-rule-width: 3px; row-rule-style: solid; row-rule-color: var(--rule); - row-rule-outset: 0%; + row-rule-inset: 50%; column-count: 2; column-gap: 1rem; column-rule-width: 2px; @@ -156,7 +155,7 @@ column-fill: auto; column-height: 10em; column-rule-break: intersection; - column-rule-outset: -20px; + column-rule-inset: 20px; } .sidebar { @@ -166,7 +165,7 @@ row-rule-width: 1px; row-rule-style: dotted; row-rule-color: var(--rule); - gap-rule-paint-order: column-over-row; + rule-overlap: column-over-row; } .sidebar section { @@ -196,13 +195,13 @@ display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; - column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); + 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-width: repeat(2, 1px), 4px, repeat(2, 1px), 4px, repeat(2, 1px); row-rule-style: solid; row-rule-color: var(--secondary); - gap-rule-paint-order: row-over-column; + rule-overlap: row-over-column; } .sudoku .cell { @@ -246,7 +245,7 @@

Gap Decorations Start Dev Trials

the highly anticipated Gap Decorations Module. This early access program empowers front-end engineers to experiment with powerful new properties—column-rule, row-rule, and - gap-rule-paint-order—to style gaps in grid, flex, and multicol containers + rule-overlap—to style gaps in grid, flex, and multicol containers without relying on additional markup or pseudo-elements. In these trials, participants can test row-rule support in multicol layouts, leverage column-wrap to achieve sophisticated magazine-style flows, and fine-tune separator styles across @@ -276,7 +275,7 @@

Browser Support Expands

can safely adopt gap decorations in production, delivering consistent visual experiences across platforms. Developers are encouraged to experiment with combinations of column-rule, row-rule, - and paint-order options to craft unique layouts that were previously only + and overlap options to craft unique layouts that were previously only achievable with complex workarounds.

diff --git a/css-gap-decorations/guitar-fretboard.html b/css-gap-decorations/guitar-fretboard.html index bad8877a..2d4a3fbd 100644 --- a/css-gap-decorations/guitar-fretboard.html +++ b/css-gap-decorations/guitar-fretboard.html @@ -25,8 +25,8 @@ row-gap: var(--fret-width); column-rule: var(--string-width) solid white; row-rule: var(--fret-width) solid #737778; - row-rule-outset: var(--space-around-neck); - gap-rule-paint-order: column-over-row; + row-rule-inset: calc(-1 * var(--space-around-neck)); + rule-overlap: column-over-row; background-image: radial-gradient(circle, white 0 calc(var(--space-between-strings) / 4), transparent 0), diff --git a/css-gap-decorations/notebook.html b/css-gap-decorations/notebook.html index 15151341..fe871514 100644 --- a/css-gap-decorations/notebook.html +++ b/css-gap-decorations/notebook.html @@ -24,7 +24,7 @@ grid-template-rows: repeat(30, 1fr); gap: 2px; - gap-rule-paint-order: column-over-row; + rule-overlap: column-over-row; column-rule: solid black 1.5px; column-rule-break: spanning-item; row-rule: @@ -137,8 +137,8 @@

New Properties & Behavior:

row-rule, column-rule to define width, style, and color of decorations.

Complex patterns with repeat().

gap-rule-break to control where decorations start/end.

-

gap-rule-paint-order to define overlap order between row and column.

-

gap-rule-outset to adjust start/end positions.

+

rule-overlap to define overlap order between row and column.

+

rule-inset to adjust start/end positions.