Merge branch 'main' into fix-failing-yarn-start

.vscode/ignore-list.txt

@@ -1123,6 +1123,7 @@ Digi
 Digianswer
 dignissim
 Dijit
+dimoulis
 dinocons
 dinodescr
 Dinos
@@ -1663,6 +1664,7 @@ Freecodecamp
 Freemium
 Freetype
 Freitag
+Frida
 fringilla
 fringille
 fromcharcode
@@ -2368,6 +2370,7 @@ JXON
 Kadir
 Kadlec
 kaios
+Kahlo
 Kakao
 Kaku
 Kaply

files/en-us/_redirects.txt

@@ -11660,6 +11660,7 @@
 /en-US/docs/Web/CSS/linear-gradient()	/en-US/docs/Web/CSS/gradient/linear-gradient
 /en-US/docs/Web/CSS/margin-new	/en-US/docs/Web/CSS/margin
 /en-US/docs/Web/CSS/margin_collapsing	/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing
+/en-US/docs/Web/CSS/masonry-auto-flow	/en-US/docs/Web/CSS/grid-auto-flow
 /en-US/docs/Web/CSS/max()	/en-US/docs/Web/CSS/max
 /en-US/docs/Web/CSS/media	/en-US/docs/Web/CSS/@media
 /en-US/docs/Web/CSS/media/Bitmap	/en-US/docs/Web/CSS/@media

files/en-us/_wikihistory.json

@@ -86802,10 +86802,6 @@
       "Heycam"
     ]
   },
-  "Web/CSS/masonry-auto-flow": {
-    "modified": "2020-11-12T04:50:46.255Z",
-    "contributors": ["rachelandrew", "chrisdavidmills"]
-  },
   "Web/CSS/math-style": {
     "modified": "2020-12-12T22:36:34.292Z",
     "contributors": ["sideshowbarker", "chrisdavidmills", "rachelandrew"]

files/en-us/learn/performance/why_web_performance/index.md

@@ -42,11 +42,11 @@ As an example, consider the loading experience of CNN.com, which at the time of
 
 - Imagine loading this on a desktop computer connected to a fibre optic network. This would seem relatively fast, and the file size would be largely irrelevant.
 - Imagine loading that same site using tethered mobile data on a nine-year-old iPad while commuting home on public transportation. The same site will be slow to load, possibly verging on unusable depending on cell coverage. You might give up before it finishes loading.
-- Imagine loading that same site on a $35 Huawei device in a rural India with limited coverage or no coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact causing browser crashes if it does load.
+- Imagine loading that same site on a low-cost device in an area with limited coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact potentially causing browser crashes if it does load.
 
 A 22.6 MB site could take up to 83 seconds to load on a 3G network, with [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) (meaning the site's base HTML structure) at 31.86 seconds.
 
-And it isn't just the time taken to download that is a major problem. A lot of countries still have internet connections that bill per megabyte. Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian's daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (See [how much your site costs to download](https://whatdoesmysitecost.com/).)
+And it isn't just the time taken to download that is a major problem. In some regions, internet connections are billed per megabyte, making large downloads prohibitively expensive. Our example 22.6 MB CNN.com experience would cost a significant portion of a mobile data user's daily allowance or even lead to high charges in certain international roaming plans.(See [how much your site costs to download](https://whatdoesmysitecost.com/).)
 
 ### Improve conversion rates
 

files/en-us/learn/server-side/first_steps/website_security/index.md

@@ -140,6 +140,10 @@ A number of other concrete steps you can take are:
 - Keep track of the most popular threats (the [current OWASP list is here](https://owasp.org/www-project-top-ten/)) and address the most common vulnerabilities first.
 - Use [vulnerability scanning tools](https://owasp.org/www-community/Vulnerability_Scanning_Tools) to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty [like Mozilla does here](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/).
 - Only store and display data that you need. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern at this time is to only display the last 4 digits of a credit card number.
+- Keep software up-to-date.
+  Most servers have regular security updates that fix or mitigate known vulnerabilities.
+  If possible, schedule regular automated updates, and ideally, schedule updates during times when your website has the lowest amount of traffic.
+  It's best to back up your data before updating and test new software versions to make sure there's no compatibility issues on your server.
 
 Web frameworks can help mitigate many of the more common vulnerabilities.
 

files/en-us/mozilla/firefox/releases/131/index.md

@@ -42,6 +42,7 @@ This article provides information about the changes in Firefox 131 that affect d
 
 ### APIs
 
+- The {{domxref('PointerEvent.altitudeAngle','altitudeAngle')}} and {{domxref('PointerEvent.azimuthAngle','azimuthAngle')}} properties of the {{domxref('PointerEvent')}} interface are supported, providing the angle between the pointer/stylus and the screen (X-Y plane), and the rotation of the stylus over the screen relative to its x-axis, respectively. ([Firefox bug 1909673](https://bugzil.la/1909673)).
 - [Text fragments](/en-US/docs/Web/URI/Fragment/Text_fragments) are now supported, allowing users to link to and highlight specific portions of text in a web page. This feature uses a particular syntax in the [URL fragment](/en-US/docs/Web/URI/Fragment) that identifies the target based on patterns in the rendered text.
   Website developers can also use the existence of the {{domxref("Document.fragmentDirective")}} property (an instance of the {{domxref("FragmentDirective")}} interface) to feature check for text fragment support, and the {{CSSxRef("::target-text")}} pseudo element to select and style text that has been selected using a text fragment link. ([Firefox bug 1914877](https://bugzil.la/1914877))
 

files/en-us/web/api/closeevent/code/index.md

@@ -8,11 +8,11 @@ browser-compat: api.CloseEvent.code
 
 {{APIRef("Websockets API")}}
 
-The **`code`** read-only property of the {{domxref("CloseEvent")}} interface returns a [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) indicating the reason the server gave for closing the connection.
+The **`code`** read-only property of the {{domxref("CloseEvent")}} interface returns a [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) indicating the reason the connection was closed.
 
 ## Value
 
-An integer [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) in the range `1000` - `4999`, indicating the reason the server gave for closing the connection.
+An integer [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) in the range `1000` - `4999`, indicating the reason the connection was closed.
 
 <table class="no-markdown">
   <thead>

files/en-us/web/api/closeevent/index.md

@@ -21,7 +21,7 @@ A `CloseEvent` is sent to clients using {{Glossary("WebSockets")}} when the conn
 _This interface also inherits properties from its parent, {{domxref("Event")}}._
 
 - {{domxref("CloseEvent.code")}} {{ReadOnlyInline}}
-  - : Returns an `unsigned short` containing the close code sent by the server.
+  - : Returns an `unsigned short` containing the close code.
 - {{domxref("CloseEvent.reason")}} {{ReadOnlyInline}}
   - : Returns a string indicating the reason the server closed the connection. This is specific to the particular server and sub-protocol.
 - {{domxref("CloseEvent.wasClean")}} {{ReadOnlyInline}}

files/en-us/web/api/document/fragmentdirective/index.md

@@ -16,15 +16,38 @@ A {{domxref("FragmentDirective")}} object.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking for existence of the object.
+Note that the object is empty, and at present it is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications
 

files/en-us/web/api/document/getelementsbytagname/index.md

@@ -33,10 +33,6 @@ getElementsByTagName(name)
 
 A live {{domxref("HTMLCollection")}} of found elements in the order they appear in the tree.
 
-> **Note:** [The latest W3C specification](https://dom.spec.whatwg.org/#interface-document) says returned value is an
-> `HTMLCollection`; however, this method returns a {{domxref("NodeList")}} in
-> WebKit browsers. See [Firefox bug 14869](https://bugzil.la/14869) for details.
-
 ## Examples
 
 In the following example, `getElementsByTagName()` starts from a particular

files/en-us/web/api/document/getelementsbytagnamens/index.md

@@ -20,25 +20,17 @@ getElementsByTagNameNS(namespace, name)
 ### Parameters
 
 - `namespace`
-  - : The namespace URI of elements to look for (see
-    {{domxref("Element.namespaceURI", "element.namespaceURI")}}).
+  - : The namespace URI of elements to look for (see {{domxref("Element.namespaceURI", "element.namespaceURI")}}).
 - `name`
-  - : Either the local name of elements to look for or the special
-    value `*`, which matches all elements (see {{domxref("Element.localName", "element.localName")}}).
 
-### Return value
+  - : Either the local name of elements to look for or the special value `*`, which matches all elements (see {{domxref("Element.localName", "element.localName")}}).
 
-A live {{DOMxRef("NodeList")}} (but see the note below) of
-found elements in the order they appear in the tree.
+    > [!NOTE]
+    > Unlike {{domxref("document.getElementsByTagName()")}}, the parameters for `getElementsByTagNameNS()` are case-sensitive.
 
-> [!NOTE]
-> While the W3C specification says returned value is a `NodeList`, this method returns a {{DOMxRef("HTMLCollection")}} in Firefox.
-> Opera returns a `NodeList`, but with a `namedItem` method implemented, which makes it similar to a `HTMLCollection`. As of January 2012, only in WebKit browsers is the returned value a pure `NodeList`.
-> See [bug 14869](https://bugzil.la/14869) for details.
+### Return value
 
-> [!NOTE]
-> Currently parameters in this method are case-sensitive, but they were case-insensitive in Firefox 3.5 and before.
-> See the [developer release note for Firefox 3.6](/en-US/docs/Mozilla/Firefox/Releases/3.6#dom) and a note in Browser compatibility section in {{domxref("Element.getElementsByTagNameNS")}} for details.
+A live {{DOMxRef("HTMLCollection")}} of found elements in the order they appear in the tree.
 
 ## Examples
 

files/en-us/web/api/element/mouseenter_event/index.md

@@ -10,7 +10,7 @@ browser-compat: api.Element.mouseenter_event
 
 The **`mouseenter`** event is fired at an {{domxref("Element")}} when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
 
-Note that "moving into an event" refers to the element's position in the DOM tree, not to its visual position. For example, if a child element is positioned so it is placed outside its parent, then moving into the child element will trigger `mouseenter` on the parent element, even though the pointer is still outside the bounds of the parent element.
+Note that "moving into an element" refers to the element's position in the DOM tree, not to its visual position. For example, if a child element is positioned so it is placed outside its parent, then moving into the child element will trigger `mouseenter` on the parent element, even though the pointer is still outside the bounds of the parent element.
 
 ## Syntax
 

files/en-us/web/api/element/mouseleave_event/index.md

@@ -14,7 +14,7 @@ The **`mouseleave`** event is fired at an {{domxref("Element")}} when the cursor
 
 The `mouseleave` and `mouseout` events will not be triggered when the element is replaced or removed from the DOM.
 
-Note that "moving out of an event" refers to the element's position in the DOM tree, not to its visual position. For example, if two sibling elements are positioned so one is placed inside the other, then moving from the outer element into the inner element will trigger `mouseleave` on the outer element, even though the pointer is still in the bounds of the outer element.
+Note that "moving out of an element" refers to the element's position in the DOM tree, not to its visual position. For example, if two sibling elements are positioned so one is placed inside the other, then moving from the outer element into the inner element will trigger `mouseleave` on the outer element, even though the pointer is still in the bounds of the outer element.
 
 ## Syntax
 

files/en-us/web/api/element/scrolltop/index.md

@@ -24,22 +24,20 @@ The `scrollTop` property can be set, which causes the element to scroll to the s
 
 ### Scrolling an element
 
-In this example, try scrolling the inner container with the dashed border, and see how the value of `scrollTop` changes.
+In this example, try scrolling the container with the dashed border, and see how the value of `scrollTop` changes.
 
 #### HTML
 
 ```html
 <div id="container">
-  <div id="scroller">
-    <p>
-      Far out in the uncharted backwaters of the unfashionable end of the
-      western spiral arm of the Galaxy lies a small unregarded yellow sun.
-      Orbiting this at a distance of roughly ninety-two million miles is an
-      utterly insignificant little blue green planet whose ape-descended life
-      forms are so amazingly primitive that they still think digital watches are
-      a pretty neat idea.
-    </p>
-  </div>
+  <p>
+    Far out in the uncharted backwaters of the unfashionable end of the western
+    spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this
+    at a distance of roughly ninety-two million miles is an utterly
+    insignificant little blue green planet whose ape-descended life forms are so
+    amazingly primitive that they still think digital watches are a pretty neat
+    idea.
+  </p>
 </div>
 
 <div id="output">scrollTop: 0</div>
@@ -48,7 +46,7 @@ In this example, try scrolling the inner container with the dashed border, and s
 #### CSS
 
 ```css
-#scroller {
+#container {
   overflow: scroll;
   height: 150px;
   width: 150px;
@@ -63,11 +61,11 @@ In this example, try scrolling the inner container with the dashed border, and s
 #### JavaScript
 
 ```js
-const scroller = document.querySelector("#scroller");
+const container = document.querySelector("#container");
 const output = document.querySelector("#output");
 
-scroller.addEventListener("scroll", (event) => {
-  output.textContent = `scrollTop: ${scroller.scrollTop}`;
+container.addEventListener("scroll", (event) => {
+  output.textContent = `scrollTop: ${container.scrollTop}`;
 });
 ```
 

files/en-us/web/api/fragmentdirective/index.md

@@ -7,7 +7,7 @@ browser-compat: api.FragmentDirective
 
 {{APIRef("URL Fragment Text Directives")}}
 
-The **`FragmentDirective`** interface is an object exposed for feature detectability, that is, whether or not a browser supports text fragments.
+The **`FragmentDirective`** interface is an object exposed to allow code to check whether or not a browser supports text fragments.
 
 It is accessed via the {{domxref("Document.fragmentDirective")}} property.
 
@@ -21,15 +21,38 @@ None.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking that {{domxref("Document.fragmentDirective")}} is defined.
+Note that the object is empty, and at present is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications
 

files/en-us/web/api/gamepad/index.md

@@ -11,6 +11,9 @@ The **`Gamepad`** interface of the [Gamepad API](/en-US/docs/Web/API/Gamepad_API
 
 A Gamepad object can be returned in one of two ways: via the `gamepad` property of the {{domxref("Window.gamepadconnected_event", "gamepadconnected")}} and {{domxref("Window.gamepaddisconnected_event", "gamepaddisconnected")}} events, or by grabbing any position in the array returned by the {{domxref("Navigator.getGamepads()")}} method.
 
+> [!NOTE]
+> The support of gamepad features varies across different combinations of platforms and controllers. Even if the controller supports a certain feature (for example, haptic feedback), the platform may not support it for that controller.
+
 ## Instance properties
 
 - {{domxref("Gamepad.axes")}} {{ReadOnlyInline}}

files/en-us/web/api/htmlinputelement/accept/index.md

@@ -0,0 +1,40 @@
+---
+title: "HTMLInputElement: accept property"
+short-title: accept
+slug: Web/API/HTMLInputElement/accept
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.accept
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`accept`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`accept`](/en-US/docs/Web/HTML/Element/input#accept) attribute, generally a comma-separated list of unique file type specifiers providing a hint for the expected file type for an [`<input>` of type `file`](/en-US/docs/Web/HTML/Element/input/file). If the attribute is not explicitly set, the `accept` property is an empty string.
+
+## Value
+
+A string representing the element's `accept` value or an empty string if no `accept` is explicitly set.
+
+## Example
+
+```js
+const inputElement = document.querySelector("#time");
+console.log(inputElement.accept); // the current value of the accept attribute
+inputElement.accept = ".doc,.docx,.xml,application/msword"; // sets the accept value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLInputElement.multiple")}}
+- {{domxref("HTMLInputElement.capture")}}
+- [File type specifiers](/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [File API](/en-US/docs/Web/API/File_API)