Merge branch 'main' into typos

files/en-us/web/css/-moz-image-rect/index.md

@@ -105,7 +105,7 @@ The other corners follow a similar pattern:
 
 ### HTML
 
-The HTML is quite simple:
+We include a container with four boxes:
 
 ```html
 <div id="container" onclick="rotate()">

files/en-us/web/css/@font-face/src/index.md

@@ -95,7 +95,7 @@ If the last `src` descriptor can load a resource and doesn't include a `local()`
 > This may affect design of fallbacks.
 > See [Browser compatibility](#browser_compatibility) for more information.
 
-As with other URLs in CSS, the URL may be relative, in which case it is resolved relative to the location of the style sheet containing the `@font-face` rule. In the case of SVG fonts, the URL points to an element within a document containing SVG font definitions. If the element reference is omitted, a reference to the first defined font is implied. Similarly, font container formats that can contain more than one font load only one of the fonts for a given `@font-face` rule. Fragment identifiers are used to indicate which font to load. If a container format lacks a defined fragment identifier scheme, a simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.
+As with other URLs in CSS, the URL may be relative, in which case it is resolved relative to the location of the style sheet containing the `@font-face` rule. In the case of SVG fonts, the URL points to an element within a document containing SVG font definitions. If the element reference is omitted, a reference to the first defined font is implied. Similarly, font container formats that can contain more than one font load only one of the fonts for a given `@font-face` rule. Fragment identifiers are used to indicate which font to load. If a container format lacks a defined fragment identifier scheme, a 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.
 
 If the font file is a container for multiple fonts, a fragment identifier is included to indicate the sub-font that should be used, as shown below:
 

files/en-us/web/css/@font-face/unicode-range/index.md

@@ -45,7 +45,7 @@ The purpose of this descriptor is to allow the font resources to be segmented so
 
 ### Using a different font for a single character
 
-In this example we create a simple HTML containing a single {{HTMLElement("div")}} element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, _Helvetica_, for the text, and a serif font, _Times New Roman_, for the ampersand.
+In this example, we create a single {{HTMLElement("div")}} element, with a text string that includes an ampersand that we want to style with a different font. To make it obvious, we will use a sans-serif font, _Helvetica_, for the text, and a serif font, _Times New Roman_, for the ampersand.
 
 In the CSS we are in effect defining a completely separate {{cssxref("@font-face")}} that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a {{HTMLElement("span")}} and applying a different font just to that, but that is an extra element and rule set.
 

files/en-us/web/css/@import/index.md

@@ -111,7 +111,7 @@ The `@import` rules above illustrate how you might import a layout that uses a g
 While you can only have one `supports()` statement, you can combine any number of feature checks with `not`, `and`, and `or`. However, you must use parenthesis to define precedence when you mix them, e.g. `supports((..) or (..) and not (..))` is invalid, but `supports((..) or ((..) and (not (..))))` is valid.
 Note that if you just have a single declaration then you don't need to wrap it in additional parentheses: this is shown in the first example above.
 
-The examples above show support conditions using simple declaration syntax.
+The examples above show support conditions using basic declaration syntax.
 You can also specify CSS functions in `supports()`, and it will evaluate to `true` if they are supported and can be evaluated on the user-agent.
 For example, the code below shows an `@import` that is conditional on both [child combinators](/en-US/docs/Web/CSS/Child_combinator) (`selector()`) and the `font-tech()` function:
 

files/en-us/web/css/@layer/index.md

@@ -73,7 +73,7 @@ Multiple layers can be defined at once, as shown below:
 
 This is useful because the initial order in which layers are declared indicates which layer has precedence. As with declarations, the last layer to be listed will win if declarations are found in multiple layers. Therefore, with the preceding example, if a competing rule was found in `theme` and `utilities`, the one in `utilities` would win and be applied.
 
-A rule in `utilities` would be applied _even if it has lower specificity_ than the rule in `theme`. This is because once the layer order has been established, specificity and order of appearance are ignored. This enables the creation of simpler CSS selectors because you do not have to ensure that a selector will have high enough specificity to override competing rules; all you need to ensure is that it appears in a later layer.
+A rule in `utilities` would be applied _even if it has lower specificity_ than the rule in `theme`. This is because once the layer order has been established, specificity and order of appearance are ignored. This enables using simpler CSS selectors because you do not have to ensure that a selector will have high enough specificity to override competing rules; all you need to ensure is that it appears in a later layer.
 
 > [!NOTE]
 > Having declared your layer names, thus setting their order, you can add CSS rules to the layer by re-declaring the name. The styles are then appended to the layer and the layer order will not be changed.
@@ -123,7 +123,7 @@ To append rules to the `layout` layer inside `framework`, join the two names wit
 
 ## Examples
 
-### Simple example
+### Basic example
 
 In the following example, two CSS rules are created. One for the {{htmlelement("p")}} element outside of any layer and one inside a layer named `type` for `.box p`.
 
@@ -157,7 +157,7 @@ p {
 
 #### Result
 
-{{EmbedLiveSample("Simple_example")}}
+{{EmbedLiveSample("Basic_example")}}
 
 ### Assigning rules to existing layers
 

files/en-us/web/css/@starting-style/index.md

@@ -290,7 +290,7 @@ We then set a {{cssxref("transition")}} property to animate between the two stat
 Because the animated element is being promoted to the {{glossary("top layer")}} when shown and removed from the top layer when hidden (with {{cssxref("display", "display: none")}}), some extra steps are required to ensure the animation works in both directions:
 
 - `display` is added to the list of transitioned elements to ensure the animated element is visible (set to `display: block` or another visible `display` value) throughout both the entry and exit animations. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Note that the {{cssxref("transition-behavior", "transition-behavior: allow-discrete")}} value is also set in the shorthand to activate the animation.
-- {{cssxref("overlay")}} is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for simple animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.
+- {{cssxref("overlay")}} is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.
 
 > [!NOTE]
 > We've also included a transition on the {{cssxref("::backdrop")}} that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is used to select the backdrop when the popover is open.

files/en-us/web/css/_colon_-moz-only-whitespace/index.md

@@ -24,7 +24,7 @@ The **`:-moz-only-whitespace`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US
 
 ## Examples
 
-### Simple :-moz-only-whitespace example
+### Basic :-moz-only-whitespace example
 
 #### HTML
 
@@ -46,7 +46,7 @@ div {
 
 #### Result
 
-{{EmbedLiveSample('Simple_-moz-only-whitespace_example', '100%', 50)}}
+{{EmbedLiveSample('Basic_-moz-only-whitespace_example', '100%', 50)}}
 
 ## Specifications
 

files/en-us/web/css/_colon_blank/index.md

@@ -26,7 +26,7 @@ The **`:blank`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/P
 
 ## Examples
 
-### Simple :blank example
+### Basic :blank example
 
 In eventual supporting browsers, the `:blank` pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.
 
@@ -46,7 +46,7 @@ textarea:blank {
 
 #### Result
 
-{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}
+{{EmbedLiveSample('Basic_blank_example', '100%', 150)}}
 
 ## Specifications
 

files/en-us/web/css/_colon_defined/index.md

@@ -16,7 +16,7 @@ The **`:defined`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS
 }
 
 /* Selects any instance of a specific custom element */
-simple-custom:defined {
+custom-element:defined {
   display: block;
 }
 ```

files/en-us/web/css/_colon_host-context/index.md

@@ -56,7 +56,7 @@ p {
 
 The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-In this example we have a simple custom element — `<context-span>` — that you can wrap around text:
+In this example we have a basic custom element — `<context-span>` — that you can wrap around text:
 
 ```html
 <h1>

files/en-us/web/css/_colon_host/index.md

@@ -35,7 +35,7 @@ The **`:host`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps
 
 The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-In this example we have a simple custom element — `<context-span>` — that you can wrap around text:
+In this example we have a basic custom element — `<context-span>` — that you can wrap around text:
 
 ```html
 <h1>

files/en-us/web/css/_colon_host_function/index.md

@@ -38,7 +38,7 @@ The most obvious use of this is to put a class name only on certain custom eleme
 
 The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-In this example we have a simple custom element — `<context-span>` — that you can wrap around text:
+In this example we have a custom element — `<context-span>` — that you can wrap around text:
 
 ```html
 <h1>

files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md

@@ -16,11 +16,46 @@ Display the hierarchy of the site by displaying inline links, with a separator b
 
 ## Recipe
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
-
-> [!CALLOUT]
->
-> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/breadcrumb-navigation--download.html)
+Click "Play" in the code blocks below to edit the example in the MDN Playground:
+
+```html live-sample___breadcrumb-example
+<nav aria-label="Breadcrumb" class="breadcrumb">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Category</a></li>
+    <li><a href="#">Sub Category</a></li>
+    <li><a href="#">Type</a></li>
+    <li><span aria-current="page">Product</span></li>
+  </ul>
+</nav>
+```
+
+```css live-sample___breadcrumb-example
+body {
+  font: 1.2em sans-serif;
+}
+
+.breadcrumb {
+  padding: 0 0.5rem;
+}
+
+.breadcrumb ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: end;
+}
+
+.breadcrumb li:not(:last-child)::after {
+  display: inline-block;
+  margin: 0 0.25rem;
+  content: "→";
+}
+```
+
+{{EmbedLiveSample("breadcrumb-example", "", "100px")}}
 
 > [!NOTE]
 > The example above uses a complex selector to insert content before every `li` except the last one. This could also be achieved using a complex selector targeting all `li` elements except the first:

files/en-us/web/css/layout_cookbook/card/index.md

@@ -20,11 +20,123 @@ The cards in the group should line up in two dimensions — both vertically and
 
 ## Recipe
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
+Click "Play" in the code blocks below to edit the example in the MDN Playground:
+
+```html live-sample___card-example
+<div class="cards">
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        The idea of reaching the North Pole by means of balloons appears to have
+        been entertained many years ago.
+      </p>
+    </div>
+  </article>
+
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>Short content.</p>
+    </div>
+    <footer>I have a footer!</footer>
+  </article>
+
+  <article class="card">
+    <header>
+      <h2>A longer heading in this card</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        In a curious work, published in Paris in 1863 by Delaville Dedreux,
+        there is a suggestion for reaching the North Pole by an aerostat.
+      </p>
+    </div>
+    <footer>I have a footer!</footer>
+  </article>
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        The idea of reaching the North Pole by means of balloons appears to have
+        been entertained many years ago.
+      </p>
+    </div>
+  </article>
+</div>
+```
+
+```css live-sample___card-example
+body {
+  font: 1.2em sans-serif;
+}
+
+img {
+  max-width: 100%;
+}
+
+.cards {
+  max-width: 700px;
+  margin: 1em auto;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  grid-gap: 20px;
+}
+
+.card {
+  border: 1px solid #999;
+  border-radius: 3px;
+
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+
+.card img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.card h2 {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.card .content {
+  padding: 0.5rem;
+}
+
+.card footer {
+  background-color: #333;
+  color: #fff;
+  padding: 0.5rem;
+}
+```
 
-> [!CALLOUT]
->
-> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/card--download.html)
+{{EmbedLiveSample("card-example", "", "950px")}}
 
 ## Choices made