From 2c7995421a490337ceb3a21f06b6c5b3ff185ba9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 30 Jul 2026 10:33:06 +0100 Subject: [PATCH 1/4] ci(deps): bump actions/checkout from 7.0.0 to 7.0.1 (#44870) Signed-off-by: dependabot[bot] --- .github/workflows/auto-cleanup-bot.yml | 2 +- .github/workflows/interfacedata-updater.yml | 4 ++-- .github/workflows/markdown-lint.yml | 2 +- .github/workflows/pr-check-lint_content.yml | 2 +- .github/workflows/pr-check_cspell_lists.yml | 2 +- .github/workflows/pr-check_javascript.yml | 2 +- .github/workflows/pr-check_json.yml | 2 +- .github/workflows/pr-check_redirects.yml | 2 +- .github/workflows/pr-check_scripts.yml | 10 +++++----- .github/workflows/pr-check_url-issues.yml | 2 +- .github/workflows/pr-check_yml.yml | 2 +- .github/workflows/pr-review-companion.yml | 2 +- .github/workflows/pr-reviewdog.yml | 2 +- .github/workflows/pr-test.yml | 2 +- .github/workflows/spelling-check-bot.yml | 2 +- .github/workflows/test.yml | 2 +- 16 files changed, 21 insertions(+), 21 deletions(-) diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml index 5ec979910ea061a..9ff41da469d5ff1 100644 --- a/.github/workflows/auto-cleanup-bot.yml +++ b/.github/workflows/auto-cleanup-bot.yml @@ -15,7 +15,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/interfacedata-updater.yml b/.github/workflows/interfacedata-updater.yml index de5d675cbb4a9a4..53c8065e609aa20 100644 --- a/.github/workflows/interfacedata-updater.yml +++ b/.github/workflows/interfacedata-updater.yml @@ -16,7 +16,7 @@ jobs: steps: - name: Checkout content - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: path: mdn-content ref: main @@ -29,7 +29,7 @@ jobs: package-manager-cache: false - name: Checkout webref - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: repository: w3c/webref path: webref diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml index 22e1a4daa4f23c2..2faefe407bbcab7 100644 --- a/.github/workflows/markdown-lint.yml +++ b/.github/workflows/markdown-lint.yml @@ -19,7 +19,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index d14b258beed4816..6011a722bc1b5df 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -21,7 +21,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check_cspell_lists.yml b/.github/workflows/pr-check_cspell_lists.yml index c9526a1326c8bb3..230a152fe2c051f 100644 --- a/.github/workflows/pr-check_cspell_lists.yml +++ b/.github/workflows/pr-check_cspell_lists.yml @@ -15,7 +15,7 @@ jobs: docs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: sparse-checkout-cone-mode: false sparse-checkout: | diff --git a/.github/workflows/pr-check_javascript.yml b/.github/workflows/pr-check_javascript.yml index fd93c773f1a6555..f3c706c3209eeeb 100644 --- a/.github/workflows/pr-check_javascript.yml +++ b/.github/workflows/pr-check_javascript.yml @@ -20,7 +20,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check_json.yml b/.github/workflows/pr-check_json.yml index 55caa5d8f042603..f24d4fb6c6e90c1 100644 --- a/.github/workflows/pr-check_json.yml +++ b/.github/workflows/pr-check_json.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml index 683030521d628f0..87134d73a03848b 100644 --- a/.github/workflows/pr-check_redirects.yml +++ b/.github/workflows/pr-check_redirects.yml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check_scripts.yml b/.github/workflows/pr-check_scripts.yml index 5efa9a8a2346b6d..44f24a03a42bfe4 100644 --- a/.github/workflows/pr-check_scripts.yml +++ b/.github/workflows/pr-check_scripts.yml @@ -16,7 +16,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false @@ -37,7 +37,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false @@ -80,7 +80,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false @@ -101,7 +101,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false @@ -126,7 +126,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-check_url-issues.yml b/.github/workflows/pr-check_url-issues.yml index 516481b566f89b6..ab98a00c078bae6 100644 --- a/.github/workflows/pr-check_url-issues.yml +++ b/.github/workflows/pr-check_url-issues.yml @@ -19,7 +19,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: fetch-depth: 0 persist-credentials: false diff --git a/.github/workflows/pr-check_yml.yml b/.github/workflows/pr-check_yml.yml index 7e2a41a6733582a..013b026d5e25df3 100644 --- a/.github/workflows/pr-check_yml.yml +++ b/.github/workflows/pr-check_yml.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 75ff97ba0457fc8..ba0659ed66fbee3 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -110,7 +110,7 @@ jobs: process_gcloudignore: false - name: Checkout (mdn/content) - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 if: steps.check.outputs.HAS_ARTIFACT with: path: content diff --git a/.github/workflows/pr-reviewdog.yml b/.github/workflows/pr-reviewdog.yml index 3ab6161bbd08ac4..2fb2d7f16f6011c 100644 --- a/.github/workflows/pr-reviewdog.yml +++ b/.github/workflows/pr-reviewdog.yml @@ -62,7 +62,7 @@ jobs: - name: Checkout if: steps.identify-pr.outputs.number - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: path: mdn-content ref: main diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index ee49f08f320535a..91c1271881d0aa3 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -27,7 +27,7 @@ jobs: BUILD_OUT_ROOT: build steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index aed72cc3333c32b..961f17885671e62 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -18,7 +18,7 @@ jobs: timeout-minutes: 5 steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 25ff3161af9ecfa..14399981dcf3521 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -20,7 +20,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: persist-credentials: false From b5c3edee358451f960799810aaed0749e5f1b2be Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 30 Jul 2026 12:04:16 +0200 Subject: [PATCH 2/4] CSS minor fix: added missing "flexbox" (#44955) * CSS minor fix: added missing "flexbox" Clarified the description of the CSS gaps module by extending its explanation to include flexbox. * Update files/en-us/web/css/guides/gaps/index.md Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/guides/gaps/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/guides/gaps/index.md b/files/en-us/web/css/guides/gaps/index.md index b8788be3c680f37..1ecd31d99e64144 100644 --- a/files/en-us/web/css/guides/gaps/index.md +++ b/files/en-us/web/css/guides/gaps/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-gaps/ sidebar: cssref --- -The **CSS gaps** module lets you specify spacing, or "gaps", between items in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flexbox](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) layouts. The [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module originally defined gaps and rules controlling the spacing between columns in multi-column containers. This module expands on these visible separators, called _gap decorations_, extending it to grid. +The **CSS gaps** module lets you specify spacing, or "gaps", between items in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flexbox](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) layouts. The [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module originally defined gaps and rules that control the spacing between columns in multi-column containers. This module expands on these visible separators, called _gap decorations_, extending it to grid and flexbox. While {{cssxref("margin")}} and {{cssxref("padding")}} specify visual spacing around individual boxes, the properties in this module enable specifying the spacing between adjacent boxes within a given layout context for layouts that have {{glossary("gutters")}} and gaps, when the spacing is different between sibling boxes as opposed to between the first box, last box, and the container's edge. You can show rules in every gap or in a subset of gaps, defining fully animatable rule widths, colors, and insets. From f4d39e4f5a6f426bff5f91cccb5b6fadff094e27 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 30 Jul 2026 12:54:54 +0200 Subject: [PATCH 3/4] New CSS property: rule (#44947) * New CSS property: rule * Apply suggestions from code review Co-authored-by: Chris Mills * Update files/en-us/web/css/reference/properties/rule/index.md --------- Co-authored-by: Chris Mills --- .../css/reference/properties/rule/index.md | 420 ++++++++++++++++++ 1 file changed, 420 insertions(+) create mode 100644 files/en-us/web/css/reference/properties/rule/index.md diff --git a/files/en-us/web/css/reference/properties/rule/index.md b/files/en-us/web/css/reference/properties/rule/index.md new file mode 100644 index 000000000000000..47e7c1842b785f0 --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule/index.md @@ -0,0 +1,420 @@ +--- +title: "`rule` CSS property" +short-title: rule +slug: Web/CSS/Reference/Properties/rule +page-type: css-property +status: + - experimental +browser-compat: css.properties.rule +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`rule`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets the width, style, and color of the line drawn between rows and columns in multi-row grid, flex, and multi-col layouts, setting both the column and row rules to the same values. + +{{InteractiveExample("CSS Demo: rule")}} + +```css interactive-example-choice +rule: solid; +``` + +```css interactive-example-choice +rule: dotted medium blue; +``` + +```css interactive-example-choice +rule: + dotted medium blue, + repeat(3, dotted red 2px, double orange 5px); +``` + +```css interactive-example-choice +rule: + dashed medium magenta, + repeat(auto, dotted blue 2px, dotted blue 5px), + dashed medium magenta; +``` + +```css interactive-example-choice +rule: + dashed medium magenta, + repeat(auto, dotted blue 2px), + outset goldenrod 5px; +``` + +```html interactive-example +
+
+ A + B + C + D + E + F + G + H + I + J + K + L + M + N + O + P + Q + R + S + T + U + V + W + X + Y + Z +
+
+``` + +```css interactive-example +#example-element { + display: grid; + grid-template-columns: repeat(7, 1fr); + rule: solid thick; +} +#example-element i { + padding: 5px; +} +``` + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("rule-color")}} +- {{cssxref("rule-style")}} +- {{cssxref("rule-width")}} + +## Syntax + +```css +/* One value */ +rule: dotted; +rule: solid 8px; +rule: solid blue; +rule: thick inset blue; + +/* Multiple values */ +rule: groove, dashed, solid; +rule: + dotted medium blue, + dashed magenta 1px, + outset green 5px; +rule: + solid #0ff, + repeat(3, dashed magenta 1px, outset green 5px); +rule: + inset 3px yellow, + repeat(auto, dashed magenta 1px, groove green 5px), + inset 3px yellow; + +/* Global values */ +rule: inherit; +rule: initial; +rule: revert; +rule: revert-layer; +rule: unset; +``` + +### Values + +The `rule` property accepts a comma-separated list of values, including: + +- `` + - : Specified as one, two, or three of the values listed below, in any order. + - `<'line-width'>` + - : A {{cssxref("<line-width>")}}: a positive {{cssxref("<length>")}} or one of the three keywords, `thin`, `medium`, or `thick`. The default value is `medium`. See {{cssxref("rule-width")}}. + - `<'line-style'>` + - : A {{cssxref("<line-style>")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is `none`. See {{cssxref("rule-style")}}. + - `<'color'>` + - : A {{cssxref("<color>")}} value representing the color of the line. The default value is `currentcolor`. See {{cssxref("rule-color")}}. + +- `` + - : A {{cssxref("repeat()")}} function, with an {{cssxref("<integer>")}} of `1` or more as the first argument and one or more `` values as subsequent arguments. The `` specifies how many times the list of `` values should be repeated. + +- `` + - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `` values as subsequent arguments. The provided list of `` values is repeated as many times as needed to fill in values for any rules that are not explicitly specified by other components of the property value. + +## Description + +The `rule` property defines the line style of any rule lines drawn in the gaps between rows and columns in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout), [flex](/en-US/docs/Web/CSS/Guides/Flexible_box_layout), and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row or column. + +The `rule` is shorthand for {{cssxref("rule-color")}}, {{cssxref("rule-style")}}, and {{cssxref("rule-width")}}. It sets the {{cssxref("row-rule")}} and {{cssxref("column-rule")}} shorthand properties to the same value. + +The property value is a comma-separated list of components, which can include ``, ``, and `` types. Each `` defines the width, color, and style of one or more rule lines. + +If the property value consists of only one ``, all the row and column rules will be that style, color, and size. If we declare the following, all row and column rules will be `dashed red 3px`: + +```css +rule: dashed red 3px; +``` + +When more than one `` is declared, they will be applied to rules in the order specified. If there are more gutters between rows and columns than `` values, the list of values is repeated until every row and column rule has a gap line. If we declare the following, for example, every odd rule will be `dashed red 3px`, and every even rule will be `dotted blue 5px`, in both directions. + +```css +rule: + dashed red 3px, + dotted blue 5px; +``` + +### Repeated line styles + +The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS [``](#gap-rule) values passed as subsequent arguments the specified number of times. This allows the same `` to be repeated a set number of times without repeating the same CSS multiple times. The following declarations are equivalent: + +```css +rule: + solid red 5px, + outset blue 10px, + inset green 1px, + outset blue 10px, + inset green 1px, + outset blue 10px, + inset green 1px; +rule: + solid red 5px, + repeat(3, outset blue 10px, inset green 1px); +``` + +This creates a list of seven rules. If the number of styles in the `rule` value's style list exceeds the number of gaps between rows and columns, the excess style values are ignored. If the container on which this is applied has three rows and columns, the rule in the first gutter will be `solid red 5px` and the second `outset blue 10px`, in both directions. + +If there are more gutters than styles, the list of styles is repeated. If the container has 8, 15, 22, or 29 rows or columns, this sequence of styles will be repeated in that direction one, two, three, or four times, respectively, with the last rule being `inset green 1px`. + +### Auto-repeating line styles + +The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the [``](#gap-rule) values passed as subsequent arguments will be repeated as many times as needed to fill in values for any row and column rules that are not explicitly specified by other components of the property value. + +```css +rule: + solid red 5px, + repeat(auto, dotted green 1px, dashed blue 1px), + solid red 5px; +``` + +In this case, the first and last row and column rules will be `solid red 5px`, and all others will alternate between `dotted green 1px` and `dashed blue 1px`. It doesn't matter if the container has 3, 6, 11, 16, or 21 rows and columns; the first and last gutters will always have a thick solid red line painted between them (unless {{cssxref("rule-visibility-items")}} leads to no line being drawn), and all the other row and column rules will be thin, dotted green or dashed blue lines. If there are only 2 or 3 rows and columns, there will be no dotted or dashed lines. + +The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for row and column rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. At most, only one `repeat(auto, )` can be present in a `rule` value. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a single rule for the lines drawn in the gutters between grid items. + +#### HTML + +We create a list of 75 items. Most of the HTML is hidden for brevity. + +```html +
    +
  • 1
    • +
  • 2
    • + ... +
  • 74
    • +
  • 75
    • +
+``` + +```html hidden live-sample___basic live-sample___multiple live-sample___repeat live-sample___func live-sample___auto +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
  • 10
    • +
  • 11
    • +
  • 12
    • +
  • 13
    • +
  • 14
    • +
  • 15
    • +
  • 16
    • +
  • 17
    • +
  • 18
    • +
  • 19
    • +
  • 20
    • +
  • 21
    • +
  • 22
    • +
  • 23
    • +
  • 24
    • +
  • 25
    • +
  • 26
    • +
  • 27
    • +
  • 28
    • +
  • 29
    • +
  • 30
    • +
  • 31
    • +
  • 32
    • +
  • 33
    • +
  • 34
    • +
  • 35
    • +
  • 36
    • +
  • 37
    • +
  • 38
    • +
  • 39
    • +
  • 40
    • +
  • 41
    • +
  • 42
    • +
  • 43
    • +
  • 44
    • +
  • 45
    • +
  • 46
    • +
  • 47
    • +
  • 48
    • +
  • 49
    • +
  • 50
    • +
  • 51
    • +
  • 52
    • +
  • 53
    • +
  • 54
    • +
  • 55
    • +
  • 56
    • +
  • 57
    • +
  • 58
    • +
  • 59
    • +
  • 60
    • +
  • 61
    • +
  • 62
    • +
  • 63
    • +
  • 64
    • +
  • 65
    • +
  • 66
    • +
  • 67
    • +
  • 68
    • +
  • 69
    • +
  • 70
    • +
  • 71
    • +
  • 72
    • +
  • 73
    • +
  • 74
    • +
  • 75
    • +
+``` + +#### CSS + +We define the unordered list as a 10-column container, creating columns and rows with the {{cssxref("grid-template-columns")}} property and setting {{cssxref("list-style-type")}} to `none` to remove the bullets. We include a {{cssxref("gap")}} of `5px` to provide enough room between the columns and rows to fit our `dashed 3px magenta` rule. + +```css live-sample___basic live-sample___multiple live-sample___repeat live-sample___func live-sample___auto +ul { + display: grid; + grid-template-columns: repeat(10, 1fr); + list-style-type: none; + gap: 5px; + + rule: dashed 3px magenta; +} +li { + text-align: center; + aspect-ratio: 1; +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "600")}} + +### Multiple gap-rules and default values + +This example demonstrates using multiple, comma-separated values. It also demonstrates the default values for the width, color, and style of `medium`, `currentcolor` and `none`, respectively. + +Using the same HTML and CSS as in the previous example, we include four comma-separated `` values as the `rule` value, omitting the `` in the first ``, the `` in the second, and the `` from the third, with the fourth including all three components: + +```css live-sample___repeat +ul { + rule: + red dashed, + 1px dotted, + 5px blue, + 10px magenta solid; +} +``` + +{{EmbedLiveSample("Repeat", "", "600")}} + +The red line is `3px` wide, the dotted line is the same color as the text, and there is no `5px`-wide blue line, as the style of the third `` defaults to `none`, so no line is painted. As there are fewer rule styles than gutters, the list of rules is repeated until all rule lines are styled. + +### Using the `repeat()` function + +This example demonstrates using the `repeat()` function within the `rule` property value. We use the same HTML and CSS as in the previous examples, overriding the `rule` value with a comma-separated list of three components: two `` values and a `` that sets a list of two `` values to repeat 3 times. + +```css live-sample___func live-sample___auto +ul { + rule: + 3px red dashed, + repeat(3, dotted green 1px, dashed blue 1px), + 3px red dashed; +} +``` + +{{EmbedLiveSample("func", "", "600")}} + +The grid has ten columns and eight rows, so nine column gutters and seven row gutters. The `repeat()` function repeats two style values three times, creating a list of eight style values. As there are fewer row gutters than values, the last value is not used in the row direction. As there are more column gutters than values, the list repeats in the column direction. + +### Using `auto` within `repeat()` + +This example demonstrates using the `auto` argument instead of an integer in the `repeat()` function. + +Using `repeat(auto, )`, we set all row and column rules to `1px dotted` (with the color defaulting to the current color), except the first and last rules, which we set to `3px solid red`. + +```css live-sample___auto +ul { + rule: + 3px red solid, + repeat(auto, 1px dotted), + 3px red solid; +} +``` + +{{EmbedLiveSample("auto", "", "600")}} + +```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto +@layer no-support { + @supports not (rule: thin, thick) { + body::before { + content: "Your browser doesn't support the rule property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("rule-color")}} +- {{cssxref("rule-width")}} +- {{cssxref("rule-style")}} +- {{cssxref("column-rule")}} shorthand +- {{cssxref("row-rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module From 69ff5fe627a17cf397ebd7b0f88a83c272c0bce5 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Thu, 30 Jul 2026 16:24:00 +0200 Subject: [PATCH 4/4] Fix typos in SVG guides (#44968) --- files/en-us/web/svg/guides/content_type/index.md | 2 +- files/en-us/web/svg/guides/svg_animation_with_smil/index.md | 2 +- files/en-us/web/svg/guides/svg_in_html/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/svg/guides/content_type/index.md b/files/en-us/web/svg/guides/content_type/index.md index 18ed4a808e3a55d..bb996d40a89ac42 100644 --- a/files/en-us/web/svg/guides/content_type/index.md +++ b/files/en-us/web/svg/guides/content_type/index.md @@ -147,7 +147,7 @@ SVG makes use of a number of data types. This article lists these types along wi SVG makes extensive use of _IRI_ references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a {{SVGElement("linearGradient")}} element and give it an ID, as in: ```html - ... + ... ``` You then reference the linear gradient as the value of the {{SVGAttr("fill")}} attribute for the rectangle, as in the following example: diff --git a/files/en-us/web/svg/guides/svg_animation_with_smil/index.md b/files/en-us/web/svg/guides/svg_animation_with_smil/index.md index e47df305eb12b67..94585cbb066b945 100644 --- a/files/en-us/web/svg/guides/svg_animation_with_smil/index.md +++ b/files/en-us/web/svg/guides/svg_animation_with_smil/index.md @@ -51,7 +51,7 @@ If you want to animate more attributes inside the same element, you can add more ## Animating the transform attributes -The {{ SVGElement("animateTransform") }} element let you animate [transform](/en-US/docs/Web/SVG/Reference/Attribute/transform) attributes. This element is necessary because we are not animating a single attribute like [x](/en-US/docs/Web/SVG/Reference/Attribute/x) which is a number. Rotation attributes look like this: `rotation(theta, x, y)`, where `theta` is the angle in degrees, and `x` and `y` are absolute positions. In the example below, we animate the center of the rotation and the angle. +The {{ SVGElement("animateTransform") }} element let you animate [transform](/en-US/docs/Web/SVG/Reference/Attribute/transform) attributes. This element is necessary because we are not animating a single attribute like [x](/en-US/docs/Web/SVG/Reference/Attribute/x) which is a number. Rotation attributes look like this: `rotate(theta, x, y)`, where `theta` is the angle in degrees, and `x` and `y` are absolute positions. In the example below, we animate the center of the rotation and the angle. ```html diff --git a/files/en-us/web/svg/guides/svg_in_html/index.md b/files/en-us/web/svg/guides/svg_in_html/index.md index 93521bdbeb7ddb8..ccfab2bf6b073d9 100644 --- a/files/en-us/web/svg/guides/svg_in_html/index.md +++ b/files/en-us/web/svg/guides/svg_in_html/index.md @@ -71,7 +71,7 @@ If the SVG can be labeled by visible text, reference that text with an [`aria-la - +