[pull] main from mdn:main

.github/workflows/pr-check-lint_content.yml

@@ -92,7 +92,7 @@ jobs:
           rm -r files *.md
 
           # Remove non-Markdown files from HEAD.
-          find pr_head/files -type f ! -name '*.md' -delete
+          find pr_head -type f ! -name '*.md' -delete
 
           # Move Markdown files from HEAD into BASE.
           mv pr_head/files pr_head/*.md .

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

@@ -319,6 +319,20 @@ The {{cssxref("@custom-media")}} CSS at-rule defines aliases for long or complex
 - `layout.css.custom-media.enabled`
   - : Set to `true` to enable.
 
+### `<attr-type>` values in `attr()` CSS function
+
+The {{cssxref("attr")}} CSS function now supports [`<attr-type>`](/en-US/docs/Web/CSS/Reference/Values/attr#attr-type) values. This allows you to specify how an attribute value is parsed into a CSS value and take those values directly from [`data-*`](/en-US/docs/Web/HTML/How_to/Use_data_attributes). ([Firefox bug 1986631](https://bugzil.la/1986631) & [Firefox bug 1998245](https://bugzil.la/1998245))
+
+| Release channel   | Version added | Enabled by default? |
+| ----------------- | ------------- | ------------------- |
+| Nightly           | 149           | No                  |
+| Developer Edition | 149           | No                  |
+| Beta              | 149           | No                  |
+| Release           | 149           | No                  |
+
+- `layout.css.attr.enabled`
+  - : Set to `true` to enable.
+
 ## SVG
 
 **No experimental features in this release cycle.**

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

@@ -103,3 +103,7 @@ The ability of extensions to dynamically execute code in their `moz-extension:`
 These features are shipping in Firefox 149 but are disabled by default.
 To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`.
 You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page.
+
+- **`<attr-type>` values in `attr()` CSS function**: `layout.css.attr.enabled`
+
+  The {{cssxref("attr")}} CSS function now supports [`<attr-type>`](/en-US/docs/Web/CSS/Reference/Values/attr#attr-type) values. This allows you to specify how an attribute value is parsed into a CSS value and take those values directly from [`data-*`](/en-US/docs/Web/HTML/How_to/Use_data_attributes). ([Firefox bug 1986631](https://bugzil.la/1986631) & [Firefox bug 1998245](https://bugzil.la/1998245)).

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

@@ -69,6 +69,8 @@ _Doesn't inherit any properties._
   - : Returns `true` if the browser can display PDF files inline when navigating to them, and `false` otherwise.
 - {{domxref("Navigator.permissions")}} {{ReadOnlyInline}}
   - : Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the [Permissions API](/en-US/docs/Web/API/Permissions_API).
+- {{domxref("Navigator.preferences")}} {{ReadOnlyInline}} {{Experimental_Inline}} {{SecureContext_Inline}}
+  - : Returns the document's current {{domxref("PreferenceManager")}} object, which provides access to [user preference](/en-US/docs/Web/API/User_Preferences_API) information.
 - {{domxref("Navigator.presentation")}} {{ReadOnlyInline}} {{SecureContext_Inline}}
   - : Returns a reference to the {{domxref("Presentation")}} API.
 - {{domxref("Navigator.scheduling")}} {{ReadOnlyInline}} {{Experimental_Inline}}

files/en-us/web/api/navigator/preferences/index.md

@@ -0,0 +1,41 @@
+---
+title: "Navigator: preferences property"
+short-title: preferences
+slug: Web/API/Navigator/preferences
+page-type: web-api-instance-property
+browser-compat: api.Navigator.preferences
+---
+
+{{SeeCompatTable}}
+
+The **`preferences`** read-only property of the {{domxref("Navigator")}} interface returns a {{domxref("PreferenceManager")}} object for the current document. This is the entry point for the [User Preferences API](/en-US/docs/Web/API/User_Preferences_API) functionality.
+
+## Value
+
+A {{domxref('PreferenceManager')}} object.
+
+## Examples
+
+### Get color scheme preference
+
+This example demonstrates how to query the user's preferred color scheme.
+
+```js
+if (navigator.preferences.colorScheme.value === "dark") {
+  // The user prefers a dark color scheme.
+} else {
+  // The user prefers a light color scheme.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [User Preferences API](/en-US/docs/Web/API/User_Preferences_API)

files/en-us/web/api/preferencemanager/colorscheme/index.md

@@ -0,0 +1,42 @@
+---
+title: "PreferenceManager: colorScheme property"
+short-title: colorScheme
+slug: Web/API/PreferenceManager/colorScheme
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.PreferenceManager.colorScheme
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#color-scheme-attribute
+---
+
+{{APIRef("User Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`colorScheme`** read-only property of the {{domxref("PreferenceManager")}} interface returns a {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-color-scheme", "color scheme")}} of the site.
+
+Valid `colorScheme` {{domxref("PreferenceObject.value")}} settings are `dark` and `light`.
+
+## Value
+
+A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-color-scheme", "color scheme")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's preferred color scheme.
+
+```js
+if (navigator.preferences.colorScheme.value === "dark") {
+  // The user prefers a dark color scheme.
+} else {
+  // The user prefers a light color scheme.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/preferencemanager/contrast/index.md

@@ -0,0 +1,44 @@
+---
+title: "PreferenceManager: contrast property"
+short-title: contrast
+slug: Web/API/PreferenceManager/contrast
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.PreferenceManager.contrast
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#contrast-attribute
+---
+
+{{APIRef("User Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`contrast`** read-only property of the {{domxref("PreferenceManager")}} interface returns a {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-color-scheme", "color scheme")}} of the site.
+
+Valid `contrast` {{domxref("PreferenceObject.value")}} settings are `more`, `less`, and `no-preference`.
+
+## Value
+
+A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-color-scheme", "color scheme")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's contrast preference.
+
+```js
+if (navigator.preferences.contrast.value === "more") {
+  // The user prefers a high color contrast.
+} else if (navigator.preferences.contrast.value === "less") {
+  // The user prefers a low color contrast.
+} else {
+  // The user has stated no preference regarding color contrast.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

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

@@ -0,0 +1,54 @@
+---
+title: PreferenceManager
+slug: Web/API/PreferenceManager
+page-type: web-api-interface
+status:
+  - experimental
+browser-compat: api.PreferenceManager
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#preference-manager
+---
+
+{{APIRef("Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`PreferenceManager`** interface of the [User Preferences API](/en-US/docs/Web/API/User_Preferences_API) provides access to {{domxref("PreferenceObject")}} objects used to query and modify user preferences.
+
+The `PreferenceManager` for the current document can be accessed via the {{domxref("Navigator.preferences")}} property.
+
+The `PreferenceManager` interface inherits from {{domxref("EventTarget")}}.
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+- {{domxref("PreferenceManager.colorScheme")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-color-scheme", "color scheme")}} of the site.
+- {{domxref("PreferenceManager.contrast")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-contrast", "contrast")}} of the site.
+- {{domxref("PreferenceManager.reducedMotion")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-motion", "reduced motion")}} of the site.
+- {{domxref("PreferenceManager.reducedTransparency")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-transparency", "reduced transparency")}} of the site.
+- {{domxref("PreferenceManager.reducedData")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-data", "reduced data")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's preferred color scheme.
+
+```js
+if (navigator.preferences.colorScheme.value === "dark") {
+  // The user prefers a dark color scheme.
+} else {
+  // The user prefers a light color scheme.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/preferencemanager/reduceddata/index.md

@@ -0,0 +1,42 @@
+---
+title: "PreferenceManager: reducedData property"
+short-title: reducedData
+slug: Web/API/PreferenceManager/reducedData
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.PreferenceManager.reducedData
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#reduced-data-attribute
+---
+
+{{APIRef("User Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`reducedData`** read-only property of the {{domxref("PreferenceManager")}} interface returns a {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-data", "reduced data")}} of the site.
+
+Valid `reducedData` {{domxref("PreferenceObject.value")}} settings are `reduce` and `no-preference`.
+
+## Value
+
+A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-data", "reduced data")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's reduced data preference.
+
+```js
+if (navigator.preferences.reducedData.value === "reduce") {
+  // The user prefers you use less data.
+} else {
+  // The user has stated no preference regarding data use.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/preferencemanager/reducedmotion/index.md

@@ -0,0 +1,42 @@
+---
+title: "PreferenceManager: reducedMotion property"
+short-title: reducedMotion
+slug: Web/API/PreferenceManager/reducedMotion
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.PreferenceManager.reducedMotion
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#reduced-motion-attribute
+---
+
+{{APIRef("User Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`reducedMotion`** read-only property of the {{domxref("PreferenceManager")}} interface returns the {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-motion", "reduced motion")}} of the site.
+
+Valid `reducedMotion` {{domxref("PreferenceObject.value")}} settings are `reduce` and `no-preference`.
+
+## Value
+
+A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-motion", "reduced motion")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's reduced motion preference.
+
+```js
+if (navigator.preferences.reducedMotion.value === "reduce") {
+  // The user prefers reduced motion.
+} else {
+  // The user has stated no preference regarding motion.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/preferencemanager/reducedtransparency/index.md

@@ -0,0 +1,42 @@
+---
+title: "PreferenceManager: reducedTransparency property"
+short-title: reducedTransparency
+slug: Web/API/PreferenceManager/reducedTransparency
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.PreferenceManager.reducedTransparency
+spec-urls: https://drafts.csswg.org/mediaqueries-5/#reduced-transparency-attribute
+---
+
+{{APIRef("User Preferences API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+The **`reducedTransparency`** read-only property of the {{domxref("PreferenceManager")}} interface returns the {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-transparency", "reduced transparency")}} of the site.
+
+Valid `reducedTransparency` {{domxref("PreferenceObject.value")}} settings are `reduce` and `no-preference`.
+
+## Value
+
+A {{domxref("PreferenceObject")}} used to override the user's preference for the {{cssxref("@media/prefers-reduced-transparency", "reduced transparency")}} of the site.
+
+## Examples
+
+### Basic usage
+
+This example demonstrates how to query the user's reduced transparency preference.
+
+```js
+if (navigator.preferences.reducedTransparency.value === "reduce") {
+  // The user prefers reduced transparency.
+} else {
+  // The user has stated no preference regarding transparency.
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}