[pull] main from mdn:main

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md

@@ -186,9 +186,50 @@ input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button {
 }
 ```
 
+### Setting form control color tints using `accent-color`
+
+If you only want to style the primary tint color of checkboxes, radio buttons, or range sliders, the {{cssxref("accent-color")}} will do it without requiring `appearance: none`. This is useful for basic styling cases, as the controls maintain their OS-level styling, but with an altered main color.
+
+```html live-sample___accent-color
+<form>
+  <fieldset>
+    <legend>Fruit preferences</legend>
+
+    <p>
+      <label>
+        <input type="checkbox" name="fruit" value="cherry" checked />
+        I like cherry
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="radio" name="favorite" value="banana" checked />
+        Banana is my favorite
+      </label>
+    </p>
+    <p>
+      <label>
+        How much do you like fruit?
+        <input type="range" name="amount" min="0" max="10" value="7" />
+      </label>
+    </p>
+  </fieldset>
+</form>
+```
+
+```css live-sample___accent-color
+input {
+  accent-color: rebeccapurple;
+}
+```
+
+{{EmbedLiveSample("accent-color", '100%', 200)}}
+
+Because the controls keep their native appearance, they follow platform conventions — including forced-colors modes — with no further work on your part. In addition, the browser automatically chooses a complementary secondary color with enough contrast to the `accent-color` to keep the control accessible. Play with the above live example and set some light and dark `accent-color` values to see the effects.
+
 ### Styling checkboxes and radio buttons using `appearance`
 
-Styling a checkbox or a radio button is tricky by default. The sizes of checkbox and radio button default styles are not meant to be changed, and browsers react very differently when you try. Some increase the size of the control, and some keep the control the same size and add extra space around it.
+Further styling of a checkbox or a radio button requires more effort. The default sizes of checkboxes and radio buttons were not meant to be changed, and browsers react very differently when you try. Some increase the control size, and some keep it the same and add extra space around the control.
 
 A much better approach is to remove the default appearance of checkboxes and radio buttons altogether with {{cssxref("appearance", "appearance: none;")}}, and then add your own styles to their various states.
 
@@ -558,7 +599,7 @@ The date/time input types ([`datetime-local`](/en-US/docs/Web/HTML/Reference/Ele
 However, the internal parts of the control (e.g., the popup calendar that you use to pick a date, the spinner that you can use to increment/decrement values) are not stylable at all, and you can't get rid of them using `appearance: none;`. If you really need full control over the styling, you'll have to either use a library to generate a custom control or build your own.
 
 > [!NOTE]
-> It is worth mentioning [`<input type="number">`](/en-US/docs/Web/HTML/Reference/Elements/input/number) here too — this also has a spinner that you can use to increment/decrement values, so potentially suffers from the same problem. However, in the case of the `number` type the data being collected is simpler, and it is easy to just use a `tel` input type instead, which has the appearance of `text`, but displays the numeric keypad in devices with touch keyboards.
+> [`<input type="number">`](/en-US/docs/Web/HTML/Reference/Elements/input/number) has a spinner too, and its internal parts are no easier to style. If you want to remove the spinner, use [`<input type="text">`](/en-US/docs/Web/HTML/Reference/Elements/input/text) with [`inputmode="numeric"`](/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode) set to display a numeric keypad on devices with touch keyboards and a [`pattern`](/en-US/docs/Web/HTML/Reference/Attributes/pattern) attribute that limits input values to a number. See also [`<input type="number">` > Accessibility](/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility).
 
 ### Range input types
 
@@ -593,11 +634,32 @@ However, a custom solution is the only way to get anything significantly differe
 
 ### File input types
 
-Inputs of type file are generally OK — as you saw in our example, it is fairly easy to create something that fits in OK with the rest of the page — the output line that is part of the control will inherit the parent font if you tell the input to do so, and you can style the custom list of file names and sizes in any way you want; we created it after all.
+Inputs of type file are generally OK — it is fairly easy to create something that fits in OK with the rest of the page. The output line that is part of the control will inherit the parent font if you tell the input to do so, and you can style the custom list of file names and sizes in any way you want.
 
-The only problem with file pickers is that the button you press to open the file picker is completely unstylable — it can't be sized or colored, and it won't even accept a different font.
+The button you press to open the file picker can be styled with the {{cssxref("::file-selector-button")}} pseudo-element, which accepts the same properties as any other button:
 
-One way around this is to take advantage of the fact that if you have a label associated with a form control, clicking the label will activate the control. So you could hide the actual form input using something like this:
+```html live-sample___file-selector-button
+<form>
+  <label for="avatar">Choose a profile picture</label>
+  <input id="avatar" name="avatar" type="file" />
+</form>
+```
+
+```css live-sample___file-selector-button
+input[type="file"]::file-selector-button {
+  border: 1px solid darkgrey;
+  border-radius: 5px;
+  background: linear-gradient(to bottom, #eeeeee, #cccccc);
+  padding: 0.25em 0.75em;
+  font: inherit;
+}
+```
+
+{{EmbedLiveSample("file-selector-button", '100%', 100)}}
+
+You can't style the text beside the button — the "no file chosen" message — or the displayed filename once chosen. The browser generates that text and doesn't expose it to CSS. To work around this problem, use the control's label and the fact that clicking the label activates the control.
+
+You can hide the actual form input using something like this:
 
 ```css
 input[type="file"] {
@@ -730,18 +792,18 @@ function returnFileSize(number) {
 
 {{EmbedLiveSample("styled-file-picker", '100%', 200)}}
 
-You can also press the **Play** button to run the example in MDN Playground and edit the source code.
+You can also press the **Play** button to run the example in MDN Playground and check out the full source code.
 
 ### Meters and progress bars
 
-[`<meter>`](/en-US/docs/Web/HTML/Reference/Elements/meter) and [`<progress>`](/en-US/docs/Web/HTML/Reference/Elements/progress) are possibly the worst of the lot. As you saw in the earlier example, we can set them to the desired width relatively accurately. But beyond that, they are really difficult to style in any way. They don't handle height settings consistently between each other and between browsers, you can color the background but not the foreground bar, and setting `appearance: none` on them makes things worse, not better.
+[`<meter>`](/en-US/docs/Web/HTML/Reference/Elements/meter) and [`<progress>`](/en-US/docs/Web/HTML/Reference/Elements/progress) are possibly the worst of the lot. As you saw in the earlier example, we can set them to the desired width relatively accurately. But beyond that, they are really difficult to style. They don't handle height settings consistently between each other and between browsers, you can color the background but not the foreground bar, and setting `appearance: none` on them makes things worse, not better.
 
-It is easier to create your own custom solution for these features if you want to control the styling, or use a third-party solution such as [progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#examples).
+It is easier to create your own custom solution to control the styling for these features, or use a third-party solution such as [progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#examples).
 
 ## Summary
 
-While there are still difficulties using CSS with HTML forms, there are ways to get around many of the problems. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS when applied to HTML form controls.
+Styling HTML forms presents some challenges; there are however ways to get around many of them. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about how different browsers support CSS when applied to HTML form controls.
 
-In the next article of this module, we will explore creating [fully-customized `<select>` elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) using the dedicated, modern HTML and CSS features available for this purpose.
+In the next article, we will explore creating [fully-customized `<select>` elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) using the dedicated, modern HTML and CSS features available for this purpose.
 
 {{PreviousMenuNext("Learn_web_development/Extensions/Forms/Styling_web_forms", "Learn_web_development/Extensions/Forms/Customizable_select", "Learn_web_development/Extensions/Forms")}}

files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md

@@ -62,6 +62,8 @@ The article [Advanced form styling](/en-US/docs/Learn_web_development/Extensions
 - Date-related controls such as [`<input type="datetime-local">`](/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local)
 - [`<input type="range">`](/en-US/docs/Web/HTML/Reference/Elements/input/range)
 - [`<input type="file">`](/en-US/docs/Web/HTML/Reference/Elements/input/file)
+  > [!NOTE]
+  > The button that opens the file picker can be styled with {{cssxref("::file-selector-button")}}. The text beside it, which names the selected file, cannot.
 - Elements involved in creating dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}}.
   > [!NOTE]
   > Some browsers now support [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), a set of HTML and CSS features that together enable full customization of `<select>` elements and their contents just like any regular DOM elements.

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -435,6 +435,20 @@ The {{cssxref("text-decoration-inset")}} CSS property now supports percentages a
 - `layout.css.text-decoration-inset-percentage.enabled`
   - : Set to `true` to enable.
 
+### `view-timeline` includes `view-timeline-inset`
+
+The {{cssxref("view-timeline")}} shorthand property now supports the {{cssxref("view-timeline-inset")}} property. The shorthand lets you specify start and/or end inset (or outset) values to adjust the position of the view progress timeline. ([Firefox bug 2046602](https://bugzil.la/2046602)).
+
+| Release channel   | Version added | Enabled by default? |
+| ----------------- | ------------- | ------------------- |
+| Nightly           | 155           | Yes                 |
+| Developer Edition | 155           | No                  |
+| Beta              | 155           | No                  |
+| Release           | 155           | No                  |
+
+- `layout.css.scroll-driven-animations.enabled`
+  - : Set to `true` to enable.
+
 ## SVG
 
 **No experimental features in this release cycle.**

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

@@ -179,3 +179,7 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil
 - **`border-area` value for `background-clip`**: `layout.css.background-clip.border-area.enabled`
 
   The [`border-area`](/en-US/docs/Web/CSS/Reference/Properties/background-clip#border-area) value of the {{cssxref("background-clip")}} CSS property clips the background to the area painted by the element's border, which makes it possible to use a gradient or image as a border. ([Firefox bug 2045230](https://bugzil.la/2045230)).
+
+- **`view-timeline` includes `view-timeline-inset`**: `layout.css.scroll-driven-animations.enabled`
+
+  The {{cssxref("view-timeline")}} shorthand property now supports the {{cssxref("view-timeline-inset")}} property. The shorthand lets you specify start and/or end inset (or outset) values to adjust the position of the view progress timeline. ([Firefox bug 2046602](https://bugzil.la/2046602)).

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

@@ -71,7 +71,7 @@ _No changes._
 - The [Fetch API](/en-US/docs/Web/API/Fetch_API)'s {{domxref("Request.credentials")}} property now defaults to `"same-origin"` per the latest revision of the specification ([Firefox bug 1394399](https://bugzil.la/1394399)).
 - The {{domxref("Request.destination")}} property has been implemented ([Firefox bug 1402892](https://bugzil.la/1402892)).
 - The {{domxref("MutationObserver")}} option dictionary, `MutationObserverInit`, no longer has `false` as the default value of all of its Boolean properties. Now, only `childList` and `subtree` have default values (of `false` still). The other properties have no default values ([Firefox bug 973638](https://bugzil.la/973638)).
-- The [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) method {{domxref("PaymentRequest.show()")}} now supports using a {{jsxref("Promise")}} to let the client side code provide updated payment details prior to activating the payment interface ([Firefox bug 1441709](https://bugzil.la/1441709)).
+- The [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) method {{domxref("PaymentRequest.show()")}} now supports using a {{jsxref("Promise")}} to let the client-side code provide updated payment details prior to activating the payment interface ([Firefox bug 1441709](https://bugzil.la/1441709)).
 
 #### DOM events
 

files/en-us/related/imsc/mapping_video_time_codes_to_imsc/index.md

@@ -33,7 +33,7 @@ In a single second this is not a big deal. As you extend to a few minutes, howev
 
 3600 (seconds in 1 hour) \* 1.001 (velocity) = 3603.6 real time seconds
 
-This is especially important to understand with IMSC files, since all of the timings in the document represent real time values. For example, if you want to describe an event that synchronizes with 23.976fps video that begins at 01:00:00:00 time code in the video, and ends 1 second later, it would look like this:
+This is especially important to understand with IMSC files, since all of the timings in the document represent real-time values. For example, if you want to describe an event that synchronizes with 23.976fps video that begins at 01:00:00:00 time code in the video, and ends 1 second later, it would look like this:
 
 `<p begin="3603.6s" end="3604.6s">Hello, I am Mork from Ork</p>`
 

files/en-us/web/accessibility/guides/cognitive_accessibility/index.md

@@ -224,7 +224,7 @@ Input Assistance guidelines aim to reduce the likelihood that users, especially
 
 ### Convey automated error detection
 
-Users need to be alerted to the error and informed of what is wrong. If there is client side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user:
+Users need to be alerted to the error and informed of what is wrong. If there is client-side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user:
 
 - The error must be described in the text.
 - Ensure that the error message is as specific as possible.

files/en-us/web/accessibility/guides/understanding_wcag/operable/index.md

@@ -127,7 +127,7 @@ This guideline covers situations in which functionality may have a time limit. F
         </p>
         <p>
           Exceptions to this are activities with time limits longer than 20
-          hours, real time events (e.g., live multiplayer games), and any other
+          hours, real-time events (e.g., live multiplayer games), and any other
           activity that requires a time limit and would be invalidated if it
           were turned off.
         </p>

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

@@ -20,19 +20,19 @@ This is convenient, because it allows the same name to be used of represent a se
 _Inherits properties from its ancestor {{domxref("CSSRule")}}._
 
 - {{domxref("CSSFontFeatureValuesRule.annotation")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies an alternate annotation of the font.
+  - : A user-defined value definition and value that applies an alternate annotation of the font.
 - {{domxref("CSSFontFeatureValuesRule.characterVariant")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies stylistic alternatives for characters of the font.
+  - : A user-defined value definition and value that applies stylistic alternatives for characters of the font.
 - {{domxref("CSSFontFeatureValuesRule.fontFamily")}}
   - : A string that identifies the font family this rule applies to.
 - {{domxref("CSSFontFeatureValuesRule.ornaments")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies alternative ornaments of the font.
+  - : A user-defined value definition and value that applies alternative ornaments of the font.
 - {{domxref("CSSFontFeatureValuesRule.styleset")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies alternate style sets of the font.
+  - : A user-defined value definition and value that applies alternate style sets of the font.
 - {{domxref("CSSFontFeatureValuesRule.stylistic")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies alternative glyphs of the font.
+  - : A user-defined value definition and value that applies alternative glyphs of the font.
 - {{domxref("CSSFontFeatureValuesRule.swash")}} {{experimental_inline}}
-  - : A user defined value definition and value that applies alternative swashes of the font.
+  - : A user-defined value definition and value that applies alternative swashes of the font.
 
 ## Instance methods
 

files/en-us/web/api/htmlscriptelement/textcontent/index.md

@@ -54,7 +54,7 @@ scriptElement.textContent = untrustedCode; // shows the alert
 You can mitigate these issues by always assigning {{domxref("TrustedScript")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
 This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) or reject the text before it is injected.
 
-The behavior of the transformation function will depend on the specific use case that requires a user provided script.
+The behavior of the transformation function will depend on the specific use case that requires a user-provided script.
 If possible you should lock the allowed scripts to exactly the code that you trust to run.
 If that is not possible, you might allow or block the use of certain functions within the provided string.
 

files/en-us/web/api/server-sent_events/using_server-sent_events/index.md

@@ -7,7 +7,7 @@ browser-compat: api.EventSource
 
 {{DefaultAPISidebar("Server Sent Events")}}
 
-Developing a web application that uses [server-sent events](/en-US/docs/Web/API/Server-sent_events) is straightforward. You'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to [websockets](/en-US/docs/Web/API/WebSockets_API) in part of handling incoming events. This is a one-way connection, so you can't send events from a client to a server.
+Developing a web application that uses [server-sent events](/en-US/docs/Web/API/Server-sent_events) is straightforward. You'll need a bit of code on the server to stream events to the front-end, but the client-side code works almost identically to [websockets](/en-US/docs/Web/API/WebSockets_API) in part of handling incoming events. This is a one-way connection, so you can't send events from a client to a server.
 
 ## Receiving events from the server