From e57e3fdd4ab6fb372ddc3d78e5b428f318202426 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 4 Aug 2026 13:38:22 +0530 Subject: [PATCH 1/3] Synchronize with BCD v8.0.9 (#45000) --- files/en-us/web/api/devicemotionevent/index.md | 2 +- .../requestpermission_static/index.md | 4 +--- files/en-us/web/api/deviceorientationevent/index.md | 2 +- .../requestpermission_static/index.md | 4 +--- .../mediastreamtrackprocessor/discardedframes/index.md | 4 +++- .../api/mediastreamtrackprocessor/totalframes/index.md | 4 +++- files/en-us/web/api/rtccertificatestats/index.md | 2 +- .../rtccertificatestats/issuercertificateid/index.md | 4 +++- files/en-us/web/api/rtcicecandidatepair/index.md | 8 +++++--- files/en-us/web/api/rtcicecandidatepair/local/index.md | 4 +++- .../en-us/web/api/rtcicecandidatepair/remote/index.md | 4 +++- files/en-us/web/api/rtctransportstats/index.md | 4 ++-- .../web/api/rtctransportstats/packetsreceived/index.md | 4 +--- .../web/api/rtctransportstats/packetssent/index.md | 4 +--- .../web/css/reference/properties/writing-mode/index.md | 10 +++++----- files/en-us/web/css/reference/values/param/index.md | 4 ++++ .../reference/global_objects/iterator/index.md | 2 +- .../reference/global_objects/iterator/join/index.md | 4 ++++ 18 files changed, 43 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/api/devicemotionevent/index.md b/files/en-us/web/api/devicemotionevent/index.md index bf90d0f54cd659c..4a380feaf46d62d 100644 --- a/files/en-us/web/api/devicemotionevent/index.md +++ b/files/en-us/web/api/devicemotionevent/index.md @@ -21,7 +21,7 @@ The **`DeviceMotionEvent`** interface of the {{domxref("Device Orientation Event ## Static methods -- {{DOMxRef("DeviceMotionEvent.requestPermission_static", "DeviceMotionEvent.requestPermission()")}} {{experimental_inline}} +- {{DOMxRef("DeviceMotionEvent.requestPermission_static", "DeviceMotionEvent.requestPermission()")}} - : Requests the user's permission to access device motion data from the accelerometer and gyroscope sensors. Returns a {{jsxref("Promise")}} that resolves with a string of `"granted"` or `"denied"`. ## Instance properties diff --git a/files/en-us/web/api/devicemotionevent/requestpermission_static/index.md b/files/en-us/web/api/devicemotionevent/requestpermission_static/index.md index 5de1e8151bcf249..9e4ed5343d36de1 100644 --- a/files/en-us/web/api/devicemotionevent/requestpermission_static/index.md +++ b/files/en-us/web/api/devicemotionevent/requestpermission_static/index.md @@ -3,12 +3,10 @@ title: "DeviceMotionEvent: requestPermission() static method" short-title: requestPermission() slug: Web/API/DeviceMotionEvent/requestPermission_static page-type: web-api-static-method -status: - - experimental browser-compat: api.DeviceMotionEvent.requestPermission_static --- -{{APIRef("Device Orientation Events")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Device Orientation Events")}}{{securecontext_header}} The **`requestPermission()`** static method of the {{domxref("DeviceMotionEvent")}} interface requests the user's permission to access device motion data from the accelerometer and gyroscope sensors. This method requires {{Glossary("transient activation")}}, meaning that it must be triggered by a UI event such as a button click. diff --git a/files/en-us/web/api/deviceorientationevent/index.md b/files/en-us/web/api/deviceorientationevent/index.md index 781b9e66dcc76f7..45f203ac335c62f 100644 --- a/files/en-us/web/api/deviceorientationevent/index.md +++ b/files/en-us/web/api/deviceorientationevent/index.md @@ -18,7 +18,7 @@ The **`DeviceOrientationEvent`** interface of the {{domxref("Device Orientation ## Static methods -- {{domxref("DeviceOrientationEvent.requestPermission_static", "DeviceOrientationEvent.requestPermission()")}} {{experimental_inline}} +- {{domxref("DeviceOrientationEvent.requestPermission_static", "DeviceOrientationEvent.requestPermission()")}} - : Requests the user's permission to access device orientation data. Returns a {{jsxref("Promise")}} that resolves with a string of `"granted"` or `"denied"`. ## Instance properties diff --git a/files/en-us/web/api/deviceorientationevent/requestpermission_static/index.md b/files/en-us/web/api/deviceorientationevent/requestpermission_static/index.md index 0962f7305a6f006..b7724f30900b488 100644 --- a/files/en-us/web/api/deviceorientationevent/requestpermission_static/index.md +++ b/files/en-us/web/api/deviceorientationevent/requestpermission_static/index.md @@ -3,12 +3,10 @@ title: "DeviceOrientationEvent: requestPermission() static method" short-title: requestPermission() slug: Web/API/DeviceOrientationEvent/requestPermission_static page-type: web-api-static-method -status: - - experimental browser-compat: api.DeviceOrientationEvent.requestPermission_static --- -{{APIRef("Device Orientation Events")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Device Orientation Events")}}{{securecontext_header}} The **`requestPermission()`** static method of the {{domxref("DeviceOrientationEvent")}} interface requests the user's permission to access device orientation data from the accelerometer and gyroscope sensors. It can also request permission to access magnetometer data when absolute orientation is needed. This method requires {{Glossary("transient activation")}}, meaning that it must be triggered by a UI event such as a button click. diff --git a/files/en-us/web/api/mediastreamtrackprocessor/discardedframes/index.md b/files/en-us/web/api/mediastreamtrackprocessor/discardedframes/index.md index b5f56daab35fb6a..96d27529d6e8886 100644 --- a/files/en-us/web/api/mediastreamtrackprocessor/discardedframes/index.md +++ b/files/en-us/web/api/mediastreamtrackprocessor/discardedframes/index.md @@ -3,10 +3,12 @@ title: "MediaStreamTrackProcessor: discardedFrames property" short-title: discardedFrames slug: Web/API/MediaStreamTrackProcessor/discardedFrames page-type: web-api-instance-property +status: + - experimental browser-compat: api.MediaStreamTrackProcessor.discardedFrames --- -{{APIRef("Insertable Streams for MediaStreamTrack API")}} +{{APIRef("Insertable Streams for MediaStreamTrack API")}}{{SeeCompatTable}} The **`discardedFrames`** property of the {{domxref("MediaStreamTrackProcessor")}} interface returns a number indicating how many frames have been dropped by the processor. diff --git a/files/en-us/web/api/mediastreamtrackprocessor/totalframes/index.md b/files/en-us/web/api/mediastreamtrackprocessor/totalframes/index.md index 8eda641bec7499e..b839292ca21223c 100644 --- a/files/en-us/web/api/mediastreamtrackprocessor/totalframes/index.md +++ b/files/en-us/web/api/mediastreamtrackprocessor/totalframes/index.md @@ -3,10 +3,12 @@ title: "MediaStreamTrackProcessor: totalFrames property" short-title: totalFrames slug: Web/API/MediaStreamTrackProcessor/totalFrames page-type: web-api-instance-property +status: + - experimental browser-compat: api.MediaStreamTrackProcessor.totalFrames --- -{{APIRef("Insertable Streams for MediaStreamTrack API")}} +{{APIRef("Insertable Streams for MediaStreamTrack API")}}{{SeeCompatTable}} The **`totalFrames`** property of the {{domxref("MediaStreamTrackProcessor")}} interface returns a number indicating how many frames have been received by the processor in total. diff --git a/files/en-us/web/api/rtccertificatestats/index.md b/files/en-us/web/api/rtccertificatestats/index.md index 0618bac48a0fa01..7d7ec37883f0d61 100644 --- a/files/en-us/web/api/rtccertificatestats/index.md +++ b/files/en-us/web/api/rtccertificatestats/index.md @@ -19,7 +19,7 @@ The report can be obtained by iterating the {{domxref("RTCStatsReport")}} return - : A string containing the certificate fingerprint, which is calculated using the hash function specified in [`fingerprintAlgorithm`](/en-US/docs/Web/API/RTCCertificateStats/fingerprintAlgorithm). - {{domxref("RTCCertificateStats.fingerprintAlgorithm", "fingerprintAlgorithm")}} - : A string containing the hash function used to compute the certificate [`fingerprint`](/en-US/docs/Web/API/RTCCertificateStats/fingerprint), such as "sha-256". -- {{domxref("RTCCertificateStats.issuerCertificateId", "issuerCertificateId")}} +- {{domxref("RTCCertificateStats.issuerCertificateId", "issuerCertificateId")}} {{experimental_inline}} - : A string containing the `id` of the {{domxref("RTCCertificateStats")}} object in this report that contains the next certificate in the certificate chain. This will not be set if the current certificate is a self-signed certificate or the end of the certificate chain (a root certificate). diff --git a/files/en-us/web/api/rtccertificatestats/issuercertificateid/index.md b/files/en-us/web/api/rtccertificatestats/issuercertificateid/index.md index eeed0056d1d2d88..5cba05a4613be92 100644 --- a/files/en-us/web/api/rtccertificatestats/issuercertificateid/index.md +++ b/files/en-us/web/api/rtccertificatestats/issuercertificateid/index.md @@ -3,10 +3,12 @@ title: "RTCCertificateStats: issuerCertificateId property" short-title: issuerCertificateId slug: Web/API/RTCCertificateStats/issuerCertificateId page-type: web-api-instance-property +status: + - experimental browser-compat: api.RTCStatsReport.type_certificate.issuerCertificateId --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{SeeCompatTable}} The **`issuerCertificateId`** property of the {{domxref("RTCCertificateStats")}} dictionary is a string containing the {{domxref("RTCCertificateStats.id", "id")}} of the {{domxref("RTCCertificateStats")}} object in this report that contains the next certificate in the certificate chain. diff --git a/files/en-us/web/api/rtcicecandidatepair/index.md b/files/en-us/web/api/rtcicecandidatepair/index.md index 7153f6f8acdefce..d06ae952bf3aaf4 100644 --- a/files/en-us/web/api/rtcicecandidatepair/index.md +++ b/files/en-us/web/api/rtcicecandidatepair/index.md @@ -2,18 +2,20 @@ title: RTCIceCandidatePair slug: Web/API/RTCIceCandidatePair page-type: web-api-interface +status: + - experimental browser-compat: api.RTCIceCandidatePair --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{SeeCompatTable}} The **`RTCIceCandidatePair`** dictionary describes a pair of ICE candidates which together comprise a description of a viable connection between two WebRTC endpoints. It is used as the return value from {{domxref("RTCIceTransport.getSelectedCandidatePair()")}} to identify the currently-selected candidate pair identified by the ICE agent. ## Instance properties -- {{domxref("RTCIceCandidatePair.local", "local")}} +- {{domxref("RTCIceCandidatePair.local", "local")}} {{experimental_inline}} - : An {{domxref("RTCIceCandidate")}} describing the configuration of the local end of the connection. -- {{domxref("RTCIceCandidatePair.remote", "remote")}} +- {{domxref("RTCIceCandidatePair.remote", "remote")}} {{experimental_inline}} - : The **`RTCIceCandidate`** describing the configuration of the remote end of the connection. ## Examples diff --git a/files/en-us/web/api/rtcicecandidatepair/local/index.md b/files/en-us/web/api/rtcicecandidatepair/local/index.md index e44291c78cd1b74..c51620c36f168c9 100644 --- a/files/en-us/web/api/rtcicecandidatepair/local/index.md +++ b/files/en-us/web/api/rtcicecandidatepair/local/index.md @@ -3,10 +3,12 @@ title: "RTCIceCandidatePair: local property" short-title: local slug: Web/API/RTCIceCandidatePair/local page-type: web-api-instance-property +status: + - experimental browser-compat: api.RTCIceCandidatePair.local --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{SeeCompatTable}} The **`local`** property of the {{domxref("RTCIceCandidatePair")}} interface specifies the {{domxref("RTCIceCandidate")}} that describes the configuration of the local end of a viable WebRTC connection. diff --git a/files/en-us/web/api/rtcicecandidatepair/remote/index.md b/files/en-us/web/api/rtcicecandidatepair/remote/index.md index 3ac27241eb495b0..02e6a409a8f045c 100644 --- a/files/en-us/web/api/rtcicecandidatepair/remote/index.md +++ b/files/en-us/web/api/rtcicecandidatepair/remote/index.md @@ -3,10 +3,12 @@ title: "RTCIceCandidatePair: remote property" short-title: remote slug: Web/API/RTCIceCandidatePair/remote page-type: web-api-instance-property +status: + - experimental browser-compat: api.RTCIceCandidatePair.remote --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{SeeCompatTable}} The **`remote`** property of the {{domxref("RTCIceCandidatePair")}} interface specifies the {{domxref("RTCIceCandidate")}} that describes the configuration of the remote end of a viable WebRTC connection. diff --git a/files/en-us/web/api/rtctransportstats/index.md b/files/en-us/web/api/rtctransportstats/index.md index 89b939ac5cba57d..12aac82bbeed29e 100644 --- a/files/en-us/web/api/rtctransportstats/index.md +++ b/files/en-us/web/api/rtctransportstats/index.md @@ -41,9 +41,9 @@ These statistics can be obtained by iterating the {{domxref("RTCStatsReport")}} - {{domxref("RTCTransportStats.localCertificateId", "localCertificateId")}} {{optional_inline}} - : A string containing the id of the local certificate used by this transport. Only present for DTLS transports, and after DTLS has been negotiated. -- {{domxref("RTCTransportStats.packetsReceived", "packetsReceived")}} {{optional_inline}} {{experimental_inline}} +- {{domxref("RTCTransportStats.packetsReceived", "packetsReceived")}} {{optional_inline}} - : The total number of packets received on this transport. -- {{domxref("RTCTransportStats.packetsSent", "packetsSent")}} {{optional_inline}} {{experimental_inline}} +- {{domxref("RTCTransportStats.packetsSent", "packetsSent")}} {{optional_inline}} - : The total number of packets sent over this transport. - {{domxref("RTCTransportStats.remoteCertificateId", "remoteCertificateId")}} {{optional_inline}} - : A string containing the id or the remote certificate used by this transport. diff --git a/files/en-us/web/api/rtctransportstats/packetsreceived/index.md b/files/en-us/web/api/rtctransportstats/packetsreceived/index.md index a1cbe36b66ba6a2..16cd4b44baf9747 100644 --- a/files/en-us/web/api/rtctransportstats/packetsreceived/index.md +++ b/files/en-us/web/api/rtctransportstats/packetsreceived/index.md @@ -3,12 +3,10 @@ title: "RTCTransportStats: packetsReceived property" short-title: packetsReceived slug: Web/API/RTCTransportStats/packetsReceived page-type: web-api-instance-property -status: - - experimental browser-compat: api.RTCStatsReport.type_transport.packetsReceived --- -{{APIRef("WebRTC")}}{{SeeCompatTable}} +{{APIRef("WebRTC")}} The **`packetsReceived`** property of the {{domxref("RTCTransportStats")}} dictionary indicates the total number of packets received on this transport. diff --git a/files/en-us/web/api/rtctransportstats/packetssent/index.md b/files/en-us/web/api/rtctransportstats/packetssent/index.md index 9204c304af1eede..b1d041de04190ab 100644 --- a/files/en-us/web/api/rtctransportstats/packetssent/index.md +++ b/files/en-us/web/api/rtctransportstats/packetssent/index.md @@ -3,12 +3,10 @@ title: "RTCTransportStats: packetsSent property" short-title: packetsSent slug: Web/API/RTCTransportStats/packetsSent page-type: web-api-instance-property -status: - - experimental browser-compat: api.RTCStatsReport.type_transport.packetsSent --- -{{APIRef("WebRTC")}}{{SeeCompatTable}} +{{APIRef("WebRTC")}} The **`packetsSent`** property of the {{domxref("RTCTransportStats")}} dictionary indicates the total number of packets sent over this transport. diff --git a/files/en-us/web/css/reference/properties/writing-mode/index.md b/files/en-us/web/css/reference/properties/writing-mode/index.md index 55cfed89a864b03..81ee55bd59cfdfd 100644 --- a/files/en-us/web/css/reference/properties/writing-mode/index.md +++ b/files/en-us/web/css/reference/properties/writing-mode/index.md @@ -89,17 +89,17 @@ This property is specified as one of the following keywords: - : For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right. - `sideways-lr` - : For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left. -- `lr` {{Deprecated_Inline}} +- `lr` - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `lr-tb` {{Deprecated_Inline}} +- `lr-tb` - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `rl` {{Deprecated_Inline}} +- `rl` - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `tb` {{Deprecated_Inline}} +- `tb` - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead. - `tb-lr` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead. -- `tb-rl` {{Deprecated_Inline}} +- `tb-rl` - : Deprecated except for SVG1 documents. For CSS, use `vertical-rl` instead. ## Description diff --git a/files/en-us/web/css/reference/values/param/index.md b/files/en-us/web/css/reference/values/param/index.md index 9a6223b6dae49c0..d73d918ba310008 100644 --- a/files/en-us/web/css/reference/values/param/index.md +++ b/files/en-us/web/css/reference/values/param/index.md @@ -3,10 +3,14 @@ title: "`param()` CSS function" short-title: param() slug: Web/CSS/Reference/Values/param page-type: css-function +status: + - experimental browser-compat: css.types.param sidebar: cssref --- +{{SeeCompatTable}} + The **`param()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to set link parameters. This can be done using the {{cssxref("link-parameters")}} CSS function, in the fragment URL of an external resource, or in the [``](/en-US/docs/Web/CSS/Reference/Values/url_function#url-modifier) of the `url()` CSS function. ## Syntax diff --git a/files/en-us/web/javascript/reference/global_objects/iterator/index.md b/files/en-us/web/javascript/reference/global_objects/iterator/index.md index ff005db15e78bd1..ab854bcfc5339fa 100644 --- a/files/en-us/web/javascript/reference/global_objects/iterator/index.md +++ b/files/en-us/web/javascript/reference/global_objects/iterator/index.md @@ -176,7 +176,7 @@ These properties are defined on `Iterator.prototype` and shared by all `Iterator - : Executes a provided function once for each element produced by the iterator. - {{jsxref("Iterator.prototype.includes()")}} {{experimental_inline}} - : Returns `true` if an element produced by the iterator is equal to the given value. Otherwise, if the iterator is exhausted without finding such an element, it returns `false`. -- {{jsxref("Iterator.prototype.join()")}} +- {{jsxref("Iterator.prototype.join()")}} {{experimental_inline}} - : Returns a string that is the concatenation of all elements produced by the iterator, separated by commas or a specified separator string. - {{jsxref("Iterator.prototype.map()")}} - : Returns a new iterator helper object that yields elements of the iterator, each transformed by a mapping function. diff --git a/files/en-us/web/javascript/reference/global_objects/iterator/join/index.md b/files/en-us/web/javascript/reference/global_objects/iterator/join/index.md index a0055698f5a7e63..600061bce177ea9 100644 --- a/files/en-us/web/javascript/reference/global_objects/iterator/join/index.md +++ b/files/en-us/web/javascript/reference/global_objects/iterator/join/index.md @@ -3,10 +3,14 @@ title: Iterator.prototype.join() short-title: join() slug: Web/JavaScript/Reference/Global_Objects/Iterator/join page-type: javascript-instance-method +status: + - experimental browser-compat: javascript.builtins.Iterator.join sidebar: jsref --- +{{SeeCompatTable}} + The **`join()`** method of {{jsxref("Iterator")}} instances is similar to {{jsxref("Array.prototype.join()")}}: it returns a string that is the concatenation of all elements produced by the iterator, separated by commas or a specified separator string. If the iterator has only one item, that item's stringification is returned without using the separator. ## Syntax From e08f8e5467c3af416ca82f00bfbf19d718d6fbab Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 4 Aug 2026 10:41:02 +0200 Subject: [PATCH 2/3] New pages: rule-* shorthand properties (#44895) * rule-* shorthand properties * Apply suggestions from code review Co-authored-by: Chris Mills * change example to 75 cells, and update text accordingly Updated examples and descriptions for clarity regarding the grid container dimensions and the use of the repeat() function in the rule-width property. * Apply suggestions from code review * Update files/en-us/web/css/reference/properties/rule-color/index.md * example height * Add rule-color property "no support" on basic example Added a CSS live sample for browsers not supporting the rule-color property. * add no support on basic exmple for rule-style Add a live sample for browsers that do not support the rule-style property. * no support on rule width * Apply suggestions from code review Co-authored-by: Chris Mills * position no support on rule color * Update files/en-us/web/css/reference/properties/rule-color/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/reference/properties/rule-color/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Chris Mills Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../reference/properties/rule-color/index.md | 436 ++++++++++++++++++ .../reference/properties/rule-style/index.md | 413 +++++++++++++++++ .../reference/properties/rule-width/index.md | 397 ++++++++++++++++ 3 files changed, 1246 insertions(+) create mode 100644 files/en-us/web/css/reference/properties/rule-color/index.md create mode 100644 files/en-us/web/css/reference/properties/rule-style/index.md create mode 100644 files/en-us/web/css/reference/properties/rule-width/index.md diff --git a/files/en-us/web/css/reference/properties/rule-color/index.md b/files/en-us/web/css/reference/properties/rule-color/index.md new file mode 100644 index 000000000000000..17729d543c4afcc --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule-color/index.md @@ -0,0 +1,436 @@ +--- +title: "`rule-color` CSS property" +short-title: rule-color +slug: Web/CSS/Reference/Properties/rule-color +page-type: css-property +browser-compat: css.properties.rule-color +sidebar: cssref +--- + +The **`rule-color`** [CSS](/en-US/docs/Web/CSS) property defines the colors of the lines drawn between columns and rows in multi-column grid, flex, and multi-col layouts, setting the colors of the column and row rules to the same value. + +{{InteractiveExample("CSS Demo: rule-color")}} + +```css interactive-example-choice +rule-color: purple; +``` + +```css interactive-example-choice +rule-color: rgb(48 125 222), rgb(222 48 125); +``` + +```css interactive-example-choice +rule-color: rgb(48 125 222), repeat(3, rgb(222 48 125)); +``` + +```css interactive-example-choice +rule-color: purple, repeat(auto, red, yellow); +``` + +```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("column-rule-color")}} +- {{cssxref("row-rule-color")}} + +## Syntax + +```css +/* Single value */ +rule-color: purple; +rule-color: rgb(192 56 78); +rule-color: transparent; +rule-color: hsl(0 100% 50% / 60%); + +/* Multiple values */ +rule-color: purple, magenta; +rule-color: repeat(3, purple), repeat(3, transparent); +rule-color: repeat(3, purple), repeat(3, yellow, blue); +rule-color: purple, repeat(auto, transparent), purple; +rule-color: purple, repeat(auto, blue, yellow), purple; +rule-color: repeat(3, purple), repeat(auto, transparent), repeat(3, purple); + +/* Global values */ +rule-color: inherit; +rule-color: initial; +rule-color: revert; +rule-color: revert-layer; +rule-color: unset; +``` + +### Values + +The `rule-color` property accepts a comma-separated list of values, including: + +- `` + - : A {{cssxref("<color>")}} representing the color of the line. + +- `` + - : 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 `` values should be repeated. + +- `` + - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `` values as subsequent arguments. The provided `` values are 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-color` property defines the colors of any lines drawn in the gaps between columns and rows 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 column or row. It is a shorthand property that sets both the {{cssxref("row-rule-color")}} and {{cssxref("column-rule-color")}} properties to the same value. + +The value is a comma-separated list of components, which can include ``, ``, and `` types. +The `rule-color` property, along with the {{cssxref("rule-width")}} and {{cssxref("rule-style")}} properties, can be set using the {{cssxref("rule")}} shothand. + +### Line colors + +A `` can be declared as any valid CSS {{cssxref("<color>")}} value. If the property value consists of only one ``, all the rule lines will be that color. For example, if we declare the following, the lines in the gutters between columns and rows will all be blue: + +```css +rule-color: blue; +``` + +When multiple `` values are declared, they will be applied to lines painted in the column and row gutters in the order specified. If there are more rules than `` values, the list of colors is repeated until every column-rule has a color. If we declare the following, for example, every odd rule will be red, and every even rule will be yellow. + +```css +rule-color: red, yellow; +``` + +### Repeated line colors + +The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS {{cssxref("<color>")}} values passed as subsequent arguments the specified number of times. This allows the color values to be repeated as many times as you need without having to list them individually. The following declarations are equivalent: + +```css +rule-color: blue, yellow, red, yellow, red, yellow, red; +rule-color: blue, repeat(3, yellow, red); +``` + +This creates a list of seven colors. If the number of colors in the `rule-color` value's color list exceeds the number of gaps between columns and rows, the excess color values are ignored. If there are fewer colors than gutters, the list of values is repeated until every rule has an associated color. For example, if the container has three columns and 18 rows, the rule in the first column gutter will be blue and the second yellow. For the row rules, the sequence repeats, with the first, eighth, and fifteenth row rules being blue. + +### Auto-repeating line colors + +The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the `` values passed as subsequent arguments will be repeated as many times as needed to fill in values for any column and row rules that are not explicitly specified by other components of the property value. + +```css +rule-color: blue, repeat(auto, yellow), red; +``` + +In this case, the first column and row rules will be blue, the last will be red, and all others will be yellow. As long as there are at least two rules in either direction, the first rule will always be blue and the last will always be red. All the other rules will be yellow, which means if there are only 2 or 3 columns and rows, there will be no yellow lines. + +The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for the rule line colors that would not otherwise receive values from other parts of the list, preventing the list from being cycled. A `rule-color` value can include, at most, one `repeat(auto, )`. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a single `` for the lines drawn between the columns and rows of items in a grid container. + +#### 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
    • +
  • 4
    • +
  • 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. We include a {{cssxref("gap")}} of `5px` to provide enough room between the columns and rows to fit our `3px` dashed rule, and set {{cssxref("list-style-type")}} to `none` to remove the bullets. + +We include a {{cssxref("gap")}} of `5px` to provide enough room between the items to fit our medium dashed rule. We set the `rule-color` to `#22BB22`, a green {{cssxref("hex-color")}} value: + +```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-style: dashed; + rule-width: medium; + + rule-color: #22bb22; +} +li { + text-align: center; + aspect-ratio: 1; +} +``` + +```css hidden live-sample___basic +@layer no-support { + @supports not (rule-color: red) { + body::before { + content: "Your browser doesn't support the rule-color property"; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + position: fixed; + top: 0; + left: 0; + width: 100%; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "600")}} + +### Multiple color values + +This example demonstrates declaring more than one color, and how the values are repeated when there are fewer values in the list of colors than gutters between columns and rows. + +Using the same HTML and CSS as in the previous example, we include three comma-separated colors as the `rule-color` value: + +```css hidden live-sample___multiple +@layer no-support { + @supports not (rule-color: red, blue) { + body::before { + content: "Your browser doesn't support multiple values for the rule-color property"; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + position: fixed; + top: 0; + left: 0; + width: 100%; + } + } +} +``` + +```css live-sample___multiple +ul { + rule-color: blue, yellow, red; +} +``` + +#### Result + +{{EmbedLiveSample("Multiple", "", "600")}} + +There are nine column gutters and six row gutters, but only three colors in our color list, so the list gets repeated, with the first, fourth, and seventh lines being blue. + +### Using the `repeat()` function + +This example demonstrates using the `repeat()` function within the `rule-color` property value and how this function can help prevent complex values from becoming unwieldy. + +#### CSS + +To demonstrate how values can become complicated and the utility of the `repeat()` function, we declare two custom properties, which we use in four {{cssxref("color-mix()")}} color function declarations to create blue, redish, tealish, and yellow colors. The redish and tealish `color-mix()` colors are within a `repeat()` function, set to repeat 3 times. + +We also added a border around each grid item so you can see how the line is rule in the middle of the gutter between the columns and rows. + +```css live-sample___repeat +ul { + --base: yellow; + --mixin: blue; + + rule-color: + color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)), + repeat( + 3, + color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin)), + color-mix(in lch increasing hue, var(--base) 58%, var(--mixin)) + ), + color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin)); +} +``` + +#### Result + +{{EmbedLiveSample("repeat", "", "600")}} + +The grid has 10 columns and 7 rows, creating 9 column and 6 row gutters. The `repeat()` function repeats the two contained mixed colors three times, creating a color list with eight colors in all. While there is a lot of CSS to create the four colors, at least we didn't have to write out all eight `color-mix()` functions. Since there are more column gutters than list colors, the colors are repeated for the column gutters. As there are fewer row gutters than colors, the last two colors in the list are not used for the row gutters. + +### Using `auto` within `repeat()` + +This example demonstrates using `auto`, instead of an integer, within the `repeat()` function. + +We use the same HTML and CSS as in the previous examples, but override the `rule-color` value. Here, we use `repeat(auto, )` to set all the lines to be almost transparent black (`#0003`), except the first and last, which we set to a solid `black`. + +```css live-sample___auto +ul { + rule-color: black, repeat(auto, #0003), black; +} +``` + +#### Result + +{{EmbedLiveSample("auto", "", "600")}} + +Even though there are more column rule lines than row rule lines, the `` value enables the creation of this symmetric effect. + +```css hidden live-sample___repeat live-sample___auto +@layer no-support { + @supports not (rule-color: repeat(3, red)) { + body::before { + content: "Your browser doesn't support `repeat()` functions within a rule-color property value"; + background-color: wheat; + text-align: center; + padding: 1rem 0; + + position: fixed; + top: 0; + left: 0; + width: 100%; + } + } +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- The {{cssxref("<color>")}} data type +- {{cssxref("rule-width")}} +- {{cssxref("rule-style")}} +- {{cssxref("row-rule-color")}} +- {{cssxref("column-rule-color")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/rule-style/index.md b/files/en-us/web/css/reference/properties/rule-style/index.md new file mode 100644 index 000000000000000..fb669d27aaaae43 --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule-style/index.md @@ -0,0 +1,413 @@ +--- +title: "`rule-style` CSS property" +short-title: rule-style +slug: Web/CSS/Reference/Properties/rule-style +page-type: css-property +browser-compat: css.properties.rule-style +sidebar: cssref +--- + +The **`rule-style`** [CSS](/en-US/docs/Web/CSS) property defines the line style of the lines drawn between columns and rows in multi-column grid, flex, and multi-col layouts, setting the styles of the column and row rules to the same value. + +{{InteractiveExample("CSS Demo: rule-style")}} + +```css interactive-example-choice +rule-style: solid; +``` + +```css interactive-example-choice +rule-style: dashed, dotted; +``` + +```css interactive-example-choice +rule-style: repeat(2, inset, dashed, double); +``` + +```css interactive-example-choice +rule-style: solid, repeat(auto, double), solid; +``` + +```css interactive-example-choice +rule-style: hidden; +``` + +```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 rebeccapurple 7px; + gap: 7px; +} +#example-element i { + padding: 5px; +} +``` + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("column-rule-style")}} +- {{cssxref("row-rule-style")}} + +## Syntax + +```css +/* One value */ +rule-style: none; +rule-style: hidden; +rule-style: dotted; +rule-style: dashed; +rule-style: solid; +rule-style: double; +rule-style: groove; +rule-style: ridge; +rule-style: inset; +rule-style: outset; + +/* Multiple values */ +rule-style: groove, double, dashed; +rule-style: solid, repeat(5, ridge), solid; +rule-style: dotted, repeat(auto, inset, outset), dotted; + +/* Global values */ +rule-style: inherit; +rule-style: initial; +rule-style: revert; +rule-style: revert-layer; +rule-style: unset; +``` + +### Values + +The `rule-style` property accepts a comma-separated list of values, including: + +- `` + - : A {{cssxref("<line-style>")}}: one of `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, or `outset`. The default value is `none`. + +- `` + - : A {{cssxref("repeat()")}} function, with the first argument being an {{cssxref("<integer>")}} of `1` or more, and subsequent arguments being {{cssxref("<line-style>")}} values. The integer specifies how many times the `` values should be repeated. + +- `` + - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `` values as subsequent arguments. The provided `` values are 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-style` property defines the line style of any column and row rule lines drawn in the gaps between columns and rows 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 column or row. + +The `rule-style` sets both the {{cssxref("column-rule-style")}} and {{cssxref("row-rule-style")}} properties to the same value. +The `rule-style` property, along with the {{cssxref("rule-color")}} and {{cssxref("rule-width")}} properties, can also be set using the {{cssxref("rule")}} shorthand. + +The value is a comma-separated list of components, which can include ``, ``, and `` types. + +If the property value has only one ``, all the column and row rules will be that style. If we declare the following, all column and row rules will be `double`: + +```css +rule-style: double; +``` + +When multiple `` values are declared, they will be applied to rules in the order specified. If there are more rules than `` values, the list of line styles is repeated until every column and row rule has a style. For example, if we declare the following, every odd rule will be `double`, and every even rule will be `inset`. + +```css +rule-style: double, inset; +``` + +### 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 {{cssxref("<line-style>")}} values passed as subsequent arguments the specified number of times. This allows the same style to be repeated a set number of times without repeating the same value. You can include `` keyword values or custom properties that resolve to a valid ``. Using `repeat()` can make values easier to write, enabling recurring patterns to be written using a single function, regardless of the number of columns or rows. The following declarations are equivalent: + +```css +rule-style: solid, outset, inset, outset, inset, outset, inset; +rule-style: solid, repeat(3, outset, inset); +``` + +This creates a list of seven styles. If the number of styles in the `rule-style` value's style list exceeds the number of gaps between columns or rows, the excess style values are ignored. If the container has three columns or rows, the rule in the first gutter will be `solid` and the second `outset`. + +If there are more gutters than styles, the list of styles is repeated. If the container has 8, 15, 22, or 29 columns or rows, this sequence of styles will be repeated one, two, three, or four times, respectively, with the last rule being `inset`. + +### 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 `` values passed as subsequent parameters will be 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. + +The `auto` keyword within the `repeat()` function creates an auto repeater that fills in values for column and row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. Only one `repeat(auto, )` is allowed within a `rule-style` value. + +```css +rule-style: solid, repeat(auto, dotted), solid; +``` + +In this case, it doesn't matter if the container has 8, 15, 22, or 29 columns or rows; the first and last rules will always be `solid`, and all the other rules will be `dotted`. If there are only 2 or 3 columns and rows, there will be no dotted rules. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +In this example, we define a single `` for the lines drawn between the columns and rows of items in a grid container. + +#### 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
    • +
  • 4
    • +
  • 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; we then set {{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 `thick dashed orange` 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-width: thick; + rule-color: orange; + + rule-style: dashed; +} +li { + text-align: center; + aspect-ratio: 1; +} +``` + +```css hidden live-sample___basic +@layer no-support { + @supports not (rule-style: solid) { + body::before { + content: "Your browser doesn't support the rule-style property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "600")}} + +### Multiple values + +This example demonstrates using multiple `` values as a property value, and what happens when more `` values are specified than there are gutters to style. + +We set the `rule-style` property to be a comma-separated list of all the possible `` values. + +```css live-sample___multiple +ul { + rule-style: + dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden; +} +``` + +#### Result + +{{EmbedLiveSample("Multiple", "", "600")}} + +There are more values than gutters for both the rows and columns; the last values are not used in each case. + +### Repeating values + +This example demonstrates how, when there are fewer values in the list of styles than column and row rules, the values are repeated. + +Using the same HTML and CSS as in the previous example, we include three comma-separated styles as the `rule-style` value: + +```css live-sample___repeat +ul { + rule-style: solid, groove, double; +} +``` + +{{EmbedLiveSample("Repeat", "", "600")}} + +### Using the `repeat()` function + +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 that sets a list of two `` values to be repeated 3 times. + +```css live-sample___func +ul { + rule-style: solid, repeat(3, inset, outset), solid; +} +``` + +{{EmbedLiveSample("func", "", "600")}} + +The `repeat()` function repeats two style values three times, creating a list of eight style values. The styles are repeated for the columns; however, the last values in the list are discarded for the rows. + +### Using `auto` within `repeat()` + +This example demonstrates using `auto` instead of an integer within the `repeat()` function. + +Using `repeat(auto, )`, we set all column and row rules to `groove`, except the first and last, which we set to `solid`. + +```css live-sample___auto +ul { + rule-style: solid, repeat(auto, groove), solid; +} +``` + +{{EmbedLiveSample("auto", "", "600")}} + +Even though there are more column rule lines than row rule lines, the `` enables the creation of this symmetric effect. + +```css hidden live-sample___multiple live-sample___repeat live-sample___func live-sample___auto +@layer no-support { + @supports not (rule-style: solid, groove) { + body::before { + content: "Your browser doesn't support multiple values for the rule-style 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("row-rule-style")}} +- {{cssxref("rule")}} shorthand +- {{cssxref("rule-style")}} shorthand +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/rule-width/index.md b/files/en-us/web/css/reference/properties/rule-width/index.md new file mode 100644 index 000000000000000..d6d7fc8ccf28160 --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule-width/index.md @@ -0,0 +1,397 @@ +--- +title: "`rule-width` CSS property" +short-title: rule-width +slug: Web/CSS/Reference/Properties/rule-width +page-type: css-property +browser-compat: css.properties.rule-width +sidebar: cssref +--- + +The **`rule-width`** [CSS](/en-US/docs/Web/CSS) property defines the widths of any lines drawn in the gutters of multi-row grid, flex, and multi-col layouts, setting the widths of the column and row rules to the same value. + +{{InteractiveExample("CSS Demo: rule-width")}} + +```css interactive-example-choice +rule-width: thin; +``` + +```css interactive-example-choice +rule-width: thin, thick; +``` + +```css interactive-example-choice +rule-width: 1px, 10px; +``` + +```css interactive-example-choice +rule-width: repeat(2, thin, thick), 10px; +``` + +```css interactive-example-choice +rule-width: thick, repeat(auto, 1px, 2px), thick; +``` + +```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 magenta; +} +#example-element i { + padding: 5px; +} +``` + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("column-rule-width")}} +- {{cssxref("row-rule-width")}} + +## Syntax + +```css +/* Keyword values */ +rule-width: thin; +rule-width: medium; +rule-width: thick; +rule-width: thin, medium, thick; +rule-width: thick, repeat(5, thin), thick; +rule-width: thick, repeat(auto, thin, medium), thick; + +/* Length values */ +rule-width: 1px; +rule-width: 5px; +rule-width: 1px, 3px, 5px; +rule-width: 5px, repeat(auto, 1px), 10px, 15px; +rule-width: 5px, repeat(5, 1px, 3px), 5px; + +/* Global values */ +rule-width: inherit; +rule-width: initial; +rule-width: revert; +rule-width: revert-layer; +rule-width: unset; +``` + +### Values + +The `rule-width` property accepts a comma-separated list of values, including: + +- `` + - : A {{cssxref("line-width")}}: This can be one of the keywords `thin`, `medium`, or `thick`, or a positive {{cssxref("length")}} value, representing the width of the line. The default value is `medium`. + +- `` + - : A {{cssxref("repeat()")}} function, with the first argument being an {{cssxref("<integer>")}} of `1` or more, and one or more {{cssxref("<line-width>")}} values as subsequent arguments. The integer defines the number of times the `` values should be repeated. + +- `` + - : A {{cssxref("repeat()")}} function, with `auto` as the first argument and one or more `` values as subsequent arguments. The provided `` values are 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-width` shorthand property defines the widths of rule lines drawn in the gaps between columns and rows 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 value is a comma-separated list of components, which can include ``, ``, and `` types. + +The `rule-width` property, along with the {{cssxref("rule-color")}} and {{cssxref("rule-style")}} properties, can be set using the {{cssxref("rule")}} shorthand. + +If the property value consists of only one ``, all the row and column rules will be that width. If we declare the following, all rules will be `3px`: + +```css +rule-width: 3px; +``` + +When multiple `` values are declared, they will be applied to rules in the order specified. If there are more rules than `` values, the list of line widths is repeated until every rule has a width. If we declare the following, for example, every odd horizontal and vertical rule will be `thin`, and every even rule will be `1em`. + +```css +rule-width: thin, 1em; +``` + +### Repeated line widths + +The `repeat()` function, with an integer of `1` or greater as the first argument, can be used to repeat a valid list of CSS {{cssxref("<line-width>")}} values passed as subsequent arguments the specified number of times. This allows the same widths to be repeated a set number of times without repeating the values. The following declarations are equivalent: + +```css +rule-width: 1rem, thick, thin, thick, thin, thick, thin; +rule-width: 1rem, repeat(3, thick, thin); +``` + +You can use any `` values, including custom properties that resolve to a ``. Using `repeat()` can make values easier to write, especially when using complex length calculations. It enables a recurring pattern to be written using a single function, regardless of the number of columns or rows. + +### Auto-repeating line widths + +The `repeat()` function also accepts `auto` as the first argument instead of a positive integer. With `auto` as the first argument, the list of `` values passed as subsequent arguments will be 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. + +```css +rule-width: thin, repeat(auto, medium), thin; +``` + +In this case, the first and last column and row rules will always be `thin`, and all other rules will be `medium`. If there are only 2 or 3 columns and rows, there will be no medium-sized rules. + +The `auto` keyword within the `repeat()` function creates an auto-repeater that fills in values for column and row 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-width` value. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a single width for the lines drawn between the columns and rows of items in a grid container. + +#### 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___repeat live-sample___func live-sample___auto +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 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 to be a 10-column grid container. We include a {{cssxref("gap")}} of `5px` to provide enough room between the items to fit our `3px` dashed red rule: + +```css live-sample___basic 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-style: dashed; + rule-color: red; + rule-width: 3px; +} +li { + text-align: center; + aspect-ratio: 1; +} +``` + +```css hidden live-sample___basic +@layer no-support { + @supports not (rule-width: medium) { + body::before { + content: "Your browser doesn't support the rule-width property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "600")}} + +### Repeating values + +This example demonstrates how, when there are fewer values in the list of widths than column or row rules, the values are repeated. + +Using the same HTML and CSS as in the previous example, we include three comma-separated widths as the `rule-width`. + +```css live-sample___repeat +ul { + rule-width: thin, 6px, 12px; +} +``` + +{{EmbedLiveSample("Repeat", "", "600")}} + +As the grid container has 8 rows and 10 columns, there are seven and nine gutters in each direction, respectively, so the sequence of three `` values is repeated in both directions. + +### Using the `repeat()` function + +This example demonstrates using the `repeat()` function within the `rule-width` property value and how this function can help reduce the verbosity of value declarations. + +We use the same HTML and CSS as in the previous examples. In addition, we declare two custom properties, which we use in a `repeat()` function inside our `rule-width` value. The `repeat()` function sets a list of two `` values to repeat 3 times. + +```css live-sample___func live-sample___auto +ul { + --base: 0.5vw; + --secondary: 1vw; + rule-width: + 15px, + repeat( + 4, + min(calc(var(--base) + 3px), 10px), + abs(calc(var(--secondary) - 2px)) + ), + 15px; +} +``` + +{{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 are discarded. + +### Using `auto` within `repeat()` + +This example demonstrates using `auto` instead of an integer within the `repeat()` function. + +Using `repeat(auto, )`, we set all column and row rules to `1px`, except the first and last, which we set to `5px`. + +```css live-sample___auto +ul { + rule-width: 5px, repeat(auto, 1px), 5px; +} +``` + +{{EmbedLiveSample("auto", "", "600")}} + +```css hidden live-sample___basic live-sample___repeat live-sample___func live-sample___auto +@layer no-support { + @supports not (rule-width: thin, thick) { + body::before { + content: "Your browser doesn't support the rule-width property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("rule-color")}} +- {{cssxref("rule-style")}} +- {{cssxref("column-rule-width")}} +- {{cssxref("row-rule-width")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module From fa90908057d504e370474d3d59fab826b1b1522c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 4 Aug 2026 11:17:13 +0100 Subject: [PATCH 3/3] chore(deps): bump fast-uri from 3.1.2 to 3.1.5 (#44984) Signed-off-by: dependabot[bot] --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 13192bd4aaa521d..9a84bbca766f37c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4062,9 +4062,9 @@ "license": "MIT" }, "node_modules/fast-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz", - "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz", + "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==", "dev": true, "funding": [ {