New pages: *-rule-visibility-items by estelle · Pull Request #44616 · mdn/content

estelle · 2026-07-01T15:36:33Z

Three new pages:

column-rule-visibility-items
row-rule-visibility-items
rule-visibility-items

spec: https://drafts.csswg.org/css-gaps-1/#propdef-row-rule-visibility-items

Part of openwebdocs/project#238

EDIT: This PR also uncomments all the hidden props on the module page as they are supported in a released browser. They aren't yet written, but they can't be in a "not supported" paragraph, and our docs should be complete. Working on writing those docs now, so it should be de-redded soon.

github-actions · 2026-07-01T15:38:41Z

Preview URLs (4 pages)

Flaws (39)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Guides/Gaps
Title: CSS gaps
Flaw count: 35

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-break which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-inset which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-inset-cap which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-inset-cap-end which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/column-rule-inset-cap-start which doesn't resolve
- and 30 more flaws omitted

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-visibility-items
Title: column-rule-visibility-items CSS property
Flaw count: 1

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/row-rule-visibility-items
Title: row-rule-visibility-items CSS property
Flaw count: 2

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/row-rule which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/rule-visibility-items
Title: rule-visibility-items CSS property
Flaw count: 1

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

(comment last updated: 2026-07-03 08:31:34)

chrisdavidmills

@estelle, looking really good. Quite a few comments, but they are mostly language nitpicks that are repeated across all three pages, so not actually that much to do here.

chrisdavidmills · 2026-07-02T06:28:14Z

+sidebar: cssref
+---
+
+The **`rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) shorthand property defines whether a rule segment is painted in portions of gaps adjacent to empty areas, setting both the {{cssxref("column-rule-visibility-items")}} and {{cssxref("row-rule-visibility-items")}} to the same value.


Suggested change

The **`rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) shorthand property defines whether a rule segment is painted in portions of gaps adjacent to empty areas, setting both the {{cssxref("column-rule-visibility-items")}} and {{cssxref("row-rule-visibility-items")}} to the same value.

The **`rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) shorthand property defines whether row-rule and column-rule segments are painted in gaps adjacent to empty areas.

I think this can be cut down, given that the removed info is covered immediately below in the constituent properties section, and in the description.

went with:

The rule-visibility-items CSS shorthand property defines whether rule segments are painted in both row and column gaps adjacent to empty areas.

chrisdavidmills · 2026-07-02T06:36:14Z

+
+#### CSS
+
+We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. We set the column rules to `dashed` and the row rules to `solid`.


Suggested change

We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. We set the column rules to `dashed` and the row rules to `solid`.

We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties to `repeat(4, 1fr)`, and move the last item to the bottom-right grid area using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` rules. We set the column rules to `dashed` and the row rules to `solid`.

chrisdavidmills · 2026-07-02T06:38:07Z

+
+We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. We set the column rules to `dashed` and the row rules to `solid`.
+
+Finally, we set `rule-visibility-items` to `between`, so only if both grid area adjacent to a column rule segment contains a grid item with the column rule be painted.


Suggested change

Finally, we set `rule-visibility-items` to `between`, so only if both grid area adjacent to a column rule segment contains a grid item with the column rule be painted.

Finally, we set `rule-visibility-items` to `between`, so that row- and column-rules are painted only if both grid areas adjacent to them contain a grid item.

This sentence was a bit mixed up; I think I've captured the meaning correctly, but you should check it carefully.

chrisdavidmills · 2026-07-02T06:41:45Z

+
+#### Result
+
+{{EmbedLiveSample("Basic", "", "230")}}


Nice little demo.

My one nitpick is that the list markers overlap the rules, which looks a bit scruffy. Maybe add some margin-left to the <li>s to stop this from happening?

chrisdavidmills · 2026-07-02T06:44:50Z

@@ -0,0 +1,176 @@
+---


One thing I've noticed is that column-rule-visibility-items is nested underneath column-* in the sidebar, but row-rule-visibility-items is not nested underneath row-* along with row-gap. Is this fixable?

chrisdavidmills · 2026-07-02T07:06:32Z

+
+#### CSS
+
+We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 rows and 4 columns by setting both the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-row")}} and {{cssxref("grid-column")}}. We include a {{cssxref("gap")}} of `20px` to provide enough room between the rows to fit our `5px` dashed rule.


Suggested change

We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 rows and 4 columns by setting both the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-row")}} and {{cssxref("grid-column")}}. We include a {{cssxref("gap")}} of `20px` to provide enough room between the rows to fit our `5px` dashed rule.

We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 rows and 4 columns by setting both the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties to `repeat(4, 1fr)`, and move the last item to the bottom-right grid area using {{cssxref("grid-row")}} and {{cssxref("grid-column")}}. We include a {{cssxref("gap")}} of `20px` to provide enough room between the rows to fit our `5px` dashed rule.

chrisdavidmills · 2026-07-02T07:08:18Z

+
+#### Result
+
+{{EmbedLiveSample("Basic", "", "230")}}


Same comment about adding some margin-left to the list items to stop marker overlap and neaten up the output.

chrisdavidmills · 2026-07-02T07:08:36Z

+
+#### Result
+
+{{EmbedLiveSample("Basic", "", "230")}}


Same comment about adding some margin-left to the list items to stop marker overlap and neaten up the output.

estelle

Good catch at the nav bar. There are several row-* props that are about to be written, so I'll look into making sure they're all there after a few more are added.

estelle · 2026-07-02T08:57:42Z

- {{cssxref("column-rule-width")}}
- {{cssxref("gap")}}
- {{cssxref("row-gap")}}
-<!-- Will be uncommented when issue https://github.com/mdn/content/issues/44435 is resolved.


i removed the comments as the properties are all supported in at least one browser now, even though the docs aren't written yet (they'll be written soon).

chrisdavidmills

@estelle, looks good to go. Just one more minor comment for you to consider, but not blocking on that.

github-actions · 2026-07-03T08:25:50Z

This pull request has merge conflicts that must be resolved before it can be merged.

…/index.md Co-authored-by: Chris Mills <[email protected]>

babumiah7148-collab · 2026-07-03T18:37:21Z

Three new pages:

column-rule-visibility-items

row-rule-visibility-items

rule-visibility-items

spec: https://drafts.csswg.org/css-gaps-1/#propdef-row-rule-visibility-items

Part of openwebdocs/project#238

EDIT: This PR also uncomments all the hidden props on the module page as they are supported in a released browser. They aren't yet written, but they can't be in a "not supported" paragraph, and our docs should be complete. Working on writing those docs now, so it should be de-redded soon.

New pages: *-rule-visibility-items

0bb0517

estelle requested a review from a team as a code owner July 1, 2026 15:36

estelle requested review from chrisdavidmills and removed request for a team July 1, 2026 15:36

Merge branch 'main' into gaps5-rrvi

7de1aa0

github-actions Bot added Content:CSS Cascading Style Sheets docs size/l [PR only] 501-1000 LoC changed labels Jul 1, 2026

estelle added Content:CSS Cascading Style Sheets docs size/l [PR only] 501-1000 LoC changed labels Jul 1, 2026

oopsy

e042633

estelle mentioned this pull request Jul 1, 2026

CSS Gaps 1 openwebdocs/project#238

Open

62 tasks

chrisdavidmills requested changes Jul 2, 2026

View reviewed changes

Edits per the CDM's review

1c9514c

estelle commented Jul 2, 2026

View reviewed changes

estelle requested a review from chrisdavidmills July 2, 2026 08:46

props supported even if not written

e2d43ca

estelle commented Jul 2, 2026

View reviewed changes

Merge branch 'main' into gaps5-rrvi

64a2aaf

chrisdavidmills approved these changes Jul 3, 2026

View reviewed changes

Comment thread files/en-us/web/css/reference/properties/rule-visibility-items/index.md Outdated

github-actions Bot added the merge conflicts 🚧 [PR only] label Jul 3, 2026

estelle and others added 2 commits July 3, 2026 10:26

Update files/en-us/web/css/reference/properties/rule-visibility-items…

6ab4617

…/index.md Co-authored-by: Chris Mills <[email protected]>

Merge branch 'main' into gaps5-rrvi

6be20bc

github-actions Bot removed the merge conflicts 🚧 [PR only] label Jul 3, 2026

Add reference to repeat() in gaps guide

ee670c9

estelle merged commit 34838ae into main Jul 3, 2026
13 checks passed

estelle deleted the gaps5-rrvi branch July 3, 2026 08:32

	The `rule-visibility-items` [CSS](/en-US/docs/Web/CSS) shorthand property defines whether a rule segment is painted in portions of gaps adjacent to empty areas, setting both the {{cssxref("column-rule-visibility-items")}} and {{cssxref("row-rule-visibility-items")}} to the same value.
	The `rule-visibility-items` [CSS](/en-US/docs/Web/CSS) shorthand property defines whether row-rule and column-rule segments are painted in gaps adjacent to empty areas.


		#### CSS

		We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. We set the column rules to `dashed` and the row rules to `solid`.


		We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} to `repeat(4, 1fr)`, and move the last item to the 16th grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. We set the column rules to `dashed` and the row rules to `solid`.

		Finally, we set `rule-visibility-items` to `between`, so only if both grid area adjacent to a column rule segment contains a grid item with the column rule be painted.

Uh oh!

Conversation

estelle commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 3, 2026

Uh oh!

Uh oh!

babumiah7148-collab commented Jul 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

estelle commented Jul 1, 2026 •

edited

Loading

github-actions Bot commented Jul 1, 2026 •

edited

Loading