New pages: rule-* shorthand properties by estelle · Pull Request #44895 · mdn/content

estelle · 2026-07-23T11:22:03Z

This PR includes a the creation of three new reference pages:

rule-style
rule-color
rule-width

The CSS gaps module page is already live.

Part of openwebdocs/project#238

github-actions · 2026-07-23T11:23:39Z

Preview URLs (3 pages)

Flaws (10)

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

URL: /en-US/docs/Web/CSS/Reference/Properties/rule-color
Title: rule-color CSS property
Flaw count: 3

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token 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-style
Title: rule-style CSS property
Flaw count: 4

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/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-width
Title: rule-width CSS property
Flaw count: 3

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve
- Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve
- Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve

(comment last updated: 2026-07-28 11:26:46)

chrisdavidmills

Good work, @estelle. A bunch of grammar corrections and such, but nothing major.

chrisdavidmills · 2026-07-28T10:14:57Z

+
+#### HTML
+
+We create a list of 100 items. Most of the HTML is hidden for brevity.


What was your reasoning behind using this example, rather than the 75-item list used in the other two pages? It isn't a massive problem, but this one seems uglier and clumsier than the other one.

It is also taller than the 75-item example, meaning that the live examples all have scrollbars.

i did this one first, then thought 75 was better. Will change this one.

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

Updated examples and descriptions for clarity regarding the grid container dimensions and the use of the repeat() function in the rule-width property.

estelle

i think i got everything

estelle · 2026-07-28T11:07:30Z

+
+{{EmbedLiveSample("Basic", "", "600")}}
+
+### Multiple values


no. i happen to have excess values, but the point is to show more than one value.

estelle · 2026-07-28T11:09:41Z

+
+#### HTML
+
+We create a list of 100 items. Most of the HTML is hidden for brevity.


i did this one first, then thought 75 was better. Will change this one.

estelle · 2026-07-28T11:17:38Z

+
+This example demonstrates using the `repeat()` function within the `rule-style` property value. We use the same HTML and CSS as in the previous examples. We include a `repeat()` function, setting the list of two `<line-style>` values to be repeated 3 times.
+
+```css live-sample___func live-sample___auto


good catch. originally there was more content, and i didn't remove the second example when i removed the features

chrisdavidmills

@estelle, a few more bits for you. I think you can get it merged after fixing these, so I'll approve. Great work!

chrisdavidmills · 2026-07-28T13:02:28Z

+
+## Examples
+
+### Basic example


FYI, I had a look in Fx, and this example isn't wired up to the non-support banner.

chrisdavidmills · 2026-07-28T13:05:05Z

+
+#### Result
+
+{{EmbedLiveSample("Multiple", "", "600")}}


This example DOES show the non-support banner in Firefox, but it isn't absolutely positioned, meaning that it sits at the top of the other content and causes a scrollbar. It would look tidier if it was abspos'ed, like it is on some of the banners we've been using in other places.

Same comment for the other two examples below.

chrisdavidmills · 2026-07-28T13:07:25Z

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


This example isn't wired up to the non-support banner either. Tested in Fx.

chrisdavidmills · 2026-07-28T13:08:29Z

+
+#### Result
+
+{{EmbedLiveSample("Multiple", "", "600")}}


Again, it would be good for the non-support banners to be abspos'ed.

chrisdavidmills · 2026-07-28T13:15:06Z

+
+#### HTML
+
+We create a list of 100 items. Most of the HTML is hidden for brevity.


Suggested change

We create a list of 100 items. Most of the HTML is hidden for brevity.

We create a list of 75 items. Most of the HTML is hidden for brevity.

chrisdavidmills · 2026-07-28T13:18:59Z

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


Same comment about abspos for the non-support banners.

chrisdavidmills · 2026-07-28T13:23:11Z

+
+{{EmbedLiveSample("func", "", "600")}}
+
+The `repeat()` function repeats two width values four times, creating a list of ten width values. As there are fewer column and row gutters than total widths, the last values in the list is discarded.


Suggested change

The `repeat()` function repeats two width values four times, creating a list of ten width values. As there are fewer column and row gutters than total widths, the last values in the list is discarded.

The `repeat()` function repeats two width values four times, creating a list of ten width values. As there are fewer column and row gutters than total widths, the last values in the list are discarded.

rule-* shorthand properties

05e275a

estelle requested a review from a team as a code owner July 23, 2026 11:22

estelle requested review from chrisdavidmills and removed request for a team July 23, 2026 11:22

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

estelle mentioned this pull request Jul 23, 2026

CSS Gaps 1 openwebdocs/project#238

Open

65 tasks

Merge branch 'main' into gaps6-shorthandrules

ad8d1fc

chrisdavidmills requested changes Jul 28, 2026

View reviewed changes

Apply suggestions from code review

0f42737

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

estelle requested a review from a team as a code owner July 28, 2026 11:10

estelle requested review from dipikabh and removed request for a team July 28, 2026 11:10

change example to 75 cells, and update text accordingly

f885a38

Updated examples and descriptions for clarity regarding the grid container dimensions and the use of the repeat() function in the rule-width property.

estelle commented Jul 28, 2026

View reviewed changes

Apply suggestions from code review

3c3f9bd

estelle commented Jul 28, 2026

View reviewed changes

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

estelle added 2 commits July 28, 2026 13:21

Update files/en-us/web/css/reference/properties/rule-color/index.md

b240fb6

example height

26b3263

estelle requested a review from chrisdavidmills July 28, 2026 11:25

chrisdavidmills approved these changes Jul 28, 2026

View reviewed changes


		#### HTML

		We create a list of 100 items. Most of the HTML is hidden for brevity.


		This example demonstrates using the `repeat()` function within the `rule-style` property value. We use the same HTML and CSS as in the previous examples. We include a `repeat()` function, setting the list of two `<line-style>` values to be repeated 3 times.

		```css live-sample___func live-sample___auto

	We create a list of 100 items. Most of the HTML is hidden for brevity.
	We create a list of 75 items. Most of the HTML is hidden for brevity.


		{{EmbedLiveSample("func", "", "600")}}

		The `repeat()` function repeats two width values four times, creating a list of ten width values. As there are fewer column and row gutters than total widths, the last values in the list is discarded.

Uh oh!

Conversation

estelle commented Jul 23, 2026

Uh oh!

github-actions Bot commented Jul 23, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jul 23, 2026 •

edited

Loading