Merge branch 'main' into patch-1

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

@@ -10,7 +10,7 @@ page-type: glossary-definition
 
 Typically, a compiler transforms code written in a higher-level language such as [C++](https://en.wikipedia.org/wiki/C++), [Rust](<https://en.wikipedia.org/wiki/Rust_(programming_language)>), or [Java](<https://en.wikipedia.org/wiki/Java_(programming_language)>) into executable (runnable) code — so-called **binary code** or **machine code**. [WebAssembly](/en-US/docs/WebAssembly), for example, is a form of executable binary code that [can be compiled from code written in C++, Rust, C#, Go, Swift, and several other languages](https://webassembly.org/getting-started/developers-guide/) and run on any web page, with most features supported in modern browsers (see [browser compatibility table](/en-US/docs/WebAssembly#browser_compatibility)).
 
-Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation.
+Most compilers perform either ahead-of-time (AOT) compilation or {{glossary("Just In Time Compilation", "just-in-time (JIT)")}} compilation.
 
 The GNU `gcc` compiler is one well-known example of an AOT compiler. AOT compilers are typically invoked from the command line in a shell environment (from within a terminal or console) or within an {{Glossary("IDE")}}.
 
@@ -22,3 +22,5 @@ Compilers may also translate among higher-level languages — for example, from
 
 - [Compiler](https://en.wikipedia.org/wiki/Compiler) on Wikipedia
 - [WebAssembly](/en-US/docs/WebAssembly)
+- Related glossary terms:
+  - {{glossary("Just In Time Compilation", "Just-In-Time (JIT)")}}

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

@@ -0,0 +1,19 @@
+---
+title: Just-In-Time Compilation (JIT)
+slug: Glossary/Just_In_Time_Compilation
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+**JIT** (_Just-In-Time Compilation_) is a {{glossary("compile", "compilation")}} process in which code is translated from an intermediate representation or a higher-level language (e.g., {{glossary("JavaScript")}} or Java bytecode) into machine code _at runtime_, rather than prior to execution. This approach combines the benefits of both interpretation and ahead-of-time (AOT) compilation.
+
+JIT compilers typically continuously analyze the code as it is executed, identifying parts of the code that are executed frequently (hot spots). If the speedup gains outweigh the compilation overhead, then the JIT compilers will compile those parts into machine code. The compiled code is then executed directly by the processor, which can result in significant performance improvements.
+
+JIT is commonly used in modern {{glossary("browser", "web browsers")}} to optimize the performance of JavaScript code.
+
+## See also
+
+- [Just-In-Time Compilation](https://en.wikipedia.org/wiki/Just-in-time_compilation) on Wikipedia
+- Related glossary terms:
+  - {{glossary("compile")}}

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size
 ```html live-sample___type-rwd
 <div class="wrapper">
   <div class="col1">
+    <h1>Watch my size!</h1>
     <p>
       This layout is responsive. See what happens if you make the browser window
       wider or narrow.

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

@@ -32,7 +32,7 @@ In particular, if you've never done any coding before, we'd recommend the [Your
   - : Access to web content such as public services, education, e-commerce sites, and entertainment is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible.
 - [Design for developers](/en-US/docs/Learn_web_development/Core/Design_for_developers)
   - : The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.
-- [Version_control](/en-US/docs/Learn_web_development/Core/Version_control)
+- [Version control](/en-US/docs/Learn_web_development/Core/Version_control)
   - : Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub.
 
 ## See also

files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md

@@ -51,13 +51,12 @@ body {
 <details>
 <summary>Click here to show the solution</summary>
 
-You will need to increase the height and width of the second block, to add the size of the padding and border:
+You will need to increase the width of the second block, to add the size of the padding and border:
 
 ```css
 .alternate {
   box-sizing: border-box;
   width: 390px;
-  height: 240px;
 }
 ```
 

files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md

@@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I
 
 ## Task 2
 
-In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple.
+In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration!
+
+This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers).
 
 Your final result should look like the image below:
 

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w
 
 ### Cascade
 
-Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.
+Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here.
 
 In the below example, we have two rules that could apply to the `<h1>` element. The `<h1>` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins.
 
@@ -479,18 +479,16 @@ Let's walk through this to see what's happening — try removing some of the pro
 4. The 2nd element _does_ get the red background color, but no border. Why? Because of the `!important` flag in the second rule. Adding the `!important` flag after `border: none` means that this declaration will win over the `border` value in the previous rule, even though the ID selector has higher specificity.
 
 > [!NOTE]
-> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity, or to include an important declaration in a prior cascade layer (we haven't covered cascade layers yet).
+> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity.
 
 One situation in which you may have to use the `!important` flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it.
 
 ## The effect of CSS location
 
-Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in.
+Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet it is specified in.
 
 It is possible for users to set custom stylesheets to override the developer's styles. For example, a visually impaired user might want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.
 
-It is also possible to declare developer styles in cascade layers: you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. For example, as a developer you may not be able to edit a third-party stylesheet, but you can import the external stylesheet into a cascade layer so that all of your styles easily override the imported styles without worrying about third-party selector specificity.
-
 ### Order of overriding declarations
 
 Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

files/en-us/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md

@@ -38,7 +38,7 @@ let settingIcon = browser.browserAction.setIcon(
         Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.browserAction.setIcon({
           imageData: {
             16: image16,
             32: image32,
@@ -55,7 +55,7 @@ let settingIcon = browser.browserAction.setIcon(
         Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.browserAction.setIcon({
           path: {
             16: "path/to/image16.jpg",
             32: "path/to/image32.jpg",

files/en-us/mozilla/add-ons/webextensions/api/omnibox/ondeletesuggestion/index.md

@@ -8,7 +8,7 @@ browser-compat: webextensions.api.omnibox.onDeleteSuggestion
 {{AddonSidebar}}
 
 Fired whenever the user deletes a suggestion.
-A suggestion can be deleted when {{WebExtAPIRef("omnibox.SuggestResult","SuggestResult")}}`.deletable` is set to true.
+A suggestion can be deleted when the property `deletable` of a {{WebExtAPIRef("omnibox.SuggestResult","SuggestResult")}} is set to true.
 
 ## Syntax
 
@@ -54,5 +54,3 @@ browser.omnibox.onDeleteSuggestion.addListener(logDeletedSuggestion);
 
 > [!NOTE]
 > This API is based on Chromium's [`chrome.omnibox`](https://developer.chrome.com/docs/extensions/reference/api/omnibox) API.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

files/en-us/mozilla/add-ons/webextensions/api/pageaction/seticon/index.md

@@ -36,7 +36,7 @@ let settingIcon = browser.pageAction.setIcon(
         Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.pageAction.setIcon({
           imageData: {
             16: image16,
             32: image32,
@@ -53,7 +53,7 @@ let settingIcon = browser.pageAction.setIcon(
         Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.pageAction.setIcon({
           path: {
             16: "path/to/image16.jpg",
             32: "path/to/image32.jpg",

files/en-us/mozilla/add-ons/webextensions/api/runtime/getbrowserinfo/index.md

@@ -52,6 +52,3 @@ gettingInfo.then(gotBrowserInfo);
 ## Browser compatibility
 
 {{Compat}}
-
-> [!NOTE]
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

files/en-us/mozilla/add-ons/webextensions/api/runtime/getframeid/index.md

@@ -57,6 +57,3 @@ visit(window);
 ## Browser compatibility
 
 {{Compat}}
-
-> [!NOTE]
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md

@@ -48,7 +48,7 @@ let settingIcon = browser.sidebarAction.setIcon(
         Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.sidebarAction.setIcon({
           imageData: {
             16: image16,
             32: image32,
@@ -65,7 +65,7 @@ let settingIcon = browser.sidebarAction.setIcon(
         Use a dictionary object to specify multiple icon files in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `path` is a dictionary, the value of each property is a relative path, and its name is its size, like this:
 
         ```js
-        let settingIcon = browser.action.setIcon({
+        let settingIcon = browser.sidebarAction.setIcon({
           path: {
             16: "path/to/image16.jpg",
             32: "path/to/image32.jpg",

files/en-us/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.md

@@ -8,9 +8,6 @@ page-type: guide
 
 {{WebExtAllCompatTables}}
 
-> [!NOTE]
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
-
 ## See also
 
 - [Browser compatibility for manifest.json](/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json)

files/en-us/web/accessibility/aria/attributes/aria-expanded/index.md

@@ -21,16 +21,16 @@ Use the `aria-owns` property on the elements that own expandable grouping contai
 
 ### Buttons
 
-A button that opens a widget should have `aria-controls` set to the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the expandable widget and `aria-expanded` set to the current state of the widget.
+A button that toggles a widget should have `aria-controls` set to the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the toggled widget and `aria-expanded` set to the current state of the widget.
 
 ```html
-<button aria-expanded="false" aria-controls="widget1">Show widget</button>
+<button aria-expanded="false" aria-controls="widget1">Toggle widget</button>
 ```
 
 When the widget is visible, the controlling object relays that information via having `aria-expanded="true"` set on it. The accessible name of the controlling object should reflect this change.
 
 ```html
-<button aria-expanded="true" aria-controls="widget1">Hide widget</button>
+<button aria-expanded="true" aria-controls="widget1">Toggle widget</button>
 ```
 
 ### Menu

files/en-us/web/api/svglineargradientelement/x1/index.md

@@ -0,0 +1,62 @@
+---
+title: "SVGLinearGradientElement: x1 property"
+short-title: x1
+slug: Web/API/SVGLinearGradientElement/x1
+page-type: web-api-instance-property
+browser-compat: api.SVGLinearGradientElement.x1
+---
+
+{{APIRef("SVG")}}
+
+The **`x1`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the x-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("x1")}} attribute on the {{SVGElement("linearGradient")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the gradient's starting point in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient1" x1="50%" y1="0%" x2="50%" y2="100%">
+      <stop offset="0%" stop-color="blue" />
+      <stop offset="100%" stop-color="white" />
+    </linearGradient>
+    <linearGradient id="gradient2" x1="25%" y1="0%" x2="75%" y2="100%">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="yellow" />
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="url(#gradient1)" />
+  <rect x="0" y="100" width="200" height="100" fill="url(#gradient2)" />
+</svg>
+```
+
+We can access the computed values of the `x1` attributes:
+
+```js
+const linearGradients = document.querySelectorAll("linearGradient");
+const x1Gradient1 = linearGradients[0].x1;
+const x1Gradient2 = linearGradients[1].x1;
+
+console.dir(x1Gradient1.baseVal.value); // output: 100 (50% of 200)
+console.dir(x1Gradient2.baseVal.value); // output: 50 (25% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGLinearGradientElement.x2")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svglineargradientelement/x2/index.md

@@ -0,0 +1,62 @@
+---
+title: "SVGLinearGradientElement: x2 property"
+short-title: x2
+slug: Web/API/SVGLinearGradientElement/x2
+page-type: web-api-instance-property
+browser-compat: api.SVGLinearGradientElement.x2
+---
+
+{{APIRef("SVG")}}
+
+The **`x2`** read-only property of the {{domxref("SVGLinearGradientElement")}} interface describes the x-axis coordinate of the start point of the gradient as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("x2")}} attribute on the {{SVGElement("linearGradient")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the gradient's end point in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient1" x1="50%" y1="0%" x2="50%" y2="100%">
+      <stop offset="0%" stop-color="blue" />
+      <stop offset="100%" stop-color="white" />
+    </linearGradient>
+    <linearGradient id="gradient2" x1="25%" y1="0%" x2="75%" y2="100%">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="yellow" />
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="url(#gradient1)" />
+  <rect x="0" y="100" width="200" height="100" fill="url(#gradient2)" />
+</svg>
+```
+
+We can access the computed values of the `x2` attributes:
+
+```js
+const linearGradients = document.querySelectorAll("linearGradient");
+const x2Gradient1 = linearGradients[0].x2;
+const x2Gradient2 = linearGradients[1].x2;
+
+console.dir(x2Gradient1.baseVal.value); // output: 100 (50% of 200)
+console.dir(x2Gradient2.baseVal.value); // output: 150 (75% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGLinearGradientElement.x1")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}