[pull] main from mdn:main

.vscode/dictionaries/code-entities.txt

@@ -716,6 +716,7 @@ strncpy
 SUBDOCUMENT
 sund
 sunu
+superellipse
 superspeed
 SVGMPathElement
 svgref

.vscode/dictionaries/proper-names.txt

@@ -58,6 +58,7 @@ Blackman
 Blackmoon
 Blankers
 Bloggs
+Bobtown
 Bodmin
 Boonie
 bottosson
@@ -205,6 +206,7 @@ Frida
 Galinski
 Gandi
 Gayatri
+Gaye
 Gebrselassie
 geckodriver
 Gedit
@@ -334,6 +336,7 @@ Lighttpd
 Lindenberg
 Lindesay
 Liskov
+Lorc
 Loycom
 Luxon
 Léonie
@@ -398,6 +401,7 @@ Musicr
 Mustafa
 myshov
 Müller
+Nabors
 Naeher
 Nakamura
 Nakano

.vscode/dictionaries/terms-abbreviations.txt

@@ -582,6 +582,7 @@ resends
 resizability
 respecified
 restartless
+Resveratrol
 retarget
 retargeted
 retargetings

files/en-us/_redirects.txt

@@ -5469,7 +5469,7 @@
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web	/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML	/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images
-/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page	/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page
+/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page	/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies	/en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images	/en-US/docs/Web/HTML/Guides/Responsive_images
 /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content	/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio
@@ -5786,6 +5786,7 @@
 /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images/Test_your_skills:_HTML_images	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images
 /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_text_fundamentals	/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs
 /en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio/Test_your_skills:_Multimedia_and_embedding	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video
+/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page	/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
 /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Multimedia_and_embedding	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video
 /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Advanced_HTML_text	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text
 /en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics	/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics

files/en-us/_wikihistory.json

@@ -7407,24 +7407,24 @@
       "mishkadoma"
     ]
   },
-  "Learn_web_development/Core/Structuring_content/Mozilla_splash_page": {
-    "modified": "2020-07-16T22:25:05.240Z",
+  "Learn_web_development/Core/Structuring_content/Planet_data_table": {
+    "modified": "2020-07-16T22:25:28.525Z",
     "contributors": [
       "chrisdavidmills",
-      "FoxDie12x",
-      "MNizam0802",
+      "tayyabalishan",
       "jswisher",
-      "goto.prototype",
-      "richardzacur"
+      "Sebastianz"
     ]
   },
-  "Learn_web_development/Core/Structuring_content/Planet_data_table": {
-    "modified": "2020-07-16T22:25:28.525Z",
+  "Learn_web_development/Core/Structuring_content/Splash_page": {
+    "modified": "2020-07-16T22:25:05.240Z",
     "contributors": [
       "chrisdavidmills",
-      "tayyabalishan",
+      "FoxDie12x",
+      "MNizam0802",
       "jswisher",
-      "Sebastianz"
+      "goto.prototype",
+      "richardzacur"
     ]
   },
   "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content": {

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

@@ -0,0 +1,23 @@
+---
+title: Extrinsic size
+slug: Glossary/Extrinsic_size
+page-type: glossary-definition
+sidebar: glossarysidebar
+---
+
+In CSS, the **extrinsic size** of an element is determined by its layout context, that is, by constraints imposed from outside the element, without regard for its contents. This is the opposite of an element's {{glossary("intrinsic size")}}, which is based on its content.
+
+Extrinsic sizing occurs when you explicitly set or constrain the size of an element using [CSS box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("max-width")}}, and {{cssxref("min-height")}}.
+For example, when you set `width: 200px`, you're specifying an extrinsic size.
+
+Percentage values are also extrinsic; they're calculated relative to the element's [containing block](/en-US/docs/Web/CSS/Containing_block).
+For example, `width: 50%` means the width of the element will be `50%` of the width of its containing block, regardless of the content inside the element.
+
+Block-level elements are sized extrinsically. When a width isn't specified, the block element's default width is `auto`, which resolves to `100%` width of its containing block.
+
+## See also
+
+- Related glossary terms:
+  - {{glossary("Intrinsic size")}}
+- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
+- [CSS Box Sizing Module Level 3](https://drafts.csswg.org/css-sizing-3/#extrinsic) specification

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

@@ -5,19 +5,19 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes.
+In CSS, the **intrinsic size** of an element is the size it would have based purely on its content, without taking into account the effects of the layout context it appears in. This is the opposite of an element's {{glossary("extrinsic size")}}, which is determined by external constraints such as container size. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes.
 
-Inline elements are sized intrinsically: [sizing](/en-US/docs/Web/CSS/CSS_box_sizing) and [box](/en-US/docs/Web/CSS/CSS_box_model) properties including {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, and {{cssxref("padding-block")}} and {{cssxref("margin-block")}} have no impact on them ( though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do).
+Inline elements are sized intrinsically. CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("padding-block")}}, and {{cssxref("margin-block")}} have no impact on their layout (though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do affect spacing within a line).
 
-For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the minimum size it would have if it was floated (with no other CSS box properties applied), inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `<span>` would have if its container's inline size were infinite.
+For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the smallest size it would have if it were floated (with no other CSS box properties applied) in a container with `inline-size: 0`. The maximum intrinsic size is the opposite; it's the size the same `<span>` would have when placed in a container with an infinite `inline-size`.
 
 Intrinsic size has the same meaning for images as for text — the size at which the images are displayed if no CSS is applied to change the rendering.
 
-Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that, if both mechanisms are used, the `srcset` value is applied "over" the EXIF value.
+Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value.
 
-Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing).
+Intrinsic sizes and how they are calculated are defined in the [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module.
 
-#### minimum intrinsic size
+## Minimum intrinsic size
 
 To set an element according to its minimum intrinsic size, set the {{cssxref("inline-size")}} (or {{cssxref("width")}} in horizontal writing modes, like English and Hebrew) to {{cssxref("min-content")}}. This sets the element to the size it would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the minimum intrinsic size would be defined by the longest word.
 
@@ -32,11 +32,11 @@ p {
 }
 ```
 
-{{ EmbedLiveSample('minimum intrinsic size', '100%', '220') }}
+{{EmbedLiveSample('minimum intrinsic size', '100%', '220')}}
 
-#### maximum intrinsic size
+## Maximum intrinsic size
 
-The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflowed its container. The keyword value {{cssxref("max-content")}} sets this behavior.
+The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflows its container. The keyword value {{cssxref("max-content")}} sets this behavior.
 
 ```html hidden
 <p>Element grows as text doesn't wrap.</p>
@@ -54,15 +54,13 @@ p {
 }
 ```
 
-{{ EmbedLiveSample('maximum intrinsic size', '100%', '200') }}
-
-## Extrinsic sizing
-
-The opposite of _intrinsic size_ is **_extrinsic size_**, which is based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model property values. With extrinsic sizing, percentages specify the size of a box with respect to the box's containing block.
+{{EmbedLiveSample('maximum intrinsic size', '100%', '200')}}
 
 ## See also
 
-- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values.
+- Related glossary terms:
+  - {{glossary("Extrinsic size")}}
+- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} sizing keywords
 - {{cssxref("interpolate-size")}}
 - {{cssxref("aspect-ratio")}}
 - {{cssxref("calc-size()")}}

files/en-us/learn_web_development/core/structuring_content/html_table_basics/index.md

@@ -6,7 +6,7 @@ page-type: learn-module-chapter
 sidebar: learnsidebar
 ---
 
-{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}
 
 This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
 
@@ -529,4 +529,4 @@ You can also find this code on GitHub at [animals-table-fixed.html](https://gith
 
 That wraps up the basics of HTML tables. In the next article, we'll look at some further features that can be used to make HTML tables more accessible to visually impaired people.
 
-{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}

files/en-us/learn_web_development/core/structuring_content/index.md

@@ -47,8 +47,8 @@ Before starting this module, you don't need any previous HTML knowledge, but you
   - : In the beginning, the web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. In this article we'll look at how to use the {{htmlelement("img")}} element in depth, including the basics, annotating it with captions using {{htmlelement("figure")}}, and detailing how it relates to {{glossary("CSS")}} background images.
 - [HTML video and audio](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
   - : Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements; we'll then finish off by looking at how to add captions/subtitles to your videos.
-- [Mozilla splash page](/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page) <sup>Challenge</sup>
-  - : In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a funky splash page all about Mozilla!
+- [Creepy-crawly splash page](/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page) <sup>Challenge</sup>
+  - : In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a splash page all about bugs and other creepy crawlies.
 - [HTML table basics](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics)
   - : This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
 - [HTML table accessibility](/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility)

files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md

@@ -63,7 +63,7 @@ priority:
 
 Turning H2O into wine, and the health benefits of Resveratrol
 (C14H12O3.)
-Measuring the effect on performance of funk bassplayers at temperatures
+Measuring the effect on performance of funk bass players at temperatures
 exceeding 30°C (86°F), when the audience size exponentially increases
 (effect of 3 × 103 increasing to 3 × 104.)
 HTML, Hypertext Markup Language, and CSS,
@@ -77,7 +77,7 @@ Exotic dance moves
 
 Yes, you are right! As part of my post-doctorate work, I
 did study exotic tribal dances. To answer your question, my
-favourite dances are as follows, with definitions:
+favorite dances are as follows, with definitions:
 
 Polynesian chicken dance
     A little known but very influential dance dating back as far as
@@ -268,7 +268,7 @@ Your finished HTML should look like this:
         (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)
       </li>
       <li>
-        Measuring the effect on performance of funk bassplayers at temperatures
+        Measuring the effect on performance of funk bass players at temperatures
         exceeding 30°C (86°F), when the audience size exponentially increases
         (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)
       </li>
@@ -289,7 +289,7 @@ Your finished HTML should look like this:
     <p>
       Yes, you are right! As part of my post-doctorate work, I
       <em>did</em> study exotic tribal dances. To answer your question, my
-      favourite dances are as follows, with definitions:
+      favorite dances are as follows, with definitions:
     </p>
 
     <dl>
@@ -311,7 +311,7 @@ Your finished HTML should look like this:
       <dt>Arctic robot dance</dt>
       <dd>
         An interesting example of historic misinformation, English explorers in
-        the 1960s believed to have discovered a new dance style characterised by
+        the 1960s believed to have discovered a new dance style characterized by
         "robotic", stilted movements, being practiced by inhabitants of Northern
         Alaska and Canada. Later on however it was discovered that they were
         just moving like this because they were really cold.