[pull] main from mdn:main

files/en-us/glossary/box_fragment/index.md

@@ -0,0 +1,8 @@
+---
+title: Box fragment
+slug: Glossary/box_fragment
+page-type: glossary-definition
+sidebar: glossarysidebar
+---
+
+A **box fragment** is an [inline element](/en-US/docs/Glossary/Inline-level_content) that has been split over multiple lines and is controlled by {{cssxref("box-decoration-break")}} CSS property.

files/en-us/glossary/decorating_box/index.md

@@ -0,0 +1,8 @@
+---
+title: Decorating box
+slug: Glossary/decorating_box
+page-type: glossary-definition
+sidebar: glossarysidebar
+---
+
+A **decorating box** is an [inline element](/en-US/docs/Glossary/Inline-level_content) that has {{cssxref("text-decoration-line")}} CSS property applied to it.

files/en-us/glossary/grid/index.md

@@ -11,7 +11,7 @@ The grid that you define using these properties is described as an _explicit gri
 
 If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column {{glossary("grid tracks", "tracks")}} to hold {{glossary("grid cell", "grid cells")}}, then extra tracks will be created in the implicit grid. The _implicit grid_ is the grid created automatically due to content being added outside of the tracks defined.
 
-In the example below I have created an _explicit grid_ of three columns and two rows. The _third_ row on the grid is an _implicit grid_ row track, formed due to their being more than the six items which fill the explicit tracks.
+In the example below I have created an _explicit grid_ of three columns and two rows. The _third_ row on the grid is an _implicit grid_ row track, formed due to there being more than the six items which fill the explicit tracks.
 
 ## Example
 

files/en-us/web/api/htmlanchorelement/password/index.md

@@ -24,7 +24,7 @@ A string.
 
 ```js
 // An <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAnchorElement"> is in the document
-const anchor = document.getElementByID("myAnchor");
+const anchor = document.getElementById("myAnchor");
 anchor.password; // returns 'flabada'
 ```
 

files/en-us/web/api/htmlanchorelement/port/index.md

@@ -24,13 +24,13 @@ A string.
 
 ```js
 // An <a id="myAnchor" href="https://developer.mozilla.org:443/en-US/docs/HTMLAnchorElement"> element is in the document
-const anchor = document.getElementByID("myAnchor");
+const anchor = document.getElementById("myAnchor");
 anchor.port; // returns ''
 ```
 
 ```js
 // Another <a id="myAnchor" href="https://developer.mozilla.org:8888/en-US/docs/HTMLAnchorElement"> element is in the document
-const anchor = document.getElementByID("myAnchor");
+const anchor = document.getElementById("myAnchor");
 anchor.port; // Returns:'8888'
 ```
 

files/en-us/web/api/htmlanchorelement/username/index.md

@@ -26,7 +26,7 @@ A string.
 
 ```js
 // An <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAnchorElement"> element is in the document
-const anchor = document.getElementByID("myAnchor");
+const anchor = document.getElementById("myAnchor");
 anchor.username; // returns 'anonymous'
 ```
 

files/en-us/web/api/htmlareaelement/password/index.md

@@ -24,7 +24,7 @@ A string.
 
 ```js
 // An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> is in the document
-const area = document.getElementByID("myArea");
+const area = document.getElementById("myArea");
 area.password; // returns 'flabada'
 ```
 

files/en-us/web/api/htmlareaelement/port/index.md

@@ -24,13 +24,13 @@ A string.
 
 ```js
 // An <area id="myArea" href="https://developer.mozilla.org:443/en-US/docs/HTMLAreaElement"> element is in the document
-const area = document.getElementByID("myArea");
+const area = document.getElementById("myArea");
 area.port; // Returns ''
 ```
 
 ```js
 // Another <area id="myArea" href="https://developer.mozilla.org:8888/en-US/docs/HTMLAreaElement"> element is in the document
-const area = document.getElementByID("myArea");
+const area = document.getElementById("myArea");
 area.port; // Returns:'8888'
 ```
 

files/en-us/web/api/htmlareaelement/username/index.md

@@ -26,7 +26,7 @@ A string.
 
 ```js
 // An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> element is in the document
-const area = document.getElementByID("myArea");
+const area = document.getElementById("myArea");
 area.username; // returns 'anonymous'
 ```
 

files/en-us/web/css/guides/box_model/introduction/index.md

@@ -28,7 +28,7 @@ The thickness of the padding is determined by the {{cssxref("padding-top")}}, {{
 
 The **border area**, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the _border-box width_ and the _border-box height_.
 
-The thickness of the borders are determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to `border-box`, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e., extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} CSS property.
+The thickness of the borders is determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to `border-box`, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e., extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} CSS property.
 
 ## Margin area
 

files/en-us/web/css/guides/cascade/specificity/index.md

@@ -179,7 +179,7 @@ p,
 }
 ```
 
-In the above code block the complex selector `p, #fakeId` the specificity is taken from `#fakeId` and also the `span`, so this create a specificity of `1-0-1` for both `p span` and `#fakeId span`. This is the equivalent specificity as the `:is(p, #fakeId) span` selector.
+In the above code block the complex selector `p, #fakeId` the specificity is taken from `#fakeId` and also the `span`, so this creates a specificity of `1-0-1` for both `p span` and `#fakeId span`. This is the equivalent specificity as the `:is(p, #fakeId) span` selector.
 
 Generally, you want to keep specificity down to a minimum, but if you need to increase an element's specificity for a particular reason, these three pseudo-classes can help.
 
@@ -349,12 +349,12 @@ To remove the perceived need for `!important`, you can do one of the following:
 
 All these methods are covered in preceding sections.
 
-If you're unable to remove `!important` flags from an authors style sheet, the only solution to overriding the important styles is by using `!important`. Creating a [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer) of important declaration overrides is an excellent solution. Two ways of doing this include:
+If you're unable to remove `!important` flags from an author's style sheet, the only solution to overriding the important styles is by using `!important`. Creating a [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer) of important declaration overrides is an excellent solution. Two ways of doing this include:
 
 #### Method 1
 
 1. Create a separate, short style sheet containing only important declarations specifically overriding any important declarations you were unable to remove.
-2. Import this stylesheet as the first import in your CSS using `layer()`, including the `@import` statement, before linking to other stylesheets. This is to ensure that the important overrides is imported as the first layer.
+2. Import this stylesheet as the first import in your CSS using `layer()`, including the `@import` statement, before linking to other stylesheets. This is to ensure that the important overrides are imported as the first layer.
 
 ```css
 @import "importantOverrides.css" layer();

files/en-us/web/css/guides/grid_layout/index.md

@@ -75,7 +75,7 @@ The example shows a three-column track grid with new rows created at a minimum o
 
 {{EmbedLiveSample("Grid_layout_in_action", "100%", "460")}}
 
-This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("gap")}} to create the grid, and {{cssxref("grid-column")}} and {{cssxref("grid-row")}} to position items within in the grid. To view and edit the HTML and CSS used, click the 'Play' at the top right of the example.
+This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("gap")}} to create the grid, and {{cssxref("grid-column")}} and {{cssxref("grid-row")}} to position items within the grid. To view and edit the HTML and CSS used, click the 'Play' at the top right of the example.
 
 ## Reference
 
@@ -135,7 +135,7 @@ This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-colu
   - : Placing grid items using named template areas.
 
 - [Grid layout using named grid lines](/en-US/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines)
-  - : Combining names and track sizes; placing grid items by defining named grid lined and template areas.
+  - : Combining names and track sizes; placing grid items by defining named grid lines and template areas.
 
 - [Auto-placement in grid layout](/en-US/docs/Web/CSS/Guides/Grid_layout/Auto-placement)
   - : How grid positions items that don't have any placement properties declared.

files/en-us/web/css/guides/selectors/using__colon_target/index.md

@@ -12,7 +12,7 @@ When a URL points at a specific piece of a document using a [URL fragment identi
 
 The [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) {{cssxref(":target")}} is used to style the target element of the document identified using the URL fragment identifier. For example, the URL `https://developer.mozilla.org/en-US/docs/Web/CSS#reference` contains the fragment identifier `#reference`. In HTML, identifiers are found as the values of either `id` or `name` attributes, since the two share the same namespace. Thus, the example URL would point to the element that has the id `reference` in that document.
 
-To style any `h2` element that is the target of a URL, while not effecting any other kind of element to get a target style, use the `:target` pseudo-class with the [type selector](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors):
+To style any `h2` element that is the target of a URL, while not affecting any other kind of element to get a target style, use the `:target` pseudo-class with the [type selector](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors):
 
 ```css
 h2:target {

files/en-us/web/css/reference/properties/column-rule-inset-cap-end/index.md

@@ -11,20 +11,20 @@ sidebar: cssref
 
 {{SeeCompatTable}}
 
-The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the bottom of column rule segment [cap endpoints](#understanding_cap_end) at the container's content end edge, and cap endpoints where no rule segments intersect.
+The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the bottom of column rule segment [cap endpoints](#understanding_cap_end) at the container's end edge, and cap endpoints where no rule segments intersect.
 
 {{InteractiveExample("CSS Demo: rule")}}
 
 ```css interactive-example-choice
-column-rule-inset-cap-end: 0;
+column-rule-inset-cap-end: -20px;
 ```
 
 ```css interactive-example-choice
-column-rule-inset-cap-end: 1em;
+column-rule-inset-cap-end: 0;
 ```
 
 ```css interactive-example-choice
-column-rule-inset-cap-end: -20px;
+column-rule-inset-cap-end: 1em;
 ```
 
 ```css interactive-example-choice
@@ -68,6 +68,7 @@ column-rule-inset-cap-end: overlap-join;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   rule: solid thick magenta;
+  column-rule-color: rebeccapurple;
   gap: 1em;
   rule-overlap: column-over-row;
   rule-visibility-items: between;
@@ -140,13 +141,13 @@ Length `column-rule-inset-cap-end` values inset segments by the specified value
 
 The `column-rule-inset-cap-end` property is a constituent property of several [shorthand properties](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties):
 
-- To set the inset of the start and end caps, the `column-rule-inset-cap-end` property, along with the {{cssxref("column-rule-inset-cap-start")}} property, can be set using the {{cssxref("column-rule-inset-cap")}} shorthand.
+- To inset the start and end caps, the `column-rule-inset-cap-end` property, along with the {{cssxref("column-rule-inset-cap-start")}} property, can be set using the {{cssxref("column-rule-inset-cap")}} shorthand.
 
-- To set the ends of all column segments, the `column-rule-inset-cap-end` property, along with the {{cssxref("column-rule-inset-junction-end")}} property, can be set using the {{cssxref("column-rule-inset-end")}} shorthand.
+- To inset the ends of all column segments, the `column-rule-inset-cap-end` property, along with the {{cssxref("column-rule-inset-junction-end")}} property, can be set using the {{cssxref("column-rule-inset-end")}} shorthand.
 
-- To set the same values for row and column cap and junction endpoints, the `column-rule-inset-end` property, along with the {{cssxref("row-rule-inset-end")}} property, can be set using the {{cssxref("rule-inset-end")}} shorthand.
+- To inset all row and column cap and junction endpoints, the `column-rule-inset-end` property, along with the {{cssxref("row-rule-inset-end")}} property, can be set using the {{cssxref("rule-inset-end")}} shorthand.
 
-All of these shorthand properties, along with their `-start`, `-junction`, and `row-` equivalents, can be set using the {{cssxref("rule-inset")}} shorthand.
+All segment endpoints, including this property's `-start`, `-junction`, and `row-` equivalents, can be set using the {{cssxref("rule-inset")}} shorthand.
 
 ### Understanding cap end
 
@@ -246,6 +247,18 @@ li {
   width: 100%;
   box-sizing: border-box;
 }
+
+@layer no-support {
+  @supports not (column-rule-inset-cap-end: 16px) {
+    body::before {
+      content: "Your browser doesn't support the column-rule-inset-cap-end property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
 ```
 
 ```css hidden live-sample___percents
@@ -295,15 +308,17 @@ visibility.addEventListener("change", () => {
 
 {{EmbedLiveSample("caps", "", "300")}}
 
-Setting `16px` insets the end of all the column rules by 16px. If `0px` is set, the end of the column rules will align with the end of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the end edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content.
+Change the inset. If `0px` is set, the end of the column rules will align with the end of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the end edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content.
 
-Select `around` as the `rule-visibility-items` value. This value paints rules in a gap segment if at least one of the two adjacent areas is occupied by an item. The double line-style column rules, which appear when the `rule-visibility-items` is set to `around` (and `between`) do not end in a cap endpoint. The last two column rules end at interior gaps where row rule segments are present, so these column segments are not cap segment endpoints, and are therefore not affected by the `column-rule-inset-cap-end` property.
+Select `around` as the `rule-visibility-items` value. This value paints rules in a gap segment if at least one of the two adjacent areas is occupied by an item. The double line-style column rules, which appear when the `rule-visibility-items` property is set to `around` do not end in a cap endpoint. The last two column rules end at interior gaps where row rule segments are present, so these column segments are not cap segment endpoints. Therefore, the `column-rule-inset-cap-end` property does not affect those segment endpoints.
 
 Select `between` as the `rule-visibility-items` value, which paints rules in gap segments only if both adjacent areas are occupied by an item. The last row rule in the second row gutter ends at the third column gap. The third column rule ends at an interior gap where a row rule segment is present, so this column segment is not a cap segment endpoint and is not affected by the `column-rule-inset-cap-end` property. The last two column rules, however, end at interior gaps where no other rule segments are present, so these column segments are cap segment endpoints and therefore are affected by the `column-rule-inset-cap-end` property.
 
 ### Understanding percentage values
 
-What length a percentage value is relative to depends on the endpoint's location. Interior endpoint percentage values are relative to the gap width at the cap endpoint, so relative to the {{cssxref("row-gap")}} if abutting a rule gap. In this demonstration, these endpoints are denoted by the inset, dark and light, line style. If the cap segment endpoint is at the container's edge, the percentage is relative to `0`, so it always computes to `0` (which is why only the `between` value has an effect).
+The length a percentage value is relative to depends on the endpoint location. Interior endpoint percentage values are relative to the width of the gap at the cap endpoint, so relative to the {{cssxref("row-gap")}} if abutting a rule gap, and `0` at the bottom edge of the container.
+
+In this demonstration, these endpoints are denoted by the inset, dark and light, line style. If the cap segment endpoint is at the container's edge, the percentage is relative to `0`, so it always computes to `0` (which is why only the `between` value has an effect).
 
 {{EmbedLiveSample("percents", "", "300")}}
 
@@ -429,6 +444,17 @@ output {
 p {
   margin-top: 2.5em;
 }
+@layer no-support {
+  @supports not (column-rule-inset-cap-end: 16px) {
+    body::before {
+      content: "Your browser doesn't support the column-rule-inset-cap-end property";
+      background-color: wheat;
+      display: block;
+      text-align: center;
+      padding: 1rem 0;
+    }
+  }
+}
 ```
 
 ```js hidden live-sample___basic