Merge branch 'main' into page-template-css-function

.vscode/project-words.txt

@@ -23,6 +23,7 @@ hulki
 i'gyu
 Kazotetsu
 Letorey
+mathml
 mdnplay
 menclose
 mfenced

files/en-us/_redirects.txt

@@ -9464,6 +9464,7 @@
 /en-US/docs/Web/API/RTCOfferAnswerOptions/voiceActivityDetection	/en-US/docs/Web/API/RTCPeerConnection/createAnswer
 /en-US/docs/Web/API/RTCOfferOptions	/en-US/docs/Web/API/RTCPeerConnection/createOffer
 /en-US/docs/Web/API/RTCOfferOptions/iceRestart	/en-US/docs/Web/API/RTCPeerConnection/createOffer
+/en-US/docs/Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp	/en-US/docs/Web/API/RTCOutboundRtpStreamStats
 /en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived	/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent
 /en-US/docs/Web/API/RTCPeerConnection.addStream	/en-US/docs/Web/API/RTCPeerConnection/addStream
 /en-US/docs/Web/API/RTCPeerConnection.close	/en-US/docs/Web/API/RTCPeerConnection/close

files/en-us/_wikihistory.json

@@ -54608,10 +54608,6 @@
     "modified": "2020-10-15T22:17:15.823Z",
     "contributors": ["Sheppy"]
   },
-  "Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp": {
-    "modified": "2020-10-15T22:17:16.317Z",
-    "contributors": ["Sheppy"]
-  },
   "Web/API/RTCOutboundRtpStreamStats/nackCount": {
     "modified": "2020-10-15T22:17:14.809Z",
     "contributors": ["Sheppy"]

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

@@ -6,9 +6,9 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-**Code splitting** is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.
-
-As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. To prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. Then features required at page load can be downloaded immediately with additional scripts being [lazy loaded](/en-US/docs/Glossary/Lazy_load) after the page or application is interactive, thus improving performance. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced.
+**Code splitting** is the practice of splitting the code a web application depends on — including its own code and any third-party dependencies — into separate bundles that can be loaded independently of each other.
+This allows an application to load only the code it actually needs at a given point in time, and load other bundles on demand.
+This approach is used to improve application performance, especially on initial load.
 
 Code splitting is a feature supported by bundlers like [Webpack](https://webpack.js.org/) and [Browserify](https://browserify.org/) which can create multiple bundles that can be dynamically loaded at runtime.
 

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

@@ -10,11 +10,11 @@ _Red-Green-Blue_ (**RGB**) is a color model that represents colors as mixtures o
 
 Alone an RGB value has no meaning. A color model defines how the three components relate to a color space. Graphically, a point in a three-dimensional grid or cube represents a color. Each dimension (or axis) corresponds to a different channel. The RGB color model is then a _cubic_, or _Cartesian_, coordinate system of the underlying color space.
 
-For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255. Float values are supported.
+For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255.
 
 Note that there are other RGB color spaces, like the _Adobe RGB_ color space, that can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ are different.
 
-There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate floats between 0 and 255 (for example, `rgb(46 139.5 87)`). In {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, and {{Glossary("GLSL")}} the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.
+There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function.
 
 RGB is not the only color model that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web.
 

files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md

@@ -181,7 +181,7 @@ The amount of specificity a selector has is measured using three different value
 
 > **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity.
 
-The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), and the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes themselves don't have effect on specificity, but their parameters do. The specificity that each contributes to the specificity algorithm is the specificity of the selector in the parameter that has the greatest weight.
+The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes, and [CSS nesting](/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity) themselves don't add to specificity, but their parameters or nested rules do. The specificity weight that each contributes to the specificity algorithm is the specificity weight of the selector in the parameter or nested rule with the greatest weight.
 
 The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators).
 

files/en-us/learn/css/building_blocks/selectors/combinators/index.md

@@ -76,6 +76,8 @@ A common use case is to do something with a paragraph that follows a heading, as
 
 If you insert some other element such as a `<h2>` in between the `<h1>` and the `<p>`, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent.
 
+<!-- This example lives https://github.com/mdn/css-examples/blob/main/learn/selectors/adjacent.html -->
+
 {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}
 
 ## General sibling combinator
@@ -88,8 +90,40 @@ p ~ img
 
 In the example below we are selecting all `<p>` elements that come after the `<h1>`, and even though there is a `<div>` in the document as well, the `<p>` that comes after it is selected.
 
+<!-- This example lives https://github.com/mdn/css-examples/blob/main/learn/selectors/general.html -->
+
 {{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}
 
+## Creating complex selectors with nesting
+
+The [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#combinators) allows you to write nested rules that use combinators to create [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector).
+
+```css
+p {
+  ~ img {
+  }
+}
+/* This is parsed by the browser as */
+p ~ img {
+}
+```
+
+The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) can also be use to create complex selectors.
+
+```css
+p {
+  & img {
+  }
+}
+/* This is parsed by the browser as */
+p img {
+}
+```
+
+<!-- This example lives https://github.com/mdn/css-examples/blob/main/learn/selectors/nesting.html -->
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}}
+
 ## Using combinators
 
 You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a `<ul>`, try the following:

files/en-us/learn/css/css_layout/practical_positioning_examples/index.md

@@ -44,7 +44,7 @@ To start with, we'd like you to make a local copy of the starting HTML file —
 ```html
 <section class="info-box">
   <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#" class="active-tab">Tab 1</a></li>
     <li><a href="#">Tab 2</a></li>
     <li><a href="#">Tab 3</a></li>
   </ul>
@@ -160,7 +160,7 @@ Add the following CSS:
 }
 ```
 
-Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
+Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active-tab` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
 
 ```css
 .info-box li a:focus,
@@ -169,7 +169,7 @@ Finally for this section we'll set some styles on the link states. First, we'll
   color: white;
 }
 
-.info-box li a.active {
+.info-box li a.active-tab {
   background-color: #a60000;
   color: white;
 }
@@ -227,7 +227,7 @@ function setTabHandler(tab, tabPos) {
       tab.className = "";
     }
 
-    tab.className = "active";
+    tab.className = "active-tab";
 
     for (const panel of panels) {
       panel.className = "";
@@ -245,7 +245,7 @@ This code does the following:
 - In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs:
 
   - A `for` loop is used to cycle through all the tabs and remove any classes that are present on them.
-  - A `class` of `active` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
+  - A `class` of `active-tab` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
   - A `for` loop is used to cycle through all the panels and remove any classes that are present on them.
   - A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.
 

files/en-us/learn/forms/basic_native_form_controls/index.md

@@ -66,9 +66,11 @@ Here is a basic single line text field example:
 
 Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server.
 
-_The following screenshot shows default, focused and disabled text input types in Firefox 71 and Safari on macOS and in Chrome 79 and Edge 18 on Windows 10._
+The screenshot below shows a text input in default, focused, and disabled states. Most browsers indicate the focused state using a focus ring around the control and the disabled state using grey text or a faded/semi-opaque control.
 
-![Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.](disabled.png)
+![Screenshot of the default, focused and disabled states text input in Chrome on macOS](disabled.png)
+
+The screenshots used in this document were taken in the Chrome browser on macOS. There may be minor variations in these fields/buttons across different browsers, but the basic highlighting technique remains similar.
 
 > **Note:** We discuss values for the [`type`](/en-US/docs/Web/HTML/Element/input#type) attribute that enforce specific validation constraints including color, email, and url input types, in the next article, [The HTML5 input types](/en-US/docs/Learn/Forms/HTML5_input_types).
 
@@ -80,6 +82,10 @@ One of the original input types was the `password` text field type:
 <input type="password" id="pwd" name="pwd" />
 ```
 
+The following screenshot shows Password input field in which each input character is shown as a dot.
+
+![Password field in chrome 115 on macOS](password.png)
+
 The `password` value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be easily read by others.
 
 Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. located at an `https://` address), so the data is encrypted before it is sent.
@@ -143,9 +149,9 @@ Related checkbox items should use the same [`name`](/en-US/docs/Web/HTML/Element
 </fieldset>
 ```
 
-The following screenshots show default, focused and disabled checkboxes in Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10:
+The following screenshot shows checkboxes in the default, focused, and disabled states. Checkboxes in the default and disabled states appear checked, whereas in the focused state, the checkbox is unchecked, with focus ring around it.
 
-![Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](checkboxes.png)
+![Default, focused and disabled Checkboxes in chrome 115 on macOS](checkboxes.png)
 
 > **Note:** Any checkboxes and radio buttons with the [`checked`](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute on load match the {{cssxref(':default')}} pseudo-class, even if they are no longer checked. Any that are currently checked match the {{cssxref(':checked')}} pseudo-class.
 
@@ -181,9 +187,9 @@ Several radio buttons can be tied together. If they share the same value for the
 </fieldset>
 ```
 
-The following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10.
+The following screenshot shows default and disabled radio buttons in the checked state, along with focused a radio button in the unchecked state.
 
-![Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](radios.png)
+![Default, focused and disabled Radio buttons in chrome 115 on macOS](radios.png)
 
 ## Actual buttons
 
@@ -270,9 +276,9 @@ Below you can find examples of each button `<input>` type, along with the equiva
 
 Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. As you can see from the examples, however, {{HTMLElement("button")}} elements let you use HTML in their content, which is inserted between the opening and closing `<button>` tags. {{HTMLElement("input")}} elements on the other hand are {{glossary("void element", "void elements")}}; their displayed content is inserted inside the `value` attribute, and therefore only accepts plain text as content.
 
-The following examples show default, focused, and disabled button input types — in Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10.
+The following screenshot shows a button in the default, focused, and disabled states. In the focused state, there is a focus ring around the button, and in the disabled state, the button is greyed out.
 
-![Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](buttons.png)
+![Default, focus, and disabled button states in chrome 115 on macOS](buttons.png)
 
 ### Image button
 
@@ -319,6 +325,10 @@ On some mobile devices, the file picker can access photos, videos, and audio cap
 <input type="file" accept="audio/*;capture=microphone" />
 ```
 
+The following screenshot shows the file picker widget in the default, focus, and disabled states when no file is selected.
+
+![File picker widget in default, focus, and disabled states in chrome 115 on macOS](filepickers.png)
+
 ## Common attributes
 
 Many of the elements used to define form controls have some of their own specific attributes. However, there is a set of attributes common to all form elements. You've met some of these already, but below is a list of those common attributes, for your reference:

files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md

@@ -305,6 +305,6 @@ Try carrying out the above exercise for a website of your own creation. What wou
 
 ## Summary
 
-At this point, you should have a better idea about how to structure a web page/site. In the last article of this module, we'll learn how to [debug HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML).
+At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll learn how to [debug HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML).
 
 {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

files/en-us/learn/javascript/asynchronous/promises/index.md

@@ -143,7 +143,7 @@ In the last article, we saw that error handling can get very difficult with nest
 
 To support error handling, `Promise` objects provide a {{jsxref("Promise/catch", "catch()")}} method. This is a lot like `then()`: you call it and pass in a handler function. However, while the handler passed to `then()` is called when the asynchronous operation _succeeds_, the handler passed to `catch()` is called when the asynchronous operation _fails_.
 
-If you add `catch()` to the end of a promise chain, then it will be called when any of the asynchronous function calls fails. So you can implement an operation as several consecutive asynchronous function calls, and have a single place to handle all errors.
+If you add `catch()` to the end of a promise chain, then it will be called when any of the asynchronous function calls fail. So you can implement an operation as several consecutive asynchronous function calls, and have a single place to handle all errors.
 
 Try this version of our `fetch()` code. We've added an error handler using `catch()`, and also modified the URL so the request will fail.