From a34d62daf2294f7f4d1f339cee60ba58c109ae01 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 9 Feb 2024 17:15:07 -0800 Subject: [PATCH 001/746] Update social media (#32194) * remove X * remove X --- files/en-us/mdn/mdn_product_advisory_board/index.md | 2 +- files/en-us/web/api/server-sent_events/index.md | 2 +- .../en-us/web/html/global_attributes/contextmenu/index.md | 8 ++++---- .../tutorials/js13kgames/app_structure/index.md | 5 ----- 4 files changed, 6 insertions(+), 11 deletions(-) diff --git a/files/en-us/mdn/mdn_product_advisory_board/index.md b/files/en-us/mdn/mdn_product_advisory_board/index.md index 53a908a46905c22..017ad08a996b545 100644 --- a/files/en-us/mdn/mdn_product_advisory_board/index.md +++ b/files/en-us/mdn/mdn_product_advisory_board/index.md @@ -36,7 +36,7 @@ Current members of the MDN Product Advisory Board are: - : Joe has led Google's effort to create web platform reference documentation for the last five years, which means he spends a lot of time on MDN. In addition to editing the Chrome beta release announcements targeted at web developers, he writes the occasional article for web.dev. Joe came to Web Developer Relations after a long career writing developer reference documentation for enterprise applications and a degree in education from the University of Central Missouri. - **Eric Meyer** Developer Advocate, Igalia - - : [Eric](https://meyerweb.com/) ([@meyerweb](https://twitter.com/meyerweb)) is an [author](https://meyerweb.com/eric/writing.html), speaker, blogger, sometimes teacher and consultant, Developer Advocate at [Igalia](https://www.igalia.com/), and co-founder of [An Event Apart](https://aneventapart.com/). He's been working on the Web since 1993 and still finds it deeply compelling. + - : [Eric](https://meyerweb.com/) ([@meyerweb](https://mastodon.social/@Meyerweb)) is an [author](https://meyerweb.com/eric/writing.html), speaker, blogger, sometimes teacher and consultant, Developer Advocate at [Igalia](https://www.igalia.com/), and co-founder of [An Event Apart](https://aneventapart.com/). He's been working on the Web since 1993 and still finds it deeply compelling. - **Laura Morinigo** Web Developer Advocate, Samsung - : Laura is a software developer, advocate, and mentor. She is passionate about sharing her knowledge and connecting with different tech communities worldwide. Thanks to her contributions, she has been recognized as a Google Developer Expert and a Woman Techmakers Ambassador. As a mentor, she helped startups participating in accelerator programs like Google Launchpad and the World Food Programme by the United Nations. Currently, she is a web developer advocate for Samsung Internet. She contributes to web standards and spreads the word about advanced web features, helping developers create great and more inclusive web apps. diff --git a/files/en-us/web/api/server-sent_events/index.md b/files/en-us/web/api/server-sent_events/index.md index b9621546a2cb385..8566aa88e347241 100644 --- a/files/en-us/web/api/server-sent_events/index.md +++ b/files/en-us/web/api/server-sent_events/index.md @@ -49,4 +49,4 @@ To learn how to use server-sent events, see our article [Using server-sent event ### Other resources -- A [Twitter like application](https://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) powered by server-sent events and [its code on GitHub](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline). +- [Creating a wall/feed social application](https://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) powered by server-sent events and [its code on GitHub](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline). diff --git a/files/en-us/web/html/global_attributes/contextmenu/index.md b/files/en-us/web/html/global_attributes/contextmenu/index.md index 79a191d81b7bf3b..85e4adeb223a525 100644 --- a/files/en-us/web/html/global_attributes/contextmenu/index.md +++ b/files/en-us/web/html/global_attributes/contextmenu/index.md @@ -22,13 +22,13 @@ A _context menu_ is a menu that appears upon user interaction, such as a right-c - +
  1. - Anywhere in the example you can share the page on Twitter and Facebook + Anywhere in the example you can share the page on LinkedIn and Facebook using the Share menu from your context menu.
  2. @@ -58,9 +58,9 @@ A _context menu_ is a menu that appears upon user interaction, such as a right-c ### JavaScript ```js -function shareViaTwitter() { +function shareViaLinkedIn() { window.open( - "https://twitter.com/intent/tweet?text=" + + "https://www.linkedin.com/shareArticle?url=" + "Hurray! I am learning ContextMenu from MDN via Mozilla", ); } diff --git a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md index 042c46d6e7dbb68..d8285af632fbfc7 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md @@ -91,7 +91,6 @@ const template = `

    #POS. NAME

    • Author: AUTHOR
      • -
    • Twitter: @TWITTER
    • Website: WEBSITE
    • GitHub: GITHUB
    • More: js13kgames.com/entries/SLUG
      • @@ -104,7 +103,6 @@ for (let i = 0; i < games.length; i++) { .replace(/SLUG/g, games[i].slug) .replace(/NAME/g, games[i].name) .replace(/AUTHOR/g, games[i].author) - .replace(/TWITTER/g, games[i].twitter) .replace(/WEBSITE/g, games[i].website) .replace(/GITHUB/g, games[i].github); entry = entry.replace("", "-"); @@ -236,7 +234,6 @@ const games = [ slug: "lost-in-cyberspace", name: "Lost in Cyberspace", author: "Zosia and Bartek", - twitter: "bartaz", website: "", github: "github.com/bartaz/lost-in-cyberspace", }, @@ -244,7 +241,6 @@ const games = [ slug: "vernissage", name: "Vernissage", author: "Platane", - twitter: "platane_", website: "github.com/Platane", github: "github.com/Platane/js13k-2017", }, @@ -253,7 +249,6 @@ const games = [ slug: "emma-3d", name: "Emma-3D", author: "Prateek Roushan", - twitter: "", website: "", github: "github.com/coderprateek/Emma-3D", }, From 71306eff3262a35f913b9b5e91fdc22ed697caae Mon Sep 17 00:00:00 2001 From: getsnoopy Date: Fri, 9 Feb 2024 19:27:14 -0600 Subject: [PATCH 002/746] Remove jargon from :focus-visible (#32200) --- files/en-us/web/css/_colon_focus-visible/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md index 980b383fc474694..12722b432a52f05 100644 --- a/files/en-us/web/css/_colon_focus-visible/index.md +++ b/files/en-us/web/css/_colon_focus-visible/index.md @@ -23,7 +23,7 @@ This selector is useful to provide a different focus indicator based on the user ## :focus vs :focus-visible -Originally, user-agent CSS set focus styles based only on the `:focus` pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can negatively impact usability, while removing focus styles makes keyboard navigation inaccessible for sighted users. +Originally, user-agent CSS set focus styles based only on the `:focus` pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can decrease usability, while removing focus styles makes keyboard navigation inaccessible for sighted users. Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention. From 0fe8f4d7e9cd5b1b6a39e9fa047468206d3c3ca2 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 10 Feb 2024 15:15:11 +0530 Subject: [PATCH 003/746] Synchronize with BCD v5.5.10 (#32198) Co-authored-by: OnkarRuikar --- files/en-us/web/api/cssscoperule/end/index.md | 4 +--- files/en-us/web/api/cssscoperule/index.md | 8 +++----- files/en-us/web/api/cssscoperule/start/index.md | 4 +--- files/en-us/web/api/htmlobjectelement/index.md | 2 +- files/en-us/web/api/htmlobjectelement/usemap/index.md | 4 +++- files/en-us/web/api/idbindex/index.md | 4 ++-- files/en-us/web/api/idbindex/isautolocale/index.md | 3 +-- files/en-us/web/api/idbindex/locale/index.md | 3 +-- files/en-us/web/css/@scope/index.md | 4 +--- files/en-us/web/css/_doublecolon_grammar-error/index.md | 4 +--- files/en-us/web/css/_doublecolon_spelling-error/index.md | 4 +--- files/en-us/web/css/color_value/light-dark/index.md | 4 +--- files/en-us/web/css/text-wrap/index.md | 4 ++-- files/en-us/web/css/transition-behavior/index.md | 4 +--- files/en-us/web/css/white-space-collapse/index.md | 4 +--- files/en-us/web/html/element/head/index.md | 2 +- files/en-us/web/html/element/html/index.md | 2 +- files/en-us/web/html/element/html/manifest/index.md | 3 +-- files/en-us/web/html/element/iframe/index.md | 2 +- files/en-us/web/html/element/object/index.md | 2 +- files/en-us/web/security/iframe_credentialless/index.md | 3 +-- 21 files changed, 27 insertions(+), 47 deletions(-) diff --git a/files/en-us/web/api/cssscoperule/end/index.md b/files/en-us/web/api/cssscoperule/end/index.md index 26fdcfd2c565a3c..bcd482ad08389e3 100644 --- a/files/en-us/web/api/cssscoperule/end/index.md +++ b/files/en-us/web/api/cssscoperule/end/index.md @@ -3,12 +3,10 @@ title: "CSSScopeRule: end property" short-title: end slug: Web/API/CSSScopeRule/end page-type: web-api-instance-property -status: - - experimental browser-compat: api.CSSScopeRule.end --- -{{APIRef("CSSOM")}}{{SeeCompatTable}} +{{APIRef("CSSOM")}} The **`end`** property of the {{domxref("CSSScopeRule")}} interface returns a string containing the value of the `@scope` at-rule's scope limit. diff --git a/files/en-us/web/api/cssscoperule/index.md b/files/en-us/web/api/cssscoperule/index.md index d766563b517c16a..500a7361bf341be 100644 --- a/files/en-us/web/api/cssscoperule/index.md +++ b/files/en-us/web/api/cssscoperule/index.md @@ -2,12 +2,10 @@ title: CSSScopeRule slug: Web/API/CSSScopeRule page-type: web-api-interface -status: - - experimental browser-compat: api.CSSScopeRule --- -{{ APIRef("CSSOM") }}{{SeeCompatTable}} +{{ APIRef("CSSOM") }} The **`CSSScopeRule`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents a CSS {{CSSxRef("@scope")}} at-rule. @@ -17,9 +15,9 @@ The **`CSSScopeRule`** interface of the [CSS Object Model](/en-US/docs/Web/API/C _This interface inherits properties from its parent, {{domxref("CSSGroupingRule")}}._ -- {{domxref("CSSScopeRule.end", "end")}} {{experimental_inline}} +- {{domxref("CSSScopeRule.end", "end")}} - : Returns a string containing the value of the `@scope` at-rule's scope limit. -- {{domxref("CSSScopeRule.start", "start")}} {{experimental_inline}} +- {{domxref("CSSScopeRule.start", "start")}} - : Returns a string containing the value of the `@scope` at-rule's scope root. ## Instance methods diff --git a/files/en-us/web/api/cssscoperule/start/index.md b/files/en-us/web/api/cssscoperule/start/index.md index 3a2f6f3b21b5fa8..18179ee0e87ba1f 100644 --- a/files/en-us/web/api/cssscoperule/start/index.md +++ b/files/en-us/web/api/cssscoperule/start/index.md @@ -3,12 +3,10 @@ title: "CSSScopeRule: start property" short-title: start slug: Web/API/CSSScopeRule/start page-type: web-api-instance-property -status: - - experimental browser-compat: api.CSSScopeRule.start --- -{{APIRef("CSSOM")}}{{SeeCompatTable}} +{{APIRef("CSSOM")}} The **`start`** property of the {{domxref("CSSScopeRule")}} interface returns a string containing the value of the `@scope` at-rule's scope root. diff --git a/files/en-us/web/api/htmlobjectelement/index.md b/files/en-us/web/api/htmlobjectelement/index.md index 3515c7c366eb5c5..a47c45367028ba1 100644 --- a/files/en-us/web/api/htmlobjectelement/index.md +++ b/files/en-us/web/api/htmlobjectelement/index.md @@ -47,7 +47,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._ - : A string that reflects the [`standby`](/en-US/docs/Web/HTML/Element/object#standby) HTML attribute, specifying a message to display while the object loads. - {{domxref("HTMLObjectElement.type")}} - : A string that reflects the [`type`](/en-US/docs/Web/HTML/Element/object#type) HTML attribute, specifying the MIME type of the resource. -- {{domxref("HTMLObjectElement.useMap")}} +- {{domxref("HTMLObjectElement.useMap")}} {{deprecated_inline}} - : A string that reflects the [`usemap`](/en-US/docs/Web/HTML/Element/object#usemap) HTML attribute, specifying a {{HTMLElement("map")}} element to use. - {{domxref("HTMLObjectElement.validationMessage")}} {{ReadOnlyInline}} - : Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (`willValidate` is `false`), or it satisfies its constraints. diff --git a/files/en-us/web/api/htmlobjectelement/usemap/index.md b/files/en-us/web/api/htmlobjectelement/usemap/index.md index fe2a04ddb5fc449..82b534bef5434fb 100644 --- a/files/en-us/web/api/htmlobjectelement/usemap/index.md +++ b/files/en-us/web/api/htmlobjectelement/usemap/index.md @@ -3,10 +3,12 @@ title: "HTMLObjectElement: useMap property" short-title: useMap slug: Web/API/HTMLObjectElement/useMap page-type: web-api-instance-property +status: + - deprecated browser-compat: api.HTMLObjectElement.useMap --- -{{APIRef("HTML DOM")}} +{{APIRef("HTML DOM")}}{{deprecated_header}} The **`useMap`** property of the {{domxref("HTMLObjectElement")}} interface returns a string that diff --git a/files/en-us/web/api/idbindex/index.md b/files/en-us/web/api/idbindex/index.md index ec5f56775b4ef93..6e65ca3ebc5c877 100644 --- a/files/en-us/web/api/idbindex/index.md +++ b/files/en-us/web/api/idbindex/index.md @@ -19,9 +19,9 @@ You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyR ## Instance properties -- {{domxref("IDBIndex.isAutoLocale")}} {{ReadOnlyInline}} {{ non-standard_inline }} {{experimental_inline}} +- {{domxref("IDBIndex.isAutoLocale")}} {{ReadOnlyInline}} {{ non-standard_inline }} {{deprecated_inline}} - : Returns a boolean value indicating whether the index had a `locale` value of `auto` specified upon its creation (see the [`options`](/en-US/docs/Web/API/IDBObjectStore/createIndex#options) parameter to [`IDBObjectStore.createIndex()`](/en-US/docs/Web/API/IDBObjectStore/createIndex).) -- {{domxref("IDBIndex.locale")}} {{ReadOnlyInline}} {{ non-standard_inline }} {{experimental_inline}} +- {{domxref("IDBIndex.locale")}} {{ReadOnlyInline}} {{ non-standard_inline }} {{deprecated_inline}} - : Returns the locale of the index (for example `en-US`, or `pl`) if it had a `locale` value specified upon its creation (see the [`options`](/en-US/docs/Web/API/IDBObjectStore/createIndex#options) parameter to [`IDBObjectStore.createIndex()`](/en-US/docs/Web/API/IDBObjectStore/createIndex).) - {{domxref("IDBIndex.name")}} - : The name of this index. diff --git a/files/en-us/web/api/idbindex/isautolocale/index.md b/files/en-us/web/api/idbindex/isautolocale/index.md index ed3f3bf8c7b5c3c..988af9fbd30cb61 100644 --- a/files/en-us/web/api/idbindex/isautolocale/index.md +++ b/files/en-us/web/api/idbindex/isautolocale/index.md @@ -5,12 +5,11 @@ slug: Web/API/IDBIndex/isAutoLocale page-type: web-api-instance-property status: - deprecated - - experimental - non-standard browser-compat: api.IDBIndex.isAutoLocale --- -{{APIRef("IndexedDB")}}{{deprecated_header}}{{SeeCompatTable}}{{non-standard_header}} +{{APIRef("IndexedDB")}}{{deprecated_header}}{{non-standard_header}} The **`isAutoLocale`** read-only property of the {{domxref("IDBIndex")}} interface returns a boolean value indicating whether the index had a `locale` value of `auto` specified upon its creation (see the [`options`](/en-US/docs/Web/API/IDBObjectStore/createIndex#options) parameter to [`IDBObjectStore.createIndex()`](/en-US/docs/Web/API/IDBObjectStore/createIndex).) diff --git a/files/en-us/web/api/idbindex/locale/index.md b/files/en-us/web/api/idbindex/locale/index.md index 1dddd23f4a3d7da..7accf6b94be4603 100644 --- a/files/en-us/web/api/idbindex/locale/index.md +++ b/files/en-us/web/api/idbindex/locale/index.md @@ -5,12 +5,11 @@ slug: Web/API/IDBIndex/locale page-type: web-api-instance-property status: - deprecated - - experimental - non-standard browser-compat: api.IDBIndex.locale --- -{{APIRef("IndexedDB")}}{{deprecated_header}}{{SeeCompatTable}}{{non-standard_header}} +{{APIRef("IndexedDB")}}{{deprecated_header}}{{non-standard_header}} The **`locale`** read-only property of the {{domxref("IDBIndex")}} interface returns the locale of the index (for example `en-US`, or `pl`) if it had a `locale` value specified upon its creation (see the [`options`](/en-US/docs/Web/API/IDBObjectStore/createIndex#options) parameter to [`IDBObjectStore.createIndex()`](/en-US/docs/Web/API/IDBObjectStore/createIndex).) Note that this property always returns the current locale being used in this index, in other words, it never returns `"auto"`. diff --git a/files/en-us/web/css/@scope/index.md b/files/en-us/web/css/@scope/index.md index f0bcf0cc7837a0b..637eaf0af2e9d00 100644 --- a/files/en-us/web/css/@scope/index.md +++ b/files/en-us/web/css/@scope/index.md @@ -2,12 +2,10 @@ title: "@scope" slug: Web/CSS/@scope page-type: css-at-rule -status: - - experimental browser-compat: css.at-rules.scope --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} The **`@scope`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure. diff --git a/files/en-us/web/css/_doublecolon_grammar-error/index.md b/files/en-us/web/css/_doublecolon_grammar-error/index.md index 128943aad0bb979..1be1631fb7b88ff 100644 --- a/files/en-us/web/css/_doublecolon_grammar-error/index.md +++ b/files/en-us/web/css/_doublecolon_grammar-error/index.md @@ -2,12 +2,10 @@ title: "::grammar-error" slug: Web/CSS/::grammar-error page-type: css-pseudo-element -status: - - experimental browser-compat: css.selectors.grammar-error --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} The **`::grammar-error`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a text segment which the {{glossary("user agent")}} has flagged as grammatically incorrect. diff --git a/files/en-us/web/css/_doublecolon_spelling-error/index.md b/files/en-us/web/css/_doublecolon_spelling-error/index.md index 93c922caae7e3b7..276cce8ebac436b 100644 --- a/files/en-us/web/css/_doublecolon_spelling-error/index.md +++ b/files/en-us/web/css/_doublecolon_spelling-error/index.md @@ -2,12 +2,10 @@ title: "::spelling-error" slug: Web/CSS/::spelling-error page-type: css-pseudo-element -status: - - experimental browser-compat: css.selectors.spelling-error --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} The **`::spelling-error`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a text segment which the {{glossary("user agent")}} has flagged as incorrectly spelled. diff --git a/files/en-us/web/css/color_value/light-dark/index.md b/files/en-us/web/css/color_value/light-dark/index.md index fc9471a4d2f6308..22e38f42d05fda8 100644 --- a/files/en-us/web/css/color_value/light-dark/index.md +++ b/files/en-us/web/css/color_value/light-dark/index.md @@ -2,12 +2,10 @@ title: light-dark() slug: Web/CSS/color_value/light-dark page-type: css-function -status: - - experimental browser-compat: css.types.color.light-dark --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} The **`light-dark()`** [CSS](/en-US/docs/Web/CSS) [`` function](/en-US/docs/Web/CSS/CSS_Functions#color_functions) enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features) query. Users are able to indicate their color-scheme preference through their operating system settings (e.g. light or dark mode) or their user agent settings. The `light-dark()` function enables providing two color values where any `` value is accepted. The `light-dark()` CSS color function returns the first value if the user's preference is set to `light` or if no preference is set and the second value if the user's preference is set to `dark`. diff --git a/files/en-us/web/css/text-wrap/index.md b/files/en-us/web/css/text-wrap/index.md index c028added4b9bc3..bd0e23173e9a03c 100644 --- a/files/en-us/web/css/text-wrap/index.md +++ b/files/en-us/web/css/text-wrap/index.md @@ -36,9 +36,9 @@ The `text-wrap` property is specified as a single keyword chosen from the list o ### Values -- `wrap` {{experimental_inline}} +- `wrap` - : Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value. -- `nowrap` {{experimental_inline}} +- `nowrap` - : Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line. - `balance` - : Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox). diff --git a/files/en-us/web/css/transition-behavior/index.md b/files/en-us/web/css/transition-behavior/index.md index af86f5c82b15a7c..a446919d127c846 100644 --- a/files/en-us/web/css/transition-behavior/index.md +++ b/files/en-us/web/css/transition-behavior/index.md @@ -2,12 +2,10 @@ title: transition-behavior slug: Web/CSS/transition-behavior page-type: css-property -status: - - experimental browser-compat: css.properties.transition-behavior --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} The **`transition-behavior`** [CSS](/en-US/docs/Web/CSS) property specifies whether transitions will be started for properties whose animation behavior is [discrete](/en-US/docs/Web/CSS/CSS_animated_properties#discrete). diff --git a/files/en-us/web/css/white-space-collapse/index.md b/files/en-us/web/css/white-space-collapse/index.md index 62bb00309a5ebaa..c2c99cd7d849fc5 100644 --- a/files/en-us/web/css/white-space-collapse/index.md +++ b/files/en-us/web/css/white-space-collapse/index.md @@ -2,12 +2,10 @@ title: white-space-collapse slug: Web/CSS/white-space-collapse page-type: css-property -status: - - experimental browser-compat: css.properties.white-space-collapse --- -{{CSSRef}}{{seecompattable}} +{{CSSRef}} The **`white-space-collapse`** CSS property controls how {{Glossary("whitespace", "white space")}} inside an element is collapsed. diff --git a/files/en-us/web/html/element/head/index.md b/files/en-us/web/html/element/head/index.md index 56978d6abe2b0ad..764877608e54cb4 100644 --- a/files/en-us/web/html/element/head/index.md +++ b/files/en-us/web/html/element/head/index.md @@ -15,7 +15,7 @@ The **``** [HTML](/en-US/docs/Web/HTML) element contains machine-readable This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). -- `profile` {{deprecated_inline}} {{Non-standard_Inline}} +- `profile` {{deprecated_inline}} - : The {{glossary("URI")}}s of one or more metadata profiles, separated by {{Glossary("whitespace", "white space")}}. ## Examples diff --git a/files/en-us/web/html/element/html/index.md b/files/en-us/web/html/element/html/index.md index 5ec0313e03bc7eb..b9b78073cc300ca 100644 --- a/files/en-us/web/html/element/html/index.md +++ b/files/en-us/web/html/element/html/index.md @@ -62,7 +62,7 @@ The **``** [HTML](/en-US/docs/Web/HTML) element represents the root (top-l This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). -- `manifest` {{deprecated_inline}} {{Non-standard_Inline}} +- `manifest` {{deprecated_inline}} - : Specifies the {{glossary("URI")}} of a resource manifest indicating resources that should be cached locally. - `version` {{deprecated_inline}} - : Specifies the version of the HTML {{glossary("Doctype", "Document Type Definition")}} that governs the current document. This attribute is not needed, because it is redundant with the version information in the document type declaration. diff --git a/files/en-us/web/html/element/html/manifest/index.md b/files/en-us/web/html/element/html/manifest/index.md index 1c3b853b5e05388..5c9abf08941c1a5 100644 --- a/files/en-us/web/html/element/html/manifest/index.md +++ b/files/en-us/web/html/element/html/manifest/index.md @@ -4,11 +4,10 @@ slug: Web/HTML/Element/html/manifest page-type: html-attribute status: - deprecated - - non-standard browser-compat: html.elements.html.manifest --- -{{securecontext_header}}{{Deprecated_Header}}{{Non-standard_Header}} +{{securecontext_header}}{{Deprecated_Header}} The **`manifest`** attribute of the `` element specifies a URL of an application cache manifest that is downloaded in the early stages of page load. diff --git a/files/en-us/web/html/element/iframe/index.md b/files/en-us/web/html/element/iframe/index.md index af73a1f7fc89391..6a51f104a0d2664 100644 --- a/files/en-us/web/html/element/iframe/index.md +++ b/files/en-us/web/html/element/iframe/index.md @@ -37,7 +37,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib > **Note:** This attribute is considered a legacy attribute and redefined as `allow="payment"`. -- `credentialless` {{Experimental_Inline}} {{Non-standard_Inline}} +- `credentialless` {{Experimental_Inline}} - : Set to `true` to make the ` + ``` + + - If using `create()`: + + ```html + + ``` + + The ` +``` + +Browsers may also block the screen lock in a particular document for an implementation specific reason, such as a user or platform setting. +They are expected to provide some unobtrusive mechanism to inform the user when wake lock is active, and to provide users the ability to remove the application's screen lock. + +The [Permissions API](/en-US/docs/Web/API/Permissions_API) `screen-wake-lock` permission can be used to test whether access to use the screen lock is `granted`, `denied` or `prompt` (requires user acknowledgement of a prompt). ## Specifications diff --git a/files/en-us/web/api/wakelocksentinel/index.md b/files/en-us/web/api/wakelocksentinel/index.md index 69a19775dd8a83d..30311f4b512f275 100644 --- a/files/en-us/web/api/wakelocksentinel/index.md +++ b/files/en-us/web/api/wakelocksentinel/index.md @@ -14,6 +14,7 @@ The screen wake lock prevents device screens from dimming or locking when an app A screen wake lock is requested using the {{domxref('WakeLock.request()','navigator.wakeLock.request()')}} method, which returns a {{jsxref('Promise')}} that fulfills with a `WakeLockSentinel` object if the lock is granted. An acquired screen wake lock can be released manually via the {{domxref('WakeLockSentinel.release','release()')}} method, or automatically via the platform screen wake lock. The latter may occur if the document becomes inactive or loses visibility, if the device is low on power, or if the user turns on a power save mode. +A released `WakeLockSentinel` cannot be re-used: a new sentinel must be be requested using {{domxref('WakeLock.request()','navigator.wakeLock.request()')}} if a new lock is needed. Releasing all `WakeLockSentinel` instances of a given wake lock type will cause the underlying platform wake lock to be released. An event is fired at the `WakeLockSentinel` if the platform lock is released, allowing applications to configure their UI, and re-request the lock if needed. From 3dcf0a372985afd0a708243d25a9c9649850e2df Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 20 Feb 2024 15:53:13 +0530 Subject: [PATCH 090/746] fix: convert 'suggest yarn install' script from Shell to JS (#32356) fix: convert suggest yarn install script from Shell to JS --- .husky/update-history | 9 --------- package.json | 2 +- scripts/update-history.js | 16 ++++++++++++++++ 3 files changed, 17 insertions(+), 10 deletions(-) delete mode 100644 .husky/update-history create mode 100644 scripts/update-history.js diff --git a/.husky/update-history b/.husky/update-history deleted file mode 100644 index 8acaf333a7f745a..000000000000000 --- a/.husky/update-history +++ /dev/null @@ -1,9 +0,0 @@ -#!/usr/bin/env sh - -# This script stores the 'main' branch's HEAD commit hash in .husky/_/history -# The stored commit hash is used by the post-merge script .husky/post-merge - -BRANCH="$(git rev-parse --abbrev-ref HEAD)" -if [ "$BRANCH" = "main" -a -d "./.husky/_" ]; then - echo $(git rev-parse HEAD) > ./.husky/_/history -fi diff --git a/package.json b/package.json index de5e60a8ce27951..1c628e9cafc45c8 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ }, "type": "module", "scripts": { - "postinstall": "sh ./.husky/update-history", + "postinstall": "node scripts/update-history.js", "build": "env-cmd --silent cross-env CONTENT_ROOT=files BUILD_OUT_ROOT=build yari-build", "content": "env-cmd --silent cross-env CONTENT_ROOT=files yari-tool", "filecheck": "env-cmd --silent cross-env CONTENT_ROOT=files yari-filecheck --cwd=.", diff --git a/scripts/update-history.js b/scripts/update-history.js new file mode 100644 index 000000000000000..b46ccf3bd025c65 --- /dev/null +++ b/scripts/update-history.js @@ -0,0 +1,16 @@ +/** + * This script stores the 'main' branch's HEAD commit hash in .husky/_/history + * The stored commit hash is used by the post-merge script .husky/post-merge + */ + +import fs from "node:fs"; +import { execGit } from "./utils.js"; + +const HUSKY_ROOT = ".husky/_/"; +const HISTORY_FILE = HUSKY_ROOT + "history"; + +const branch = execGit(["rev-parse", "--abbrev-ref", "HEAD"], { cwd: "." }); +if (branch === "main" && fs.existsSync(HUSKY_ROOT)) { + const hash = execGit(["rev-parse", "HEAD"], { cwd: "." }); + fs.writeFileSync(HISTORY_FILE, hash); +} From f532b39a60a4948306d1f0a0ebc318fb2c43432f Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 20 Feb 2024 10:59:14 +0000 Subject: [PATCH 091/746] added the FF release note for Date.parse() bug fixes (#32257) --- files/en-us/mozilla/firefox/releases/123/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/files/en-us/mozilla/firefox/releases/123/index.md b/files/en-us/mozilla/firefox/releases/123/index.md index ab340c54498a2b2..109501642c53128 100644 --- a/files/en-us/mozilla/firefox/releases/123/index.md +++ b/files/en-us/mozilla/firefox/releases/123/index.md @@ -24,6 +24,11 @@ This article provides information about the changes in Firefox 123 that affect d ### JavaScript +- The {{jsxref("Date.parse()")}} global object has had a number of bug fixes to bring it into line with how other browsers parse the values being passed. + - Incorrect day of month (e.g. "31 April") now skips over to the following month (e.g. "1 May"). ([Firefox bug 1872333](https://bugzil.la/1872333)). + - Incomplete time zone (e.g. "1/1/70 gm") or AM/PM (e.g. "1/1/70 10:00 a") are no longer accepted. ([Firefox bug 1870570](https://bugzil.la/1870570)). + - Single number dates are now accepted (e.g. `Date.parse("0")` now returns `946684800000` - Sat Jan 01 2000 00:00:00). ([Firefox bug 1870434](https://bugzil.la/1870434)). + #### Removals ### SVG From 87e2f1a8f53bbfc09ffa28281e16041207d9c6c5 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 20 Feb 2024 22:01:31 +1100 Subject: [PATCH 092/746] FF123 Relnote: Deprecation of custom local support in IndexDB API (#31998) * FF123 Relnote: Deprecation of custom local support in IndexDB API * Update files/en-us/mozilla/firefox/releases/123/index.md Co-authored-by: Vadim Makeev --------- Co-authored-by: Vadim Makeev --- files/en-us/mozilla/firefox/releases/123/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/files/en-us/mozilla/firefox/releases/123/index.md b/files/en-us/mozilla/firefox/releases/123/index.md index 109501642c53128..bab49ac542bd235 100644 --- a/files/en-us/mozilla/firefox/releases/123/index.md +++ b/files/en-us/mozilla/firefox/releases/123/index.md @@ -58,10 +58,15 @@ This article provides information about the changes in Firefox 123 that affect d #### DOM +- Custom locale support for the [IndexedDB API](/en-US/docs/Web/API/IndexedDB_API) has been deprecated, including the [`options.locale`](/en-US/docs/Web/API/IDBObjectStore/createIndex#locale) parameter to `IDBObjectStore.createIndex()`, and the `IDBIndex` properties [`isAutoLocale`](/en-US/docs/Web/API/IDBIndex/isAutoLocale) and [`locale`](/en-US/docs/Web/API/IDBIndex/locale). + ([Firefox bug 1872675](https://bugzil.la/1872675) and [Firefox bug 1730706](https://bugzil.la/1730706)). + #### Media, WebRTC, and Web Audio #### Removals +The `IDBLocaleAwareKeyRange` interface has been removed ([Firefox bug 1730706](https://bugzil.la/1730706)). + ### WebAssembly #### Removals From 60e5d269064123747fdf7f7e158895c253bf4eab Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 20 Feb 2024 22:03:40 +1100 Subject: [PATCH 093/746] FF123 Expr - Web Codecs API - video interfaces (#32233) --- .../firefox/experimental_features/index.md | 42 +++++++++++++++++++ .../mozilla/firefox/releases/123/index.md | 6 +++ 2 files changed, 48 insertions(+) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index f8df4b04290ce30..b66ca306ece3cd3 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -2064,6 +2064,48 @@ Notifications have the [`requireInteraction`](/en-US/docs/Web/API/Notification/r +### Web Codecs API + +The [Web Codecs API](/en-US/docs/Web/API/WebCodecs_API) gives web developers low-level access to the individual frames of a video stream and chunks of audio. +The following interfaces are supported (on Linux desktop only): [`VideoEncoder`](/en-US/docs/Web/API/VideoEncoder), [`VideoDecoder`](/en-US/docs/Web/API/VideoDecoder), [`EncodedVideoChunk`](/en-US/docs/Web/API/EncodedVideoChunk), [`VideoFrame`](/en-US/docs/Web/API/VideoFrame), [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace). +([Firefox bug 1874445](https://bugzil.la/1874445)). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Release channelVersion changedEnabled by default?
      Nightly123Yes. Linux desktop only.
      Developer Edition123No
      Beta123No
      Release123No
      Preference namedom.media.webcodecs.enabled
      + ## Security and privacy ### Block plain text requests from Flash on encrypted pages diff --git a/files/en-us/mozilla/firefox/releases/123/index.md b/files/en-us/mozilla/firefox/releases/123/index.md index bab49ac542bd235..affb827d2affbdb 100644 --- a/files/en-us/mozilla/firefox/releases/123/index.md +++ b/files/en-us/mozilla/firefox/releases/123/index.md @@ -97,6 +97,12 @@ The `IDBLocaleAwareKeyRange` interface has been removed ([Firefox bug 1730706](h These features are newly shipped in Firefox 123 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. +- **Web Codecs API:** `dom.media.webcodecs.enabled`. + + The video interfaces of the [Web Codecs API](/en-US/docs/Web/API/WebCodecs_API) are supported on Linux desktop on Nightly. + These include: [`VideoEncoder`](/en-US/docs/Web/API/VideoEncoder), [`VideoDecoder`](/en-US/docs/Web/API/VideoDecoder), [`EncodedVideoChunk`](/en-US/docs/Web/API/EncodedVideoChunk), [`VideoFrame`](/en-US/docs/Web/API/VideoFrame), [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace). + ([Firefox bug 1874445](https://bugzil.la/1874445)). + ## Older versions {{Firefox_for_developers(122)}} From bcad8171fa4acb38d2b9069fdff134da1d36c7ee Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 20 Feb 2024 13:38:48 +0000 Subject: [PATCH 094/746] Updated Date.parse() (#32253) * updated the non-standard date strings * added a note about DST with Date.parse() * Update files/en-us/web/javascript/reference/global_objects/date/parse/index.md Co-authored-by: Joshua Chen * moved the note on different DST settings to getTimezoneOffset --------- Co-authored-by: Joshua Chen --- .../global_objects/date/gettimezoneoffset/index.md | 2 ++ .../reference/global_objects/date/parse/index.md | 14 +++++++++----- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md b/files/en-us/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md index e6864eb0bc42a6f..9a891df6b2cc9ce 100644 --- a/files/en-us/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md +++ b/files/en-us/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md @@ -45,6 +45,8 @@ In a region that annually shifts in and out of Daylight Saving Time (DST), as `d > **Note:** `getTimezoneOffset()`'s behavior will never differ based on the time when the code is run — its behavior is always consistent when running in the same region. Only the value of `date` affects the result. +> **Note:** [Many countries have experimented with not changing the time twice a year](https://en.wikipedia.org/wiki/Daylight_saving_time_by_country#Past_observance) and this has meant that DST has continued over the winter too. For example in the UK DST lasted from 2:00AM 18 February 1968 to 3:00AM 31 October 1971, so during the winter the clocks were not set back. + In most implementations, the [IANA time zone database](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database) (tzdata) is used to precisely determine the offset of the local timezone at the moment of the `date`. However, if such information is unavailable, an implementation may return zero. ## Examples diff --git a/files/en-us/web/javascript/reference/global_objects/date/parse/index.md b/files/en-us/web/javascript/reference/global_objects/date/parse/index.md index cfc3f35478b43a3..815b04c6dff54a1 100644 --- a/files/en-us/web/javascript/reference/global_objects/date/parse/index.md +++ b/files/en-us/web/javascript/reference/global_objects/date/parse/index.md @@ -58,6 +58,8 @@ Date.parse("2019-01-01T00:00:00"); Implementations usually default to the local time zone when the date string is non-standard. For consistency, we will assume that the code uses the UTC timezone. +> **Note:** The local time zone offset comes from the system setting of the device and is then applied to the date being parsed. [Daylight Saving Time (DST), of the local time zone, can also have an effect on this too](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset#varied_results_in_daylight_saving_time_dst_regions). + ```js Date.parse("Jan 1, 1970"); // 0 in all implementations @@ -75,12 +77,14 @@ Date.parse("Thu, 01 Jan 1970 00:00:00 GMT+0300"); // Single number Date.parse("0"); -// 946684800000 in Chrome (Sat Jan 01 2000 00:00:00 GMT+0000); -// NaN in Firefox; +// NaN in Firefox ≤122 +// 946684800000 in Chrome and Firefox ≥123 (Sat Jan 01 2000 00:00:00 GMT+0000); // -62167219200000 in Safari (Sat Jan 01 0000 00:00:00 GMT+0000) // Two-digit number that may be a month -Date.parse("28"); // NaN in all implementations +Date.parse("28"); +// NaN Chrome and Firefox +// -61283606400000 in Safari (Fri Dec 31 0027 23:58:45 GMT-0001) // Two-digit year Date.parse("70/01/01"); // 0 in all implementations @@ -91,8 +95,8 @@ Date.parse("Mar 32, 2014"); // NaN in all implementations Date.parse("2014/25/23"); // NaN in all implementations Date.parse("2014-02-30"); -// NaN in Safari and Firefox; -// 1393718400000 in Chrome (Sun Mar 02 2014 00:00:00 GMT+0000) +// NaN in Safari +// 1393718400000 in Chrome and Firefox (Sun Mar 02 2014 00:00:00 GMT+0000) Date.parse("02/30/2014"); // 1393718400000 in all implementations // Chrome, Safari, and Firefox 122 and later parse only the first three letters for the month. From 523f7ebeb53ed7d95e806279e32d40c92b57d5fb Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 20 Feb 2024 08:49:02 -0500 Subject: [PATCH 095/746] fix(css) Update `ray()` and `offset-position` text and examples for default `offset-position: normal` (#31850) * updates offset-position default value * updates offset-position example descriptions * updates ray examples and descriptions * fixes review comments * fixes review feedback * fixes feedback and example codes * reverts changes in offset-position --- files/en-us/web/css/offset-position/index.md | 12 +- files/en-us/web/css/ray/index.md | 129 ++++++++++--------- 2 files changed, 74 insertions(+), 67 deletions(-) diff --git a/files/en-us/web/css/offset-position/index.md b/files/en-us/web/css/offset-position/index.md index e77280bbd29b4e9..14e27080ad9e762 100644 --- a/files/en-us/web/css/offset-position/index.md +++ b/files/en-us/web/css/offset-position/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset-position {{CSSRef}} -The **`offset-position`** [CSS](/en-US/docs/Web/CSS) property defines the initial position of an element along a path. This property is typically used in combination with the {{cssxref("offset-path")}} property to create a motion effect. The value of `offset-position` determines where the element gets placed initially for moving along an `offset-path` if the offset-path function does not specify its own starting position. +The **`offset-position`** [CSS](/en-US/docs/Web/CSS) property defines the initial position of an element along a path. This property is typically used in combination with the {{cssxref("offset-path")}} property to create a motion effect. The value of `offset-position` determines where the element gets placed initially for moving along an offset path if an `offset-path` function such as {{cssxref("path", "path()")}} does not specify its own starting position. The `offset-position` property is part of a motion system based on {{cssxref("offset")}} constituent properties, including {{cssxref("offset-anchor")}}, {{cssxref("offset-distance")}}, and `offset-path`. These properties work together to create various motion effects along a path. @@ -48,9 +48,9 @@ offset-position: unset; ### Values - `normal` - - : Indicates that the element does not have an offset starting position and places the element at `(50%, 50%)` of the containing block + - : Indicates that the element does not have an offset starting position and places the element at `50% 50%` of the containing block. This is the default value. - `auto` - - : Indicates that the offset starting position is the top-left corner of the element's box. This is the default value. + - : Indicates that the offset starting position is the top-left corner of the element's box. - {{cssxref("<position>")}} - : Specifies the position as an x/y coordinate to place an element relative to its box edges. The position can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the {{cssxref("length-percentage")}} values are offsets for the preceding keyword value(s). For more explanation of these value types, see {{cssxref("background-position")}}. @@ -114,7 +114,7 @@ In this example, the {{cssxref("offset-path")}} property is used to define the p ### Comparing various offset starting positions -This example visually compares various initial offset starting position of an element when `ray()` is used to specify a value for the {{cssxref("offset-path")}} property. The number inside the element box indicates the element to which CSS is applied as well as the element's anchor point. +This example visually compares various initial offset starting position of an element when {{cssxref("ray", "ray()")}} is used to specify a value for the {{cssxref("offset-path")}} property. The number inside the element box indicates the element to which CSS is applied as well as the element's anchor point. ```html hidden
      @@ -166,7 +166,7 @@ This example visually compares various initial offset starting position of an el ```css hidden .wrap { position: relative; - width: 600px; + width: 80vw; height: 120px; border: 1px solid black; margin: 0 2em 4em 5em; @@ -234,7 +234,7 @@ pre { {{EmbedLiveSample('Comparing various offset starting positions', '100%', 930)}} -Notice that when `offset-position` is `normal`, the starting position of the ray is (`50%, 50%`) of the containing block. Also notice the difference between offset starting positions `auto` and `left top`. The value `auto` places the element such that its anchor point is at the top-left corner of the element box itself, whereas the value `left top` places the element such that the anchor point is the top-left corner of the containing block. +In `box0`, the absence of the `offset-path` property means that an `offset-position` of either `normal` or `auto` has no effect. When `offset-position` is `normal`, the ray starts at the center of the containing block (i.e., `50% 50%`). This is the default starting position of an offset path and is used when no `offset-position` is specified. Notice the difference between offset starting positions `auto` and `left top`. The value `auto` aligns the element's anchor point to its own top-left corner, whereas the value `left top` aligns the element's anchor point to the top-left corner of the containing block. ## Specifications diff --git a/files/en-us/web/css/ray/index.md b/files/en-us/web/css/ray/index.md index 2c2e89778927c4a..075335ef3010705 100644 --- a/files/en-us/web/css/ray/index.md +++ b/files/en-us/web/css/ray/index.md @@ -12,8 +12,6 @@ The **`ray()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Fu ## Syntax ```css -/* offset-path: ray(parameters) */ - /* all parameters specified */ offset-path: ray(50deg closest-corner contain at 100px 20px); @@ -34,9 +32,9 @@ The parameters can be specified in any order. - `` - - : Specifies the length of the line segment, which is the distance between {{cssxref("offset-distance")}} `0%` and `100%`, relative to the containing box. It is an optional parameter (`closest-side` is used if no `` is specified) and accepts one of the following keyword values: + - : Specifies the length of the line segment, which is the distance between {{cssxref("offset-distance")}} `0%` and `100%`, relative to the containing box. This is an optional parameter (`closest-side` is used if no `` is specified). It accepts one of the following keyword values: - `closest-side`: Distance between the ray's starting point and the closest side of the [containing block](/en-US/docs/Web/CSS/Containing_block) of the element. If the ray's starting point lies on an edge of the containing block, the length of the line segment is zero. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. + `closest-side`: Distance between the ray's starting point and the closest side of the [containing block](/en-US/docs/Web/CSS/Containing_block) of the element. If the ray's starting point lies on an edge of the containing block, the length of the line segment is zero. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. This is the default value. `closest-corner`: Distance between the ray's starting point and the closest corner in the element's containing block. If the ray's starting point lies on a corner of the containing block, the length of the line segment is zero. @@ -46,22 +44,21 @@ The parameters can be specified in any order. `sides`: Distance between the ray's starting point and the point where the line segment intersects the containing block's boundary. If the starting point is on or outside the containing block's boundary, the length of the line segment is zero. -> **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support. - - `contain` - - : Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, but never going less than zero. It is an optional parameter. + - : Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, and never less than zero. This is an optional parameter. - `at ` - - : Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for ray's starting position is `offset-position: auto`, which places the element at the `top left` corner of the element's box. + - : Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If included, the `` value must be preceded by the `at` keyword. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for the ray's starting position is `offset-position: normal`, which places the element at the center (or `50% 50%`) of the containing block. ## Description -The `ray()` function allows the positioning of an element along a path using polar coordinates, rather than using the standard rectangular coordinates used by the {{cssxref("translate","translate()")}} function or using animation to move an element along a defined path. The `ray()` function helps to create 2D spatial transitions. +The `ray()` function positions an element along a path by specifying its location in a two-dimensional space through an angle and a distance from a reference point (polar coordinates). This feature makes the `ray()` function useful for creating 2D spatial transitions. For comparison, this approach differs from the method of specifying a point by its horizontal and vertical distances from a fixed origin (rectangular coordinates), which is used by the {{cssxref("translate","translate()")}} function, and from moving an element along a defined path through animation. -The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the element's offset starting position. The default offset starting position of a ray is the default `offset-position` value: `auto`. If `offset-position` is explicitly specified as `auto` or omitted and allowed to default, the offset starting position is the `top left` corner (or `0 0`) of the element's box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the element's containing block. +As `ray()` works in 2D space, it's important to consider both the initial position and orientation of the element. When the `ray()` function is applied as the `offset-path` value on an element, here's how you can control these aspects: -The `` value of the [`offset-path`](/en-US/docs/Web/CSS/offset-path) property provides the reference box for the ray path. +- The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the element's offset starting position. By default, the ray's starting position is determined by the {{cssxref("offset-position")}} value. If `offset-position` is explicitly specified as `normal` (or omitted and allowed to default to `normal`), the element is positioned at the `center` (or `50% 50%`) of its containing block. Specifying `offset-position: auto` sets the starting position at the `top left` corner (or `0 0`) of the element's position. +- The element is initially rotated such that its [inline axis](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) — its direction of text flow — aligns with the angle specified by `ray()`. For example, with the `ray()` angle of `0deg`, which lies on the y-axis pointing up, the element's inline axis is rotated to be vertical to match the ray's angle. The element maintains this rotation throughout its path. To customize this behavior, use the {{cssxref("offset-rotate")}} property, which allows you to specify a different rotation angle or direction for the element, enabling more precise control over its appearance as it follows the path. For example, setting `offset-rotate: 0deg` will remove any rotation applied by `ray()`, aligning back the element's inline axis with the direction of text flow. ## Formal syntax @@ -71,17 +68,21 @@ The `` value of the [`offset-path`](/en-US/docs/Web/CSS/offset-path) ### Defining the angle and starting position for a ray -This example shows how to work with an element's anchor point, how the element gets oriented at the specified ray angle, and how to change a ray's starting point. +This example shows how to work with an element's starting position and how the element's orientation is impacted by the specified ray angle. #### CSS ```css hidden +body { + width: fit-content; + height: fit-content; +} + .container { - position: relative; - width: 600px; + width: 80vw; height: 100px; border: 1px dashed black; - margin: 0 2em 4em 5em; + margin: 0 0.5em 2em 2em; text-align: center; } @@ -109,106 +110,106 @@ pre { .box { background-color: palegreen; border-top: 4px solid black; - position: absolute; opacity: 20%; } +.box:first-of-type { + position: absolute; +} + .box1 { - offset-path: ray(0deg closest-side); + offset-path: ray(0deg); } .box2 { - offset-anchor: 0 0; - offset-path: ray(0deg closest-side); + offset-path: ray(150deg); } .box3 { - offset-anchor: 0 0; - offset-path: ray(150deg closest-side); + offset-rotate: 0deg; + offset-position: 20% 40%; + offset-path: ray(150deg); } .box4 { - offset-rotate: 0deg; - offset-anchor: 0 0; - offset-position: 20% 30%; - offset-path: ray(closest-side 150deg); + offset-position: 0 0; + offset-path: ray(0deg); } .box5 { - offset-rotate: 0deg; - offset-path: ray(100deg closest-side at bottom right); + offset-path: ray(60deg closest-side at bottom right); } ``` ```html hidden +
      /* original */
      0
      0
      - 
      /* original */
      +
      +  offset-path: ray(0deg);
+  /* Default offset starting position is 50% 50% */
+
      0
      1
      - 
      -    offset-path: ray(0deg closest-side);
-    /* Offset starting position is top-left corner */
-
      +
      +  offset-path: ray(150deg);
+
      0
      2
      - 
      -    offset-anchor: 0 0;
-    offset-path: ray(0deg closest-side);
-    /* Anchor and starting position are at the top-left corner */
-
      +
      +  offset-rotate: 0deg;
+  offset-position: 20% 40%;
+  offset-path: ray(150deg);
+
      0
      3
      - 
      -    offset-anchor: 0 0;
-    offset-path: ray(150deg closest-side);
-
      +
      +  offset-position: 0 0;
+  offset-path: ray(0deg);
+
      0
      4
      - 
      -    offset-anchor: 0 0;
-    offset-position: 20% 30%;
-    offset-rotate: 0deg;
-    offset-path: ray(closest-side 150deg);
-
      +
      +  offset-path: ray(60deg closest-side at bottom right);
+
      0
      5
      - 
      -    offset-rotate: 0deg;
-    offset-path: ray(100deg closest-side at bottom right);
-
      ``` Similar to {{cssxref("transform-origin")}}, the default anchor point is at the center of an element. This anchor point can be modified using the [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) property. -In this example, various `offset-anchor` and `offset-path: ray()` values are applied to a box. Results are displayed side-by-side for comparison. The element's containing block is depicted with a dashed border. One border of the box is highlighted to demonstrate different ray starting points and box orientations. After a box is positioned at the ray's starting point, it is oriented in the direction of the specified ray angle. If `offset-position` is not specified, the default offset starting position of a ray is the top-left corner of the element's containing block. +In this example, various `offset-path: ray()` values are applied to the boxes numbered `1` to `5`. The "containing block" of each box is depicted with a dashed border. A faded box in the upper left corner shows each box's default position without any `offset-position` or `offset-path` applied, allowing for a side-by-side comparison. The top of each box is highlighted with a `solid` border to illustrate variations in ray starting points and orientations. After positioning at the ray's starting point, a box aligns with the direction of the specified ray angle. If {{cssxref("offset-position")}} is not specified, the default offset starting position of the ray is the center (or `50% 50%`) of the box's containing block. #### Result -{{EmbedLiveSample('Giving an angle to the ray', '100%', 1000)}} +{{EmbedLiveSample('Giving an angle to the ray', '100%', 1100)}} + +- `box1` gets initially positioned such that its anchor point (its center) is at the default offset starting position (`50% 50%` of the containing block). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `box0` on the left. The box is rotated to match the `0deg` angle along y-axis, pointing up. The box rotation is evident from the orientation of the number inside the box. + +- In `box2`, a greater positive angle of `150deg` is applied to the ray to show how the ray angle works. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle of `150deg`. + +- `box2` and `box3` have the same `offset-path` values. In `box3`, an [`offset-rotate`](/en-US/docs/Web/CSS/offset-rotate) of `0deg` is also applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path, and the element will not rotate in the direction of the path. Notice in `box3` that the ray path is at `150deg`, but the box orientation will not change along the path because of `offset-rotate`. Also note that the `offset-path` property of `box3` does not specify a starting ``, so the ray's starting position is derived from the element's `offset-position`, which in this case is `top 20% left 40%`. + +- The `offset-position` of `box4` is set to top-left corner (`0 0`) of the containing block, and as a result, the element's anchor point and the offset starting position coincide. The ray angle of `0deg` is applied to the element at this starting point. -- `box1` gets initially positioned such that its anchor point (at the center) is at the offset starting position (top-left corner of the box). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `box0` in the background. -- The anchor point of `box2` is changed to the top-left corner (`0px 0px`) using the `offset-anchor` property, and as a result, the element's anchor point and the offset starting position coincide. The ray angle is applied to the element at this starting point. The box is rotated to match the `0deg` angle along y-axis and pointing up. -- With other settings the same as in `box2`, a greater positive angle of `150deg` is applied in `box3`. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle of `150deg`. -- `box3` and `box4` have the same `offset-anchor` and `offset-path` values. In `box4`, however, an [`offset-rotate`](/en-US/docs/Web/CSS/offset-rotate) of `0deg` is applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path, and the element will not rotate in the direction of the path. Notice in `box4` that the ray path is at `150deg`, but the box orientation will not change along the path because of `offset-rotate`. Also note that the `offset-path` property of `box4` does not specify a starting ``, so the ray's starting position is derived from the element's `offset-position`, which in this case is `top 20% left 30%`. -- In `box5`, the `offset-path` property specifies the `at ` value, which places the box at the `bottom` and `right` edge of the element's containing block. +- In `box5`, the `offset-path` property specifies the `at ` value, which places the box at the `bottom` and `right` edge of the element's containing block and `60deg` is applied to the ray's angle. ### Animating an element along the ray @@ -252,10 +253,12 @@ body { } .shape4 { + offset-position: auto; offset-path: ray(120deg closest-corner); } .shape5 { + offset-position: auto; offset-path: ray(120deg farthest-corner); } @@ -300,7 +303,9 @@ offset-rotate: 0deg;
      -
      offset-path: ray(120deg closest-corner)
      +
      +  offset-position: auto;
+  offset-path: ray(120deg closest-corner)
      @@ -308,7 +313,9 @@ offset-rotate: 0deg;
      -
      offset-path: ray(120deg farthest-corner)
      +
      +  offset-position: auto;
+  offset-path: ray(120deg farthest-corner)
      ``` @@ -316,7 +323,7 @@ offset-rotate: 0deg; {{EmbedLiveSample('Animating an element along the ray', '100%', 750)}} -In the first two samples where `offset-path` is applied, notice the orientation of the shape without `offset-rotate` and with `offset-rotate`. The last two `offset-path` samples show the impact of corner `` values: `closest-corner` and `farthest-corner`. The `closest-corner` value creates a very short offset-path because the shape is already at the corner. The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the containing block to the bottom-right corner. +In the first two samples where `offset-path` is applied, notice the orientation of the shape without {{cssxref("offset-rotate")}} and with `offset-rotate`. Both these samples use the default {{cssxref("offset-position")}} value `normal`, and therefore, the path motion starts from `50% 50%`. The last two `offset-path` samples show the impact of corner `` values: `closest-corner` and `farthest-corner`. The `closest-corner` value creates a very short offset-path because the shape is already at the corner (`offset-position: auto`). The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the containing block to the bottom-right corner. ## Specifications From 14ce84d863643d7f729e497781bfd247add7d1ae Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Tue, 20 Feb 2024 14:50:05 +0100 Subject: [PATCH 096/746] Add Firefox 125, update 124, 123 (#32361) * Add Firefox 125, update 124, 123 * Clean up empty headings --- .../mozilla/firefox/releases/123/index.md | 26 +------ .../mozilla/firefox/releases/124/index.md | 2 +- .../mozilla/firefox/releases/125/index.md | 71 +++++++++++++++++++ 3 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 files/en-us/mozilla/firefox/releases/125/index.md diff --git a/files/en-us/mozilla/firefox/releases/123/index.md b/files/en-us/mozilla/firefox/releases/123/index.md index affb827d2affbdb..7ef70254c516381 100644 --- a/files/en-us/mozilla/firefox/releases/123/index.md +++ b/files/en-us/mozilla/firefox/releases/123/index.md @@ -6,7 +6,7 @@ page-type: firefox-release-notes {{FirefoxSidebar}} -This article provides information about the changes in Firefox 123 that affect developers. Firefox 123 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#beta) and ships on [February 20, 2024](https://whattrainisitnow.com/release/?version=123). +This article provides information about the changes in Firefox 123 that affect developers. Firefox 123 was released on [February 20, 2024](https://whattrainisitnow.com/release/?version=123). ## Changes for web developers @@ -16,12 +16,6 @@ This article provides information about the changes in Firefox 123 that affect d - The {{htmlelement("template")}} element now supports a `shadowrootmode` attribute that allows declarative creation of a shadow DOM subtree. The attribute can be set to either `open` or `closed`, which expose or hide JavaScript in the shadow DOM from external code, respectively. These are the same values as the `mode` option of the {{domxref("Element.attachShadow()", "attachShadow()")}} method. ([Firefox bug 1870052](https://bugzil.la/1870052)) -#### Removals - -### CSS - -#### Removals - ### JavaScript - The {{jsxref("Date.parse()")}} global object has had a number of bug fixes to bring it into line with how other browsers parse the values being passed. @@ -29,14 +23,10 @@ This article provides information about the changes in Firefox 123 that affect d - Incomplete time zone (e.g. "1/1/70 gm") or AM/PM (e.g. "1/1/70 10:00 a") are no longer accepted. ([Firefox bug 1870570](https://bugzil.la/1870570)). - Single number dates are now accepted (e.g. `Date.parse("0")` now returns `946684800000` - Sat Jan 01 2000 00:00:00). ([Firefox bug 1870434](https://bugzil.la/1870434)). -#### Removals - ### SVG - The {{SVGElement("linearGradient")}} and {{SVGElement("radialGradient")}} SVG elements now support changing the color space to be `linearRGB` or `sRGB` via the {{SVGAttr("color-interpolation")}} attribute. This can also be applied to the SVG elements via the {{CSSXref("color-interpolation")}} CSS property. -#### Removals - ### HTTP - The [`103 Early Hints`](/en-US/docs/Web/HTTP/Status/103) HTTP [information response](/en-US/docs/Web/HTTP/Status#information_responses) status code is now enabled for [preloading](/en-US/docs/Web/HTML/Attributes/rel/preload) resources that the page is likely to need while the server is still preparing the full response. @@ -44,12 +34,6 @@ This article provides information about the changes in Firefox 123 that affect d Note that support for using the `103 Early Hints` header for [preconnecting](/en-US/docs/Web/HTML/Attributes/rel/preconnect) was added in [Firefox 120](/en-US/docs/Mozilla/Firefox/Releases/120#http). For more details see [Firefox bug 1874445](https://bugzil.la/1874445). -#### Removals - -### Security - -#### Removals - ### APIs - The [Web Authentication API](/en-US/docs/Web/API/Web_Authentication_API) now supports cross-origin credential creation. @@ -67,10 +51,6 @@ This article provides information about the changes in Firefox 123 that affect d The `IDBLocaleAwareKeyRange` interface has been removed ([Firefox bug 1730706](https://bugzil.la/1730706)). -### WebAssembly - -#### Removals - ### WebDriver conformance (WebDriver BiDi, Marionette) #### WebDriver BiDi @@ -89,10 +69,6 @@ The `IDBLocaleAwareKeyRange` interface has been removed ([Firefox bug 1730706](h - Addition of fhe {{WebExtAPIRef("contextualIdentities.move")}} function enables items to be moved in the list of contextual identities. This function enables extensions to customize the order in which contextual identities display in the UI ([Firefox bug 1333395](https://bugzil.la/1333395)). -### Removals - -### Other - ## Experimental web features These features are newly shipped in Firefox 123 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. diff --git a/files/en-us/mozilla/firefox/releases/124/index.md b/files/en-us/mozilla/firefox/releases/124/index.md index b6afbbe48f70336..eaad303b7757857 100644 --- a/files/en-us/mozilla/firefox/releases/124/index.md +++ b/files/en-us/mozilla/firefox/releases/124/index.md @@ -6,7 +6,7 @@ page-type: firefox-release-notes {{FirefoxSidebar}} -This article provides information about the changes in Firefox 124 that affect developers. Firefox 124 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [March 19, 2024](https://whattrainisitnow.com/release/?version=124). +This article provides information about the changes in Firefox 124 that affect developers. Firefox 124 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#beta) and ships on [March 19, 2024](https://whattrainisitnow.com/release/?version=124). ## Changes for web developers diff --git a/files/en-us/mozilla/firefox/releases/125/index.md b/files/en-us/mozilla/firefox/releases/125/index.md new file mode 100644 index 000000000000000..ac7eca9671d4653 --- /dev/null +++ b/files/en-us/mozilla/firefox/releases/125/index.md @@ -0,0 +1,71 @@ +--- +title: Firefox 125 for developers +slug: Mozilla/Firefox/Releases/125 +page-type: firefox-release-notes +--- + +{{FirefoxSidebar}} + +This article provides information about the changes in Firefox 125 that affect developers. Firefox 125 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [April 16, 2024](https://whattrainisitnow.com/release/?version=125). + +## Changes for web developers + +### Developer Tools + +### HTML + +#### Removals + +### CSS + +#### Removals + +### JavaScript + +#### Removals + +### SVG + +#### Removals + +### HTTP + +#### Removals + +### Security + +#### Removals + +### APIs + +#### DOM + +#### Media, WebRTC, and Web Audio + +#### Removals + +### WebAssembly + +#### Removals + +### WebDriver conformance (WebDriver BiDi, Marionette) + +#### General + +#### WebDriver BiDi + +#### Marionette + +## Changes for add-on developers + +### Removals + +### Other + +## Experimental web features + +These features are newly shipped in Firefox 125 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. + +## Older versions + +{{Firefox_for_developers(124)}} From fd61f4e87793c2fe768d6c05b5ff9ca252f0d8a4 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 21 Feb 2024 01:07:35 +0800 Subject: [PATCH 097/746] fix(ci/interfacedata-updater): remove cache function (#32319) --- .github/workflows/interfacedata-updater.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/interfacedata-updater.yml b/.github/workflows/interfacedata-updater.yml index c02f95d3f87d9c9..1ba2d59f2dd6404 100644 --- a/.github/workflows/interfacedata-updater.yml +++ b/.github/workflows/interfacedata-updater.yml @@ -22,7 +22,6 @@ jobs: uses: actions/setup-node@v4 with: node-version-file: "mdn-content/.nvmrc" - cache: yarn - name: Checkout webref uses: actions/checkout@v4 From c2a1dbf93d8fc8eb27e5725bcf3926f308060cf9 Mon Sep 17 00:00:00 2001 From: ilyaboka Date: Wed, 21 Feb 2024 01:19:16 +0400 Subject: [PATCH 098/746] Added missing space to the accessibility page (#32331) Added missing space in the accessibility page --- .../index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md b/files/en-us/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md index bf2e69d6d83051d..9ba882a08cf72d3 100644 --- a/files/en-us/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md +++ b/files/en-us/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md @@ -68,7 +68,7 @@ Most operating systems such as Windows 10, have accessibility options that are s #### Turn off animations in the operating system -In the Windows10 operating system, the user has an ability to turn off animations. This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings. +In the Windows 10 operating system, the user has an ability to turn off animations. This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings. ![Screen shot showing how to turn off animations in Windows10](turnoffanimationsinwindows.png) From d55e9103a2349804a59d0f96e13202c7f4c6348c Mon Sep 17 00:00:00 2001 From: Prakhar Pal <21095386+prakhar-pal@users.noreply.github.com> Date: Wed, 21 Feb 2024 02:53:03 +0530 Subject: [PATCH 099/746] fix: scalegrid link (#32323) * fix: scalegrid link https://scalegrid.io/pricing.html returns a 404 page. Additionally, we don't need to point to pricing page directly. We can instead point to home page of scalegrid as we do for Compose and ObjectRocket. * fix: typo --------- Co-authored-by: Prakhar Pal --- .../en-us/learn/server-side/express_nodejs/mongoose/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md index 79ab56c718a4750..314e69c71aae4e6 100644 --- a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md @@ -563,7 +563,7 @@ const modelInstances = await SomeModel.find().exec(); Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the _LocalLibrary_ website. The very first thing we want to do is set up a MongoDB database that we can use to store our library data. -For this tutorial, we're going to use the [MongoDB Atlas](https://www.mongodb.com/atlas/database) cloud-hosted sandbox database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular _database as a service_ vendor that you might reasonably choose for your production database (other popular choices at the time of writing include [Compose](https://www.compose.com/), [ScaleGrid](https://scalegrid.io/pricing.html) and [ObjectRocket](https://www.objectrocket.com/)). +For this tutorial, we're going to use the [MongoDB Atlas](https://www.mongodb.com/atlas/database) cloud-hosted sandbox database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular _database as a service_ vendor that you might reasonably choose for your production database (other popular choices at the time of writing include [Compose](https://www.compose.com/), [ScaleGrid](https://scalegrid.io/) and [ObjectRocket](https://www.objectrocket.com/)). > **Note:** If you prefer, you can set up a MongoDB database locally by downloading and installing the [appropriate binaries for your system](https://www.mongodb.com/download-center/community/releases). The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting. > In the [Express Tutorial Part 7: Deploying to Production](/en-US/docs/Learn/Server-side/Express_Nodejs/deployment) tutorial we host both the application and database on [Railway](https://railway.app/), but we could equally well have used a database on [MongoDB Atlas](https://www.mongodb.com/atlas/database). @@ -602,7 +602,7 @@ After logging in, you'll be taken to the [home](https://cloud.mongodb.com/v2) sc 5. This will open the following screen. Click on the **Go to Overview** button. ![Go to Databases after setting up Access Rules on MongoDB Atlas](mongodb_atlas_-_accessrules.jpg) -6. You will return to the _Overview_ screen. Click the on the _Database_ section under the _Deployment_ menu on the left. Click the **Browse Collections** button. +6. You will return to the _Overview_ screen. Click on the _Database_ section under the _Deployment_ menu on the left. Click the **Browse Collections** button. ![Setup a collection on MongoDB Atlas.](mongodb_atlas_-_createcollection.jpg) 7. This will open the _Collections_ section. Click the **Add My Own Data** button. From 54aa017b1d631f9b0ef90ef6361574843b158bba Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Tue, 20 Feb 2024 15:28:13 -0600 Subject: [PATCH 100/746] Update link to canvas size test results (#32256) * Update link to canvas size test results * Fix canvas size test results link URL --- files/en-us/web/html/element/canvas/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/canvas/index.md b/files/en-us/web/html/element/canvas/index.md index 2d55b8a0c58dced..55d8937913b2b99 100644 --- a/files/en-us/web/html/element/canvas/index.md +++ b/files/en-us/web/html/element/canvas/index.md @@ -38,7 +38,7 @@ It is better to specify your canvas dimensions by setting the `width` and `heigh ### Maximum canvas size -The exact maximum size of a `` element depends on the browser and environment. While in most cases the maximum dimensions exceed 10,000 x 10,000 pixels, notably iOS devices limit the canvas size to only 4,096 x 4,096 pixels. See [canvas size limits in different browsers and devices](https://github.com/jhildenbiddle/canvas-size#test-results) (2021). +The exact maximum size of a `` element depends on the browser and environment. While in most cases the maximum dimensions exceed 10,000 x 10,000 pixels, notably iOS devices limit the canvas size to only 4,096 x 4,096 pixels. See [canvas size limits in different browsers and devices](https://jhildenbiddle.github.io/canvas-size/#/?id=test-results). > **Note:** Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work. From a7ca7b114d94060d1111cd25b431d7891143d349 Mon Sep 17 00:00:00 2001 From: Natalia Date: Wed, 21 Feb 2024 02:30:39 -0300 Subject: [PATCH 101/746] Document Cyclic Prototype Type Error (#32372) * Kickstart the article * Looking good * Improve writing * Indent a line * Update index.md --------- Co-authored-by: Joshua Chen --- .../errors/cyclic_prototype/index.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 files/en-us/web/javascript/reference/errors/cyclic_prototype/index.md diff --git a/files/en-us/web/javascript/reference/errors/cyclic_prototype/index.md b/files/en-us/web/javascript/reference/errors/cyclic_prototype/index.md new file mode 100644 index 000000000000000..ff6ff989dfc7adf --- /dev/null +++ b/files/en-us/web/javascript/reference/errors/cyclic_prototype/index.md @@ -0,0 +1,50 @@ +--- +title: "TypeError: can't set prototype: it would cause a prototype chain cycle" +slug: Web/JavaScript/Reference/Errors/Cyclic_prototype +page-type: javascript-error +--- + +{{jsSidebar("Errors")}} + +The JavaScript exception "TypeError: can't set prototype: it would cause a prototype chain cycle" occurs when an object's prototype is set to an object such that the [prototype chain](/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#the_prototype_chain) becomes circular (`a` and `b` both have each other in their prototype chains). + +## Message + +```plain +TypeError: Cyclic __proto__ value (V8-based) +TypeError: can't set prototype: it would cause a prototype chain cycle (Firefox) +TypeError: cyclic __proto__ value (Safari) +``` + +## Error type + +{{jsxref("TypeError")}} + +## What went wrong? + +A loop, also called a cycle, was introduced in a prototype chain. That means that when walking this prototype chain, the same place would be accessed over and over again, instead of eventually reaching `null`. + +This error is thrown at the time of setting the prototype. In an operation like `Object.setPrototypeOf(a, b)`, if `a` already exists in the prototype chain of `b`, this error will be thrown. + +## Examples + +```js example-bad +const a = {}; +Object.setPrototypeOf(a, a); +// TypeError: can't set prototype: it would cause a prototype chain cycle +``` + +```js example-bad +const a = {}; +const b = {}; +const c = {}; +Object.setPrototypeOf(a, b); +Object.setPrototypeOf(b, c); +Object.setPrototypeOf(c, a); +// TypeError: can't set prototype: it would cause a prototype chain cycle +``` + +## See also + +- [Object Prototypes](/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) +- [Inheritance and the prototype chain](/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) From 05a463a3bc1af6e1b1e0d6a273582d954ae00ed0 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 21 Feb 2024 14:13:26 +0530 Subject: [PATCH 102/746] Synchronize with BCD v5.5.11 (#32371) Co-authored-by: OnkarRuikar --- files/en-us/web/api/identitycredential/index.md | 2 +- .../web/api/identitycredential/isautoselected/index.md | 3 ++- files/en-us/web/css/-moz-orient/index.md | 4 ++-- files/en-us/web/css/-moz-user-focus/index.md | 2 +- files/en-us/web/css/resize/index.md | 4 ++-- files/en-us/web/css/text-align/index.md | 6 +++--- files/en-us/web/css/touch-action/index.md | 2 +- files/en-us/web/css/writing-mode/index.md | 4 ++-- .../web/html/element/script/type/speculationrules/index.md | 2 +- files/en-us/web/html/element/ul/index.md | 4 ++-- files/en-us/web/http/headers/digest/index.md | 3 ++- files/en-us/web/http/headers/permissions-policy/index.md | 2 +- .../headers/permissions-policy/screen-wake-lock/index.md | 4 +--- files/en-us/web/http/headers/set-login/index.md | 2 ++ files/en-us/web/http/headers/want-digest/index.md | 3 ++- 15 files changed, 25 insertions(+), 22 deletions(-) diff --git a/files/en-us/web/api/identitycredential/index.md b/files/en-us/web/api/identitycredential/index.md index 72d14511a244557..fe4909d9b623b28 100644 --- a/files/en-us/web/api/identitycredential/index.md +++ b/files/en-us/web/api/identitycredential/index.md @@ -19,7 +19,7 @@ A successful {{domxref("CredentialsContainer.get", "navigator.credentials.get()" _Inherits properties from its ancestor, {{domxref("Credential")}}._ -- {{domxref("IdentityCredential.isAutoSelected")}} {{ReadOnlyInline}} {{experimental_inline}} +- {{domxref("IdentityCredential.isAutoSelected")}} {{ReadOnlyInline}} {{experimental_inline}} {{non-standard_inline}} - : A boolean value that indicates whether the federated sign-in was carried out using [auto-reauthentication](/en-US/docs/Web/API/FedCM_API/RP_sign-in#auto-reauthentication) (i.e. without user mediation) or not. - {{domxref("IdentityCredential.token")}} {{experimental_inline}} - : Returns the token used to validate the associated sign-in. diff --git a/files/en-us/web/api/identitycredential/isautoselected/index.md b/files/en-us/web/api/identitycredential/isautoselected/index.md index 0dd61b5a3dec234..e6fb0c36d5f4f92 100644 --- a/files/en-us/web/api/identitycredential/isautoselected/index.md +++ b/files/en-us/web/api/identitycredential/isautoselected/index.md @@ -5,10 +5,11 @@ slug: Web/API/IdentityCredential/isAutoSelected page-type: web-api-instance-property status: - experimental + - non-standard browser-compat: api.IdentityCredential.isAutoSelected --- -{{securecontext_header}}{{APIRef("FedCM API")}}{{SeeCompatTable}} +{{securecontext_header}}{{APIRef("FedCM API")}}{{SeeCompatTable}}{{non-standard_header}} The **`isAutoSelected`** read-only property of the {{domxref("IdentityCredential")}} interface indicates whether the federated sign-in flow was carried out using [auto-reauthentication](/en-US/docs/Web/API/FedCM_API/RP_sign-in#auto-reauthentication) (i.e. without user mediation) or not. diff --git a/files/en-us/web/css/-moz-orient/index.md b/files/en-us/web/css/-moz-orient/index.md index f4d2a17d1f6c264..6bbaa7d48829e84 100644 --- a/files/en-us/web/css/-moz-orient/index.md +++ b/files/en-us/web/css/-moz-orient/index.md @@ -17,9 +17,9 @@ The `-moz-orient` property is specified as one of the keyword values chosen from ### Values -- `inline` +- `inline` {{non-standard_inline}} - : The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes. -- `block` +- `block` {{non-standard_inline}} - : The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes. - `horizontal` - : The element is rendered horizontally. diff --git a/files/en-us/web/css/-moz-user-focus/index.md b/files/en-us/web/css/-moz-user-focus/index.md index dd3fa1546cd0d2b..fea22c919d770d5 100644 --- a/files/en-us/web/css/-moz-user-focus/index.md +++ b/files/en-us/web/css/-moz-user-focus/index.md @@ -8,7 +8,7 @@ status: browser-compat: css.properties.-moz-user-focus --- -{{CSSRef}} {{deprecated_header}} +{{CSSRef}} {{deprecated_header}}{{non-standard_header}} The **`-moz-user-focus`** [CSS](/en-US/docs/Web/CSS) property is used to indicate whether an element can have the focus. diff --git a/files/en-us/web/css/resize/index.md b/files/en-us/web/css/resize/index.md index 4c05c15972968e8..2ac8ce377d9ee2f 100644 --- a/files/en-us/web/css/resize/index.md +++ b/files/en-us/web/css/resize/index.md @@ -47,9 +47,9 @@ The `resize` property is specified as a single keyword value from the list below - : The element displays a mechanism for allowing the user to resize it in the _horizontal_ direction. - `vertical` - : The element displays a mechanism for allowing the user to resize it in the _vertical_ direction. -- `block` {{experimental_inline}} +- `block` - : The element displays a mechanism for allowing the user to resize it in the _block_ direction (either horizontally or vertically, depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value). -- `inline` {{experimental_inline}} +- `inline` - : The element displays a mechanism for allowing the user to resize it in the _inline_ direction (either horizontally or vertically, depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value). ## Formal definition diff --git a/files/en-us/web/css/text-align/index.md b/files/en-us/web/css/text-align/index.md index 6c9d1fbf1dc995c..40587ef5f1fc297 100644 --- a/files/en-us/web/css/text-align/index.md +++ b/files/en-us/web/css/text-align/index.md @@ -48,11 +48,11 @@ The `text-align` property is specified in one of the following ways: - : The same as `left` if direction is left-to-right and `right` if direction is right-to-left. - `end` - : The same as `right` if direction is left-to-right and `left` if direction is right-to-left. -- `left` +- `left` {{deprecated_inline}} {{non-standard_inline}} - : The inline contents are aligned to the left edge of the line box. -- `right` +- `right` {{deprecated_inline}} {{non-standard_inline}} - : The inline contents are aligned to the right edge of the line box. -- `center` +- `center` {{deprecated_inline}} {{non-standard_inline}} - : The inline contents are centered within the line box. - `justify` - : The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. diff --git a/files/en-us/web/css/touch-action/index.md b/files/en-us/web/css/touch-action/index.md index 05e0b4acf3822f0..4d9fcb0dba4763f 100644 --- a/files/en-us/web/css/touch-action/index.md +++ b/files/en-us/web/css/touch-action/index.md @@ -55,7 +55,7 @@ The `touch-action` property may be specified as either: - : Enable single-finger vertical panning gestures. May be combined with **pan-x**, **pan-left**, **pan-right** and/or **pinch-zoom**. - `manipulation` - : Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of **click** events when the user taps the screen. This is an alias for "**pan-x pan-y pinch-zoom**" (which, for compatibility, is itself still valid). -- `pan-left`, `pan-right`, `pan-up`, `pan-down` {{experimental_inline}} +- `pan-left`, `pan-right`, `pan-up`, `pan-down` - : Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (**pan-up**) means that the user is dragging their finger downward on the screen surface, and likewise **pan-left** means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, **"pan-left pan-right**" is invalid since "**pan-x**" is simpler, but "**pan-left pan-down**" is valid). - `pinch-zoom` - : Enable multi-finger panning and zooming of the page. This may be combined with any of the **pan-** values. diff --git a/files/en-us/web/css/writing-mode/index.md b/files/en-us/web/css/writing-mode/index.md index eb1986ff661f66a..e8d6d500fcbbc27 100644 --- a/files/en-us/web/css/writing-mode/index.md +++ b/files/en-us/web/css/writing-mode/index.md @@ -39,9 +39,9 @@ The `writing-mode` property is specified as one of the values listed below. The - : For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the left of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the right of the previous line. - `vertical-lr` - : For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the right of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the left of the previous line. -- `sideways-rl` {{experimental_inline}} +- `sideways-rl` - : For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right. -- `sideways-lr` {{experimental_inline}} +- `sideways-lr` - : For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left. - `lr` {{deprecated_inline}} - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. diff --git a/files/en-us/web/html/element/script/type/speculationrules/index.md b/files/en-us/web/html/element/script/type/speculationrules/index.md index 39778a9b9aa7613..eeb93695c8d5ad6 100644 --- a/files/en-us/web/html/element/script/type/speculationrules/index.md +++ b/files/en-us/web/html/element/script/type/speculationrules/index.md @@ -79,7 +79,7 @@ Specifically, each object can contain the following properties: - : A string representing the source of the URLs to which the rule applies. Possible values are: - `"list"` - : Denotes that the URLs will come from a specific list. -- `"urls"` +- `"urls"` {{experimental_inline}} - : An array of strings representing the list of URLs to apply the rule to. These can be absolute or relative URLs. Relative URLs will be parsed relative to the document base URL (if inline in a document) or relative to the external resource URL (if externally fetched). - `"requires"` {{optional_inline}} {{experimental_inline}} diff --git a/files/en-us/web/html/element/ul/index.md b/files/en-us/web/html/element/ul/index.md index 1e77703cd93cca5..73c80a0a381222c 100644 --- a/files/en-us/web/html/element/ul/index.md +++ b/files/en-us/web/html/element/ul/index.md @@ -15,13 +15,13 @@ The **`
        `** [HTML](/en-US/docs/Web/HTML) element represents an unordered list This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). -- `compact` {{Deprecated_inline}} {{Non-standard_Inline}} +- `compact` {{Deprecated_inline}} - : This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the {{glossary("user agent")}}, and it doesn't work in all browsers. > **Warning:** Do not use this attribute, as it has been deprecated: use [CSS](/en-US/docs/Web/CSS) instead. To give a similar effect as the `compact` attribute, the CSS property {{cssxref("line-height")}} can be used with a value of `80%`. -- `type` {{Deprecated_inline}} {{Non-standard_Inline}} +- `type` {{Deprecated_inline}} - : This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are: diff --git a/files/en-us/web/http/headers/digest/index.md b/files/en-us/web/http/headers/digest/index.md index 0d285c0edd4f912..6e05e38d0902cc0 100644 --- a/files/en-us/web/http/headers/digest/index.md +++ b/files/en-us/web/http/headers/digest/index.md @@ -4,10 +4,11 @@ slug: Web/HTTP/Headers/Digest page-type: http-header status: - deprecated + - non-standard browser-compat: http.headers.Digest --- -{{HTTPSidebar}}{{Deprecated_Header}} +{{HTTPSidebar}}{{Deprecated_Header}}{{non-standard_header}} The **`Digest`** response HTTP header provides a {{Glossary("digest")}} of the _selected representation_ of the requested resource. diff --git a/files/en-us/web/http/headers/permissions-policy/index.md b/files/en-us/web/http/headers/permissions-policy/index.md index 429f2d65abe0f8a..eb10a6f50f51c86 100644 --- a/files/en-us/web/http/headers/permissions-policy/index.md +++ b/files/en-us/web/http/headers/permissions-policy/index.md @@ -169,7 +169,7 @@ You can specify - : Controls whether the current document is allowed to use the [Web Authentication API](/en-US/docs/Web/API/Web_Authentication_API) to retrieve already stored public-key credentials, i.e., via {{domxref("CredentialsContainer.get", "navigator.credentials.get({publicKey: ..., ...})")}}. -- {{httpheader('Permissions-Policy/screen-wake-lock', 'screen-wake-lock')}} {{Experimental_Inline}} +- {{httpheader('Permissions-Policy/screen-wake-lock', 'screen-wake-lock')}} - : Controls whether the current document is allowed to use [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) to indicate that device should not turn off or dim the screen. diff --git a/files/en-us/web/http/headers/permissions-policy/screen-wake-lock/index.md b/files/en-us/web/http/headers/permissions-policy/screen-wake-lock/index.md index 64a261cbd9d55f8..540516ab3364ae7 100644 --- a/files/en-us/web/http/headers/permissions-policy/screen-wake-lock/index.md +++ b/files/en-us/web/http/headers/permissions-policy/screen-wake-lock/index.md @@ -2,12 +2,10 @@ title: "Permissions-Policy: screen-wake-lock" slug: Web/HTTP/Headers/Permissions-Policy/screen-wake-lock page-type: http-permissions-policy-directive -status: - - experimental browser-compat: http.headers.Permissions-Policy.screen-wake-lock --- -{{HTTPSidebar}} {{SeeCompatTable}} +{{HTTPSidebar}} The HTTP {{HTTPHeader("Permissions-Policy")}} header **`screen-wake-lock`** directive controls whether the current document is allowed to use [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) to indicate that the device should not dim or turn off the screen. diff --git a/files/en-us/web/http/headers/set-login/index.md b/files/en-us/web/http/headers/set-login/index.md index fa1701333207d56..9f29e864490faf1 100644 --- a/files/en-us/web/http/headers/set-login/index.md +++ b/files/en-us/web/http/headers/set-login/index.md @@ -2,6 +2,8 @@ title: Set-Login slug: Web/HTTP/Headers/Set-Login page-type: http-header +status: + - experimental browser-compat: http.headers.Set-Login --- diff --git a/files/en-us/web/http/headers/want-digest/index.md b/files/en-us/web/http/headers/want-digest/index.md index 17fdcdce8b7b8c2..97bc2704f652d56 100644 --- a/files/en-us/web/http/headers/want-digest/index.md +++ b/files/en-us/web/http/headers/want-digest/index.md @@ -4,10 +4,11 @@ slug: Web/HTTP/Headers/Want-Digest page-type: http-header status: - deprecated + - non-standard browser-compat: http.headers.Want-Digest --- -{{HTTPSidebar}}{{Deprecated_Header}} +{{HTTPSidebar}}{{Deprecated_Header}}{{non-standard_header}} The **`Want-Digest`** HTTP header is primarily used in a request, to ask the server to provide a {{Glossary("digest")}} of the requested resource using the {{HTTPHeader("Digest")}} response header. From 850336fa24dd22e5ccf253dc8091cfbc8022bf14 Mon Sep 17 00:00:00 2001 From: Smitty Date: Wed, 21 Feb 2024 04:00:01 -0500 Subject: [PATCH 103/746] Update window.blur() to reflect that it does nothing (#32374) --- files/en-us/web/api/window/blur/index.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/window/blur/index.md b/files/en-us/web/api/window/blur/index.md index 73489103e0d660b..afa368bf8091e67 100644 --- a/files/en-us/web/api/window/blur/index.md +++ b/files/en-us/web/api/window/blur/index.md @@ -3,12 +3,18 @@ title: "Window: blur() method" short-title: blur() slug: Web/API/Window/blur page-type: web-api-instance-method +status: + - deprecated browser-compat: api.Window.blur --- {{APIRef}} -Shifts focus away from the window. +The **`Window.blur()`** method does nothing. + +> **Note:** Historically, this method was the programmatic equivalent of the user shifting focus away +> from the current window. This behavior was removed due to hostile sites abusing this functionality. +> In Firefox, you can enable the old behavior with the `dom.disable_window_flip` preference. ## Syntax @@ -30,11 +36,6 @@ None ({{jsxref("undefined")}}). window.blur(); ``` -## Notes - -The window\.blur() method is the programmatic equivalent of the user shifting focus away -from the current window. - ## Specifications {{Specifications}} From 44d284b9dbc719fd2b32970df28c9032c075cd78 Mon Sep 17 00:00:00 2001 From: Nik K Date: Wed, 21 Feb 2024 11:13:45 -0500 Subject: [PATCH 104/746] Clearer `log()` example (#32226) * Clearer `log()` example * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya * Fix embed, address feedback --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/log/index.md | 59 +++++++------------------------- 1 file changed, 13 insertions(+), 46 deletions(-) diff --git a/files/en-us/web/css/log/index.md b/files/en-us/web/css/log/index.md index c1a974231e74e66..dace8c56eca139c 100644 --- a/files/en-us/web/css/log/index.md +++ b/files/en-us/web/css/log/index.md @@ -45,76 +45,43 @@ The natural logarithm (base `e`) of `value`, when `base` is not defined. ## Examples -### Sizes based on `log()` function +### Using the `log()` function on a logarithmic scale -This example shows how you can use the `log()` function to calculate sizes. +This example illustrates how the `log()` function can be used to visualize data values by using a [logarithmic scale](https://en.wikipedia.org/wiki/Logarithmic_scale). The width of each bar in this example is relative to its data value on a logarithmic scale with base 10. On each element, its value is assigned to a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties) named `--value`, which is then used by the `.bar` class to calculate its width. #### HTML ```html -
        -
        50px
        -
        100px
        -
        150px
        -
        200px
        -
        +
        50
        +
        100
        +
        500
        +
        10,000
        +
        2,000,000
        ``` #### CSS -Here we are using [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes. - -- `--size-1` is calculated by multiplying `--size-0` (50px) by the value of `log(7.389)` (2) which results in 100px. -- `--size-2` is calculated by multiplying `--size-0` (50px) by the value of `log(8, 2)` (3) which results in 150px. -- `--size-3` is calculated by multiplying `--size-0` (50px) by the value of `log(625, 5)` (4) which results in 200px. - ```css -:root { - --size-0: 50px; - --size-1: calc(var(--size-0) * log(7.389)); /* 100px */ - --size-2: calc(var(--size-0) * log(8, 2)); /* 150px */ - --size-3: calc(var(--size-0) * log(625, 5)); /* 200px */ +.bar { + width: calc(log(var(--value), 10) * 2em); } ``` ```css hidden -.boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-around; -} - -.box { - width: var(--size-0); - height: var(--size-0); +.bar { + height: 2em; background-color: tomato; color: white; display: flex; align-items: center; justify-content: center; -} -``` - -The sizes are then applied as the `width` and `height` values of the selectors. - -```css -.one { - width: var(--size-1); - height: var(--size-1); -} -.two { - width: var(--size-2); - height: var(--size-2); -} -.three { - width: var(--size-3); - height: var(--size-3); + margin: 0.25em 0; } ``` #### Result -{{EmbedLiveSample('Sizes based on log() function', '100%', '220px')}} +{{EmbedLiveSample('Using the log() function on a logarithmic scale', '100%', '200px')}} ## Specifications From dd5d9ff83a9b6155ccd02b64053ffd37ba74b329 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 21 Feb 2024 09:59:43 -0800 Subject: [PATCH 105/746] New guide: container style queries (#32254) * New guide: using container style queries * slug typo * more content * more * more * finish size. start on style * clarification of when type is needed * perf and containment * perf and containment * header levels. Explanation of not-supported declarations * header levels. Explanation of not-supported declarations * rewire intro. change outline basically. * rewrite intro. rewrite size queries. rewrite naming container queries * rewrite style container query * container name. compare to @supports. explain @property * csq for custom properties with and without a value * example * https://codepen.io/estelle/pen/vYPQZeV * finished * name/slug change * name/slug change * tweaks * tweaks * more tweaks * more tweaks * typo * Apply suggestions from code review Co-authored-by: Chris Mills * adjustments made based on the review * adjustments made based on the review * last adjustments made based on the review * fix example * Apply suggestions from code review Co-authored-by: Chris Mills * Apply suggestions from code review Co-authored-by: Chris Mills * Apply suggestions from code review Co-authored-by: Chris Mills * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md Co-authored-by: Chris Mills * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md * Update files/en-us/web/css/css_containment/container_size_and_style_queries/index.md * Make outline the current value of theme in example. Add explanatory text for that. * Apply suggestions from code review Co-authored-by: Chris Mills * edits for final comments --------- Co-authored-by: Chris Mills --- .../container_size_and_style_queries/index.md | 435 ++++++++++++++++++ 1 file changed, 435 insertions(+) create mode 100644 files/en-us/web/css/css_containment/container_size_and_style_queries/index.md diff --git a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md new file mode 100644 index 000000000000000..d3c2c9fc86683bc --- /dev/null +++ b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md @@ -0,0 +1,435 @@ +--- +title: Using container size and style queries +slug: Web/CSS/CSS_containment/Container_size_and_style_queries +page-type: guide +browser-compat: css.at-rules.container +--- + +{{CSSRef}}{{SeeCompatTable}} + +[Container queries](/en-US/docs/Web/CSS/CSS_containment/Container_queries) enable you to apply styles to elements nested within a specific container based on the features of that container. The query returns true or false depending on whether the query condition is true for the container. + +Container queries are similar to [media queries](/en-US/docs/Web/CSS/CSS_media_queries). The {{cssxref("@media")}} at-rule enables applying styles to elements based on viewport size or other device characteristics. Similarly, the {{cssxref("@container")}} at-rule enables applying styles to elements based on a containing element's size or other style features, rather than the viewport's. Container queries have the same syntax rules and logical operators as media queries. + +```css +@container { + /* */ +} +``` + +There are two types of container queries: _container size queries_ and _container style queries_: + +- **Container size queries** + + - : Size queries enable applying styles to elements based on the current [size](/en-US/docs/Web/CSS/@container#descriptors) of a containing element, including the orientation and aspect ratio. The containing elements need to be explicitly declared as _size query containers_. + +- **Container style queries** + - : Style queries enable applying styles to elements based on a containing element's style features. Any non-empty element can be a style query container. Currently, the only style feature supported by style queries is CSS [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). In this case, the query returns true or false depending on the computed value of the containing element's custom properties. When container style queries are fully supported, they will enable you to apply styles to any element's descendants based on any property, declaration, or computed value — for example if the container is `display: inline flex` or has a non-transparent background color. + +In this guide, we learn the basics of container queries by looking at: + +1. [container size queries](#container-size-queries), +2. [naming containers](#naming_containers) to limit their scope, and +3. using the `style()` functional notation within the {{cssxref("@container")}} at rule's `` to create [style queries with custom properties](#style_queries_for_custom_properties). + +## Container size queries + +Container size queries are filtered by a size condition. The associated styles are applied to contained elements if the container element has been declared to be a container and the container condition is true for that element. An element's size container is the nearest ancestor with containment. + +Elements are declared as _size query containers_ by setting their {{cssxref("container-type")}} property (or the {{cssxref("container")}} shorthand) to `size` or `inline-size`. + +```css +@container (orientation: landscape) { + /* styles applied to descendants of this size container */ +} + +.sizeContainer { + container-type: size; +} +``` + +Declaring size query containers adds [containment](/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment) to them. This is a performance necessity — querying the size of every element in the DOM, all the time, would be bad for performance and user experience. Additionally, if a descendant style changed the size of the container element, an infinite loop could occur. + +In a container size query, the `` includes one or more ``s. Each size query includes a size feature name, a comparison operator, and a value. The size features that can be queried are limited to `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, and `orientation`. The boolean syntax and logic combining one or more ``s is the same as for [`@media`](/en-US/docs/Web/CSS/@media) size feature queries. + +```css +form { + container-type: inline-size; +} + +@container (10em <= width <= 20em) { + /* styles */ +} +``` + +The `` in this example contains a single `` — `(10em <= width <= 20em)`. In this case, all {{htmlelement("form")}} elements are potential matches for any unnamed container query. The styles declared within our container query apply to the descendants of all forms between `10em` and `30em` wide, inclusive. + +## Naming containers + +A `` can include an optional case-sensitive {{cssxref("container-name")}}. In the form example, we could have limited the elements matched by the query by adding a name to the `` and then setting the {{cssxref("container-name")}} property with its value equal to the same name on the form elements we want to match. + +The optional `` set within the query condition filters the set of query containers considered to just those with a matching query container name. The {{cssxref("container-name")}} property specifies a list of query container names that can be used by `@container` rules to filter which query containers are targeted. Names enable querying aspects of a specific container, even if the container is not a direct parent. + +```css +@container { + /* */ +} +``` + +Once you've added names to your `@container` at rules, you can use the {{cssxref("container-name")}} property or the {{cssxref("container")}} shorthand to apply a space-separated list of names to container elements. Styles contained inside the named `@container` at rules will only be applied to matching elements inside size query containers with the same names set on them. The `` is a case-sensitive {{cssxref("ident")}}. + +```css +@container card (orientation: landscape) { + /* styles */ +} + +.cards li { + container-type: inline-size; + container-name: card; +} +``` + +This example size query is limited to elements with a `container-name` of `card` applied to them. In this example, the styles within the container query style block will apply to the descendants of all {{htmlelement("li")}} elements nested within an element with a class of `cards` with a width that is greater than their height. Note that if there are other elements with `container-name: card` applied to them that match the size query, the styles will also be applied to those elements' descendants. + +```css +@container wide (orientation: landscape) and (min-width: 20em) { + /* styles applied to descendants of .sizeContainer if size features match */ +} + +@container narrow (orientation: portrait) or (max-width: 20em) { + /* styles applied to descendants of .sizeContainer if size features match */ +} + +.sizeContainer { + container-type: size; + container-name: wide narrow; +} +``` + +In this container size query example, the element has two container names. The descendants of any elements with `class="sizeContainer"` will get the styles from the `wide` or `narrow` query applied (or both if that element is exactly a 20em square). + +Container names also enable querying styles from elements that aren't a direct parent. When a containment context is given a name, it can be specifically targeted using the `@container` at-rule instead of the nearest ancestor with containment. + +Set `container-name: none` to prevent the container from matching any named container queries. That removes all associated container query names, but does not prevent the element from matching unnamed queries. + +To prevent an element from being a size container, set `container-type: normal`. This removes containment, meaning the element isn't a size container (it can still be a [style container](#container_style_queries). + +To prevent an element from being matched by any container queries, provide it with an unused `container-name`. + +```css +article { + container-name: none; + container-type: size; +} + +main { + container-name: neverUsedName; + container-type: normal; +} +``` + +In the above example, the {{htmlelement("article")}} element can match any unnamed container query. In other words, it will be tested by each `@container` query that doesn't include a name in the ``. On the other hand, assuming the `neverUsedName` is never used as a container query name, the {{htmlelement("main")}} element will never be queried. Even if that name was removed, it would still not be tested against any size queries as the `container-type` value of `normal` means it is not a size query container. + +With container queries, we are not limited to size queries! You can also query a container's style features. + +## Container style queries + +A _container style query_ is a `@container` query that evaluates computed styles of the container element as defined in one or more `style()` functional notations. The boolean syntax and logic used to combine style features into a style query are the same as in [CSS feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The only difference is the function name — `style()` within a `` as opposed to `supports()` within a ``: + +```css +@container style(), + not style(), + style() and style(), + style() or style() { + /* */ +} +``` + +The parameter of each `style()` function is a single **``**. Per the CSS containment specification, a `` can be a valid CSS [declaration](/en-US/docs/Web/CSS/syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). The only style feature currently supported is custom properties, with or without a value. See the [browser compatibility table](#browser_compatibility). + +If the `` includes a value, the style query evaluates to true if the computed value of the custom property (or, in the future, the CSS declaration) passed as the `style()` argument is true for the container being queried. Otherwise, it resolves to false. +A style feature without a value evaluates to true if the computed value is different from the [initial value](#registered_properties) for the given property. + +In the future, we'll be able to write style queries like so: + +```css +@container style(color: green) and style(background-color: transparent), + not style(background-color: red), + style(--themeBackground), + style(--themeColor: blue) or style(--themeColor: purple), + (max-width: 100vw) and style(max-width: 600px) { + /* */ +} +``` + +The `style()` functional notation is used to differentiate style queries from size queries. While not yet supported, we will eventually be able to query regular CSS declarations such as `max-width: 100vw`. Querying `@containers (max-width: 100vw)` is a size query; containment with {{cssxref("container-type")}}, or the {{cssxref("container")}} shorthand, is needed. That query will return true if the container is 100vw or less. That is different from querying `@containers style(max-width: 100vw)`, which is a style query; when supported, this query will return true if the container has a {{cssxref("max-width")}} value of `100vw`. + +Until style queries for regular CSS declarations and properties are supported, we are limited to including only custom properties as the `style()` parameter, with or without a value: + +```css +@container style(--themeBackground), + style(--themeColor: blue) or style(--themeColor: purple) { + /* */ +} +``` + +A few things to note that have already been mentioned but are important to remember: + +- All elements can be style query containers; setting a `container-type` is not required. When descendant styles don't impact the computed styles of an ancestor, containment is not needed. +- A `` can include both style and size features. If including size features in your query, make sure your container elements have a `container-type` of `size` or `inline-size` set. +- If you don't want an element to be considered as a container, ever, give it a `container-name` that will not be used. Setting `container-name: none` removes any query names associated with a container; it does not prevent the element from being a style container. +- At the time of this writing (February 2024), container style queries only work with CSS custom property values in the `style()` query. + +Now, let's dive in and take a look at the different `` types. + +### Style queries for custom properties + +Style queries for custom properties allow you to query the [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), also called "CSS variables", of a parent element. They are included within a `` just as you would include any regular CSS property within a feature query: either with or without a value. + +#### Standalone custom property queries + +The `` parameter of the `style()` functional notation can include just a CSS variable name; a custom property with no value. When no value is included, the query will return false if the value is the same as the value of the `initial-value` descriptor within the `@property` at-rule, if there is one. The style query will return true and match all elements that have a custom property value that differs from the `initial-value` or for all elements that have a custom property of any value if the custom property was declared without being registered. + +##### Unregistered custom properties + +When CSS variables are introduced via a simple CSS custom property value assignment, valueless custom property queries always return true. + +```css +:root { + --theme-color: rebeccapurple; +} + +@container style(--theme-color) { + /* */ +} +``` + +In this example, the container query matches the element on which the `--theme-color` property was declared and all of its descendants. As the CSS variable `--theme-color` was declared on the {{cssxref(":root")}}, the style query `style(--theme-color)` will be true for every element within that {{glossary("DOM")}} node. + +##### Registered properties + +The behavior of registered custom properties is different. When explicitly defined with the {{cssxref("@property")}} CSS at-rule or via JavaScript with {{domxref('CSS/registerProperty_static', 'CSS.registerProperty()')}}, the style query `style(--theme-color)` only returns true for elements if the element's computed value for `--theme-color` is different from the [`initial-value`](/en-US/docs/Web/CSS/@property/initial-value) set in the original definition of that custom property. + +```css +@property --theme-color { + initial-value: rebeccapurple; + inherited: true; +} + +:root { + --theme-color: rebeccapurple; +} + +main { + --theme-color: blue; +} + +@container style(--theme-color) { + /* */ +} +``` + +In this example, the `:root` element does NOT match the style query because the value of the custom property is the same as the `initial-value` value. The custom property value for the element (and all the elements inheriting the value) is still `rebeccapurple`. Only elements that differ from the initial value, in this case, the {{htmlelement("main")}} and its descendants that inherit that changed value, are a match. + +#### Custom property with a value + +If a style query includes a value for the custom property, the element's computed value for that property must be an exact match, with equivalent values only being a match if the custom property was defined with a {{cssxref("@property")}} at rule (or a {{domxref('CSS/registerProperty_static', 'CSS.registerProperty()')}} method call) containing a `syntax` descriptor. + +```css +@container style(--accent-color: blue) { + /* */ +} +``` + +This container style query matches any element that has `blue` as the {{cssxref("computed_value")}} of the `--accent-color` custom property. + +In this case, other color values equivalent to sRGB `blue` (such as the hexadecimal code `#0000ff`) will match only if the `--accent-color` property was defined as a color with `@property` or `CSS.registerProperty()`, for example: + +```css +@property --accent-color { + syntax: ""; + inherits: true; + initial-value: #00f; +} +``` + +In this case, if the value of `--accent-color` were set to `blue`, `#00f`, `#0000ff`, `rgb(0 0 255 / 1)`, or `rgb(0% 0% 100%)` it would return true for `@container style(--accent-color: blue)`. + +##### Example + +In this example, we have a {{htmlelement("fieldset")}} with four radio buttons. The fourth option includes a text {{htmlelement("input")}} for entering a custom color. + +```html +
        + Change the value of --theme +
          +
        1. + + +
          2. +
        2. + + +
          3. +
        3. + + +
          4. +
        4. + + + + +
          5. +
        +
        +I change colors +``` + +JavaScript updates the value of the CSS `--theme` variable on the {{htmlelement("body")}} element, which is an ancestor of the {{htmlelement("fieldset")}} and {{htmlelement("output")}} elements, whenever a radio button is selected. When the text `` is updated, the {{domxref("HTMLInputElement.value", "value")}} of the `other` radio button is updated only if the `other` radio button is {{domxref("HTMLInputElement.checked", "checked")}}, which in turn updates the value of `--theme`. + +```js +const radios = document.querySelectorAll('input[name="selection"]'); +const body = document.querySelector("body"); +const other = document.getElementById("other"); +const color = document.getElementById("color"); + +for (let i = 0; i < radios.length; i++) { + radios[i].addEventListener("change", (e) => { + body.style.setProperty("--theme", e.target.value); + }); +} +color.addEventListener("input", (e) => { + other.style.setProperty("value", e.target.value); + if (other.checked) { + body.style.setProperty("--theme", e.target.value); + } +}); +``` + +We use the `@property` at-rule to define a CSS variable `--theme` to be a {{cssxref("color_value", "<color>")}} value and set the `initial-value` to `#00F`, ensuring equivalent colors are a match regardless of what syntax is used (for example, `#F00` is equal to `rgb(255 0 0)`, `#ff0000`, and `red`). + +```css +@property --theme { + syntax: ""; + inherits: true; + initial-value: #f00; +} +``` + +```css hidden +output { + padding: 3px 5px; + margin-top: 5px; +} +``` + +The first style feature query is a custom property with no value. This query type returns true when the computed value for the custom property value is different from the `initial-value` for that property. In this case, it will be true when the value of `--theme` is any value other than any syntax equivalent value of`#f00` ( such as `red`). When true, the {{htmlelement("output")}} will have a 5px dotted outline. The outline color is the current value of `--theme`. The default text {{cssxref("color")}} is grey. + +```css +@container style(--theme) { + output { + outline: 5px dotted var(--theme); + color: #777; + } +} +``` + +The second and third style queries include values for the custom property. These will match if the container's `--theme` value is an equivalent color to the value listed, even if that value is the same as the `initial-value`. The first query matches elements whose `--theme` value is equivalent to `red`, `blue`, or `green`. When it is, the {{cssxref("color")}} will be the color current value of `--theme` (in the case of `blue` and `green`, overriding the grey set in the first style query). + +The second style query states that when `--theme` is equivalent to `red`, the ``'s contents will also be bold. We did this to better demonstrate that the container query is a match. + +```css +@container style(--theme: green) or style(--theme: blue) or style(--theme: red) { + output { + color: var(--theme); + } +} + +@container style(--theme: red) { + output { + font-weight: bold; + } +} +``` + +{{EmbedLiveSample('example','100%','200')}} + +Try entering different color values into the text box. You may notice that values that are sRGB equivalents of `red` will make the `` red — as it matches `style(--theme: red)` — while removing the outline, because `style(--theme)` returns false if the element's value for `--theme` is the same as the initial value for `--theme` defined by the `@property` at-rule. Any non-red sRGB valid color value, including `currentcolor` or `hsl(180 100% 50%)`, etc., makes the first style query return true; they are values that are different from the `initial-value`. + +Because we set `syntax: "";`, the CSS variable can only be assigned valid `` values. Valid values for the {{cssxref("color")}} property that aren't value `` values, such as `unset` or `inherit`, are [invalid](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) for this custom property, and will be ignored. + +If you enter `unset` or `gibberish`, the JavaScript updates the `style` on the {{HTMLElement("body")}} to `--theme: unset` or `--theme: gibberish`. Neither of these are colors. Both are invalid and ignored. This means the initial value is inherited and unchanged, with `style(--theme)` returning false and `style(--theme: red)` returning true. + +> **Note:** When declaring custom properties, consider using `@property` with the {{cssxref("@property/syntax","syntax")}} descriptor so the browser can properly compare computed values. + +### Nested queries + +Container queries can be nested within other container queries. The styles defined inside multiple nested container queries are applied when all of the wrapping container queries are true. + +```css +@container style(--theme: red) { + output { + outline: 1px dotted; + } + @container style(--theme: purple) { + output { + outline: 5px dotted; + } + } +} +``` + +In this case, the `` will have a 5px dotted border if it's nested in a container where `--theme: purple` is set, and that container is nested within a container whose `--theme` value is `red`. + +### Style query CSS declarations and properties + +Not yet supported in any browser, the `style()` functional notation can include regular CSS declarations including CSS properties and property value pairs. + +```css +@container style(font-weight: bold) { + b, + strong { + background: yellow; + } +} +``` + +When supported, this basic example will make the background color of any {{htmlelement("b")}} and {{htmlelement("strong")}} elements yellow when the parent is already `bold`. + +The matching is done against the computed value of the parent container; if the parent's computed {{cssxref("font-weight")}} is `bold` (not `bolder` or `900`), there is a match. Just as with custom property container style queries, we did not have to define any elements as style containers as all elements are style containers by default. As long as an element doesn't have a `container-name` set, if it has `font-weight: bold` set or inherited, it will match. + +Style features that query a shorthand property will be true if the computed values match for each of its longhand properties, and false otherwise. For example, `@container style({{cssxref("border")}}: 2px solid red)` will resolve to true if all 12 longhand properties ({{cssxref("border-bottom-style")}}, etc.) that make up that shorthand are set to the same equivalent values. + +The global CSS values `revert` and `revert-layer` are invalid as values in a `` and cause the container style query to be false. + +Do not apply the styles you are querying in the style query to the element you are styling with that query as this may cause an infinite loop. + +It is expected that style queries will also accept properties in a boolean context. The style query will return false if the value of the property is the initial value for that property (if it has not been changed), and true otherwise. + +```css +@container style(font-weight) { +} +``` + +The above example will return true for any element that has a value for `font-weight` that differs from its initial value. User-agent stylesheets set `font-weight: bold` for {{htmlelement("heading_elements", "heading")}} and {{htmlelement("th")}} elements, for example. Some browsers set {{htmlelement("strong")}} and {{htmlelement("b")}} to `bold`, others to `bolder`. {{htmlelement("optgroup")}} also sometimes has a `font-weight` other than `normal` set by the user agent. As long as the element's `font-weight` is not the default value for that user-agent, the style query will return true. + +These features are not yet supported in any browser. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries) +- CSS {{Cssxref("@container")}} at-rule +- CSS {{Cssxref("contain")}} property +- CSS {{Cssxref("container")}} shorthand property +- CSS {{Cssxref("container-name")}} property +- [Getting Started with Style Queries](https://developer.chrome.com/docs/css-ui/style-queries) (2022) +- [Style queries](https://una.im/style-queries/) via una.im (2022) From 4b6b77bc36496c88dcbe477ec46da678a85d8e6e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 21 Feb 2024 10:04:04 -0800 Subject: [PATCH 106/746] Links to the new container style query guide (#32318) * links to the new container style query guide * remove ending / --- .../en-us/web/api/csscontainerrule/containername/index.md | 7 +++++++ .../en-us/web/api/csscontainerrule/containerquery/index.md | 6 ++++++ files/en-us/web/api/csscontainerrule/index.md | 7 +++++++ files/en-us/web/css/@container/index.md | 1 + files/en-us/web/css/container-name/index.md | 1 + files/en-us/web/css/container-type/index.md | 1 + files/en-us/web/css/container/index.md | 1 + .../web/css/css_containment/container_queries/index.md | 1 + files/en-us/web/css/css_containment/index.md | 4 ++++ files/en-us/web/css/css_media_queries/index.md | 1 + files/en-us/web/css/css_nesting/nesting_at-rules/index.md | 1 + 11 files changed, 31 insertions(+) diff --git a/files/en-us/web/api/csscontainerrule/containername/index.md b/files/en-us/web/api/csscontainerrule/containername/index.md index 19f64015b4820ef..1b6fdedcaa6221d 100644 --- a/files/en-us/web/api/csscontainerrule/containername/index.md +++ b/files/en-us/web/api/csscontainerrule/containername/index.md @@ -108,3 +108,10 @@ The title in the card section should double in size as the width of the page goe ## Browser compatibility {{Compat}} + +## See also + +- CSS {{cssxref("container")}} shorthand property +- [CSS containment module](/en-US/docs/Web/CSS/CSS_containment) +- [Container queries](/en-US/docs/Web/CSS/CSS_containment/Container_queries) +- [Using container size and style queries](/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) diff --git a/files/en-us/web/api/csscontainerrule/containerquery/index.md b/files/en-us/web/api/csscontainerrule/containerquery/index.md index 3c5afb33056c98f..3d624930f3d0201 100644 --- a/files/en-us/web/api/csscontainerrule/containerquery/index.md +++ b/files/en-us/web/api/csscontainerrule/containerquery/index.md @@ -107,3 +107,9 @@ The card should change background and as the width of the page transitions throu ## Browser compatibility {{Compat}} + +## See also + +- [CSS containment module](/en-US/docs/Web/CSS/CSS_containment) +- [Container queries](/en-US/docs/Web/CSS/CSS_containment/Container_queries) +- [Using container size and style queries](/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) diff --git a/files/en-us/web/api/csscontainerrule/index.md b/files/en-us/web/api/csscontainerrule/index.md index 3f4f6a50b8d0e36..56e9671fbca7574 100644 --- a/files/en-us/web/api/csscontainerrule/index.md +++ b/files/en-us/web/api/csscontainerrule/index.md @@ -196,3 +196,10 @@ The title in the card section should double in size as the width of the page goe ## Browser compatibility {{Compat}} + +## See also + +- CSS {{cssxref("container-name")}}, {{cssxref("container-type")}}, and {{cssxref("container")}} shorthand properties +- [CSS containment module](/en-US/docs/Web/CSS/CSS_containment) +- [Container queries](/en-US/docs/Web/CSS/CSS_containment/Container_queries) +- [Using container size and style queries](/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) diff --git a/files/en-us/web/css/@container/index.md b/files/en-us/web/css/@container/index.md index 46e2e73d5847c18..50f5f7d0b3f0545 100644 --- a/files/en-us/web/css/@container/index.md +++ b/files/en-us/web/css/@container/index.md @@ -298,6 +298,7 @@ The global `revert` and `revert-layer` are invalid as values in a ` Date: Thu, 22 Feb 2024 06:11:00 +1100 Subject: [PATCH 107/746] element - remove comment about browser removal (#32334) --- files/en-us/web/html/element/dir/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/dir/index.md b/files/en-us/web/html/element/dir/index.md index fba5cad9a149397..fceaf581d6a1024 100644 --- a/files/en-us/web/html/element/dir/index.md +++ b/files/en-us/web/html/element/dir/index.md @@ -11,7 +11,7 @@ browser-compat: html.elements.dir The **``** [HTML](/en-US/docs/Web/HTML) element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the {{Glossary("user agent")}}. Do not use this obsolete element; instead, you should use the {{HTMLElement("ul")}} element for lists, including lists of files. -> **Warning:** Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. **No major browsers support this element.** +> **Warning:** Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. ## DOM interface From b3db832139d8ea77e1354b888c326f6db9ed3ef7 Mon Sep 17 00:00:00 2001 From: cyangalaxy <49559300+cyangalaxy@users.noreply.github.com> Date: Wed, 21 Feb 2024 23:26:36 +0100 Subject: [PATCH 108/746] Small typo (#32373) --- .../guides/making_pwas_installable/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md index 04fc9127ec62b3e..ada431af3772855 100644 --- a/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md +++ b/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md @@ -119,7 +119,7 @@ On mobile: ### Installing sites as apps -Safari for deskop and mobile, and Edge for desktop also support installing any website as an app. However, this is not specific to PWA because the site doesn't need to meet the installability criteria described in this guide, and because the browser doesn't proactively promote the site for installation. +Safari for desktop and mobile, and Edge for desktop also support installing any website as an app. However, this is not specific to PWA because the site doesn't need to meet the installability criteria described in this guide, and because the browser doesn't proactively promote the site for installation. ### Triggering the install prompt From 8a72c4ea67ef88b8f606867283d35429f3851c8e Mon Sep 17 00:00:00 2001 From: Moritz Poldrack <33086936+mpldr@users.noreply.github.com> Date: Wed, 21 Feb 2024 23:28:42 +0100 Subject: [PATCH 109/746] Correct language around report-to support (#32345) --- .../http/headers/content-security-policy/report-uri/index.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/http/headers/content-security-policy/report-uri/index.md b/files/en-us/web/http/headers/content-security-policy/report-uri/index.md index e09dd2f526182ca..975562cc11140f6 100644 --- a/files/en-us/web/http/headers/content-security-policy/report-uri/index.md +++ b/files/en-us/web/http/headers/content-security-policy/report-uri/index.md @@ -15,9 +15,8 @@ attempts to violate the Content Security Policy. These violation reports consist documents sent via an HTTP POST request to the specified URI. > **Warning:** Though the {{CSP("report-to")}} directive is intended to replace the deprecated **`report-uri`** directive, -> {{CSP("report-to")}} isn't supported in most browsers yet. -> So for compatibility with current browsers -> while also adding forward compatibility when browsers get {{CSP("report-to")}} support, +> {{CSP("report-to")}} is not yet supported by Firefox. +> So for compatibility with Firefox > you can specify both **`report-uri`** and {{CSP("report-to")}}: > > ```http From d6defd737678e99d62bf838ad12eba532567fba5 Mon Sep 17 00:00:00 2001 From: youngspe Date: Wed, 21 Feb 2024 15:33:13 -0800 Subject: [PATCH 110/746] fix errors in ::spelling-error and ::grammar-error examples (#32368) * Fix missing text-decoration-line in ::spelling-error * fix non-editable text in ::grammar-error example * Update files/en-us/web/css/_doublecolon_grammar-error/index.md mdn-linter suggestion Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl --- files/en-us/web/css/_doublecolon_grammar-error/index.md | 4 +++- files/en-us/web/css/_doublecolon_spelling-error/index.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_grammar-error/index.md b/files/en-us/web/css/_doublecolon_grammar-error/index.md index 1be1631fb7b88ff..c5e29dc8a964539 100644 --- a/files/en-us/web/css/_doublecolon_grammar-error/index.md +++ b/files/en-us/web/css/_doublecolon_grammar-error/index.md @@ -39,7 +39,9 @@ In this example, eventual supporting browsers should highlight any flagged gramm #### HTML ```html -

        My friends is coming to the party tonight.

        +

        + My friends is coming to the party tonight. +

        ``` #### CSS diff --git a/files/en-us/web/css/_doublecolon_spelling-error/index.md b/files/en-us/web/css/_doublecolon_spelling-error/index.md index 276cce8ebac436b..298cec44b3f20bc 100644 --- a/files/en-us/web/css/_doublecolon_spelling-error/index.md +++ b/files/en-us/web/css/_doublecolon_spelling-error/index.md @@ -48,7 +48,7 @@ In this example, eventual supporting browsers should highlight any flagged spell ```css ::spelling-error { - text-decoration: wavy red; + text-decoration: wavy red underline; } ``` From d9b654e42837d0518130e3d9978fa1083ec1d573 Mon Sep 17 00:00:00 2001 From: Victor Hugo Date: Wed, 21 Feb 2024 20:39:18 -0300 Subject: [PATCH 111/746] Unhide HTML code block in tutorial (#32375) --- .../css/css_grid_layout/basic_concepts_of_grid_layout/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 45daa663b0c7d10..456276d74bf3038 100644 --- a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -589,7 +589,7 @@ If I set `box1` to `display: grid` I can give it a track definition and it too w } ``` -```html hidden +```html
        a
        From 1ce0eee026ffd92e606cd9bdefeb820c554a20de Mon Sep 17 00:00:00 2001 From: "David J. Schwarz / Ringsdorf" Date: Thu, 22 Feb 2024 00:39:36 +0100 Subject: [PATCH 112/746] Fixed link on "forced-colors" page (#32370) --- files/en-us/web/css/@media/forced-colors/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/@media/forced-colors/index.md b/files/en-us/web/css/@media/forced-colors/index.md index 04d62beb7aa44e8..72baed599b318f9 100644 --- a/files/en-us/web/css/@media/forced-colors/index.md +++ b/files/en-us/web/css/@media/forced-colors/index.md @@ -47,7 +47,7 @@ Additionally the following properties have special behavior in forced colors mod - {{cssxref("color-scheme")}} is forced to 'light dark' - {{cssxref("scrollbar-color")}} is forced to 'auto' -The system colors that are forced for the above properties depend on the context of the element. For example the {{cssxref("color")}} property on button element will be forced to `ButtonText`. On normal text it will be forced to `CanvasText`. See the [list of system colors](/en-US/docs/Web/CSS/color_value#system_colors) for additional details of when each might be appropriate in various UI contexts. +The system colors that are forced for the above properties depend on the context of the element. For example the {{cssxref("color")}} property on button element will be forced to `ButtonText`. On normal text it will be forced to `CanvasText`. See the [list of system colors](/en-US/docs/Web/CSS/system-color) for additional details of when each might be appropriate in various UI contexts. > **Note:** user agents choose system colors based on native element semantics, _not_ on added ARIA roles. > As an example, adding `role="button"` to a `div` will **not** cause an element's color to be forced to `ButtonText` From 408aa6446554821aa52f4208e9431fa6b85083cf Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 21 Feb 2024 20:56:10 -0800 Subject: [PATCH 113/746] custom highlights: see also additions for discoverability. (#32382) --- files/en-us/web/api/css_custom_highlight_api/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/web/api/css_custom_highlight_api/index.md b/files/en-us/web/api/css_custom_highlight_api/index.md index 17b1348e38125bd..466ef74e28d6a47 100644 --- a/files/en-us/web/api/css_custom_highlight_api/index.md +++ b/files/en-us/web/api/css_custom_highlight_api/index.md @@ -237,3 +237,5 @@ The result is shown below. Type text within the search field to highlight matche ## See also - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) +- HTML [`contentEditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute +- CSS {{cssxref("pseudo-elements")}} From 987fd95dfe59dd0b0e9871df50f7ca2cd907be38 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 22 Feb 2024 06:37:51 +0000 Subject: [PATCH 114/746] fix: auto-cleanup by bot (#32351) chore: auto-fix Markdownlint, Prettier, and front-matter issues --- files/en-us/learn/server-side/django/deployment/index.md | 8 ++++---- .../container_size_and_style_queries/index.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/learn/server-side/django/deployment/index.md b/files/en-us/learn/server-side/django/deployment/index.md index c4056fde0c7af31..c67bb6652eabda5 100644 --- a/files/en-us/learn/server-side/django/deployment/index.md +++ b/files/en-us/learn/server-side/django/deployment/index.md @@ -471,7 +471,7 @@ We'll also configure the default database and collect static files so that they python manage.py migrate ``` - > **Note:** For the Railway example we will [Configure a Postgres database](/en-US/docs/Learn/Server-side/Django/Deployment#provision_and_connect_a_postgres_sql_database), and connect to it by setting the `DATABASE_URL` environment variable. + > **Note:** For the Railway example we will [Configure a Postgres database](#provision_and_connect_a_postgres_sql_database), and connect to it by setting the `DATABASE_URL` environment variable. > It is important that `migrate` is called _after_ configuring what database to use database. 7. Collect all the static files into a location where they can be [served in production](#serving_static_files_in_production): @@ -561,7 +561,7 @@ After getting the local library sources and installing the dependencies in a vir ![PythonAnywhere Static files section of Web tab](python_anywhere_web_static_files.png) Select the **Enter URL** link and enter `\static_files\`. - This is the `STATIC_URL` in the [application settings](/en-US/docs/Learn/Server-side/Django/Deployment#settings.py_2), and reflects the location where files were copied when we ran `collectstatic` in the previous section. + This is the `STATIC_URL` in the [application settings](#settings.py_2), and reflects the location where files were copied when we ran `collectstatic` in the previous section. 9. Near the top of the _Web_ tab select the **Reload** button to restart the site. Then then select the site URL link to launch the live site: @@ -576,7 +576,7 @@ This is a Django security error that is raised because our source code is not ru ![A detailed error page with a full traceback of an invalid HTTP_HOST header](python_anywhere_error_disallowed_host.png) > **Note:** This kind of debug information is very useful when you're getting set up, but is a security risk in a deployed site. -> In the next section we'll show you how to disable this level of logging on the live site using [environment variables](/en-US/docs/Learn/Server-side/Django/Deployment#using_environment_variables_on_pythonanywhere). +> In the next section we'll show you how to disable this level of logging on the live site using [environment variables](#using_environment_variables_on_pythonanywhere). Open **/locallibrary/settings.py** in your GitHub project and change the [ALLOWED_HOSTS](https://docs.djangoproject.com/en/4.2/ref/settings/#allowed-hosts) setting to include your PythonAnywhere site URL: @@ -618,7 +618,7 @@ You should be able to log in with the superuser account you created above, and c ### Using environment variables on PythonAnywhere -In the section on [Getting your website ready to publish](/en-US/docs/Learn/Server-side/Django/Deployment#getting_your_website_ready_to_publish) we modified the application so that it can be configured using environment variables in production. +In the section on [Getting your website ready to publish](#getting_your_website_ready_to_publish) we modified the application so that it can be configured using environment variables in production. Specifically we set up the library so that you can set: diff --git a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md index d3c2c9fc86683bc..55bfa44d87c5746 100644 --- a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md +++ b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md @@ -145,7 +145,7 @@ A _container style query_ is a `@container` query that evaluates computed styles } ``` -The parameter of each `style()` function is a single **``**. Per the CSS containment specification, a `` can be a valid CSS [declaration](/en-US/docs/Web/CSS/syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). The only style feature currently supported is custom properties, with or without a value. See the [browser compatibility table](#browser_compatibility). +The parameter of each `style()` function is a single **``**. Per the CSS containment specification, a `` can be a valid CSS [declaration](/en-US/docs/Web/CSS/Syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). The only style feature currently supported is custom properties, with or without a value. See the [browser compatibility table](#browser_compatibility). If the `` includes a value, the style query evaluates to true if the computed value of the custom property (or, in the future, the CSS declaration) passed as the `style()` argument is true for the container being queried. Otherwise, it resolves to false. A style feature without a value evaluates to true if the computed value is different from the [initial value](#registered_properties) for the given property. From 7d3f8627a954b856f97bc1c39dab5e8f4ee0cab8 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 22 Feb 2024 10:01:56 +0000 Subject: [PATCH 115/746] Update InterfaceData based on WebRef (#32365) --- files/jsondata/InterfaceData.json | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/files/jsondata/InterfaceData.json b/files/jsondata/InterfaceData.json index 4641984b41bb355..aa26b2f1651873b 100644 --- a/files/jsondata/InterfaceData.json +++ b/files/jsondata/InterfaceData.json @@ -692,8 +692,8 @@ "inh": "CSSTransformComponent", "impl": [] }, - "CSSPositionFallbackRule": { - "inh": "CSSGroupingRule", + "CSSPositionTryRule": { + "inh": "CSSRule", "impl": [] }, "CSSPropertyRule": { @@ -780,10 +780,6 @@ "inh": "CSSTransformComponent", "impl": [] }, - "CSSTryRule": { - "inh": "CSSRule", - "impl": [] - }, "CSSUnitValue": { "inh": "CSSNumericValue", "impl": [] @@ -1196,6 +1192,10 @@ "inh": "", "impl": [] }, + "ForDebuggingOnly": { + "inh": "", + "impl": [] + }, "FormData": { "inh": "", "impl": [] @@ -1880,16 +1880,20 @@ "inh": "", "impl": [] }, - "InterestGroupBiddingScriptRunnerGlobalScope": { + "InterestGroupBiddingAndScoringScriptRunnerGlobalScope": { "inh": "InterestGroupScriptRunnerGlobalScope", "impl": [] }, + "InterestGroupBiddingScriptRunnerGlobalScope": { + "inh": "InterestGroupBiddingAndScoringScriptRunnerGlobalScope", + "impl": [] + }, "InterestGroupReportingScriptRunnerGlobalScope": { "inh": "InterestGroupScriptRunnerGlobalScope", "impl": [] }, "InterestGroupScoringScriptRunnerGlobalScope": { - "inh": "InterestGroupScriptRunnerGlobalScope", + "inh": "InterestGroupBiddingAndScoringScriptRunnerGlobalScope", "impl": [] }, "InterestGroupScriptRunnerGlobalScope": { @@ -2184,10 +2188,6 @@ "inh": "", "impl": [] }, - "MLCommandEncoder": { - "inh": "", - "impl": [] - }, "MLContext": { "inh": "", "impl": [] @@ -2640,6 +2640,10 @@ "inh": "Event", "impl": [] }, + "ProtectedAudience": { + "inh": "", + "impl": [] + }, "ProximitySensor": { "inh": "Sensor", "impl": [] From c02ba7b4f24390f26fc6dac689cac7ed59e11d19 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Thu, 22 Feb 2024 21:59:19 +1100 Subject: [PATCH 116/746] Exper features - fix browser version in table for clipboard read/write (#32304) Exper features - fix table for clipboard read/write --- files/en-us/mozilla/firefox/experimental_features/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index b66ca306ece3cd3..faa2e3f6b8902ac 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -1665,8 +1665,8 @@ The [Clipboard.read()](/en-US/docs/Web/API/Clipboard/read), [Clipboard.readText( Beta + 122 Yes - No Release From fc618b437169c35b76321024331217e530012117 Mon Sep 17 00:00:00 2001 From: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> Date: Thu, 22 Feb 2024 18:09:22 +0530 Subject: [PATCH 117/746] Created paint-order example in HTML (#32251) * changed example from svg to html * fix: paint-order example using both svg and html * fix: added description for html example Co-authored-by: Brian Thomas Smith --------- Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/paint-order/index.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/files/en-us/web/css/paint-order/index.md b/files/en-us/web/css/paint-order/index.md index 1c60b21f1273b2f..996448ad6aa1063 100644 --- a/files/en-us/web/css/paint-order/index.md +++ b/files/en-us/web/css/paint-order/index.md @@ -88,6 +88,40 @@ text { {{EmbedLiveSample("Reversing_the_paint_order_of_stroke_and_fill", "100%", 165)}} +### Reversing the paint order of stroke and fill using HTML + +To control the fill and stroke order in HTML, you can use the {{cssxref("-webkit-text-stroke-color")}} and {{cssxref("-webkit-text-stroke-width")}} CSS properties. + +#### HTML + +```html +
        stroke in front
        +
        stroke behind
        +``` + +#### CSS + +```css +div { + font-family: sans-serif; + font-size: 50px; + font-weight: bold; + fill: black; + padding-top: 10px; + padding-bottom: 10px; + -webkit-text-stroke-color: red; + -webkit-text-stroke-width: 4px; +} + +.stroke-behind { + paint-order: stroke fill; +} +``` + +#### Result + +{{EmbedLiveSample("Reversing_the_paint_order_of_stroke_and_fill_using_HTML", "100%", 165)}} + ## Specifications {{Specifications}} From 104bf2d92b053e86ea021b7ddc2604ec441d0c64 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 22 Feb 2024 14:44:57 +0000 Subject: [PATCH 118/746] Bump @mdn/yari from 2.39.3 to 2.39.4 (#32390) --- package.json | 2 +- yarn.lock | 156 +++++++++++++++++++++++++-------------------------- 2 files changed, 79 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index 1c628e9cafc45c8..ac93c01d4485a6b 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", "@caporal/core": "^2.0.7", - "@mdn/yari": "2.39.3", + "@mdn/yari": "2.39.4", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "async": "^3.2.5", diff --git a/yarn.lock b/yarn.lock index cbe6064c4e31b15..6924adc1607ede3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -371,10 +371,10 @@ "@lezer/css" "^1.1.0" "@lezer/html" "^1.3.0" -"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.2.1": - version "6.2.1" - resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz#8068d44365d13cdb044936fb4e3483301c12ef95" - integrity sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A== +"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.2.2": + version "6.2.2" + resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz#7141090b22994bef85bcc5608a3bc1257f2db2ad" + integrity sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg== dependencies: "@codemirror/autocomplete" "^6.0.0" "@codemirror/language" "^6.6.0" @@ -414,10 +414,10 @@ "@codemirror/view" "^6.0.0" crelt "^1.0.5" -"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0", "@codemirror/state@^6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.0.tgz#8bc3e096c84360b34525a84696a84f86b305363a" - integrity sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A== +"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0", "@codemirror/state@^6.4.1": + version "6.4.1" + resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b" + integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A== "@codemirror/theme-one-dark@^6.1.2": version "6.1.2" @@ -760,32 +760,32 @@ resolved "https://registry.yarnpkg.com/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.5.tgz#9587c6b592e87f8a5ccab80ccdd8b5184f867922" integrity sha512-+8zfCGZzBoAoLK6jYnOm9Xa2LcdNRDVrUXatuBNuGJHyt7tpR+k/+de2LSGHiU34TYrfAXk7g9x8/IpXR+4zhw== -"@mdn/browser-compat-data@^5.5.10": - version "5.5.10" - resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.5.10.tgz#b7c0454a617b268b7a9ab9ca6c886abd1ec69473" - integrity sha512-s2GGND9oLhEuksOFtICYOBZdMWPANBXTMqAXh89q6g1Mi3+OuWEmp9WFzw2v/nmS175vqeewpC1kDJA7taaxyA== +"@mdn/browser-compat-data@^5.5.11": + version "5.5.11" + resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.5.11.tgz#02ac783e8c60627f11ce2677fc70c22956393d5c" + integrity sha512-4o1ZaGmvqoDx3QLyEAcZvGDKmdVXLB0aiANuPDumgue/7iH67KUBsKejLX7wrdxEdyNYfXUKtjFQYhGwVUBXGw== -"@mdn/yari@2.39.3": - version "2.39.3" - resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.39.3.tgz#89a5f195997c1d1334ffb0ead6b125bc6f8fe551" - integrity sha512-dADy0u6vlNlo+D29A3OzYtMi76Yz7nnjUE9kleAO/gEIdCq1ETXQ/P2TX3qkTVi/cjw52NSQVT8dbVuu/9wkkw== +"@mdn/yari@2.39.4": + version "2.39.4" + resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.39.4.tgz#9ae3b319d7f7eda4f5a32ef396f9f1df59610658" + integrity sha512-cR+NK9W7ZxW3g5jmQdwTm1e2GvKnFuRmMiv06vhmOyo4v6CoOASAKdKBh4CGwAZXDUsf4Uu3gDsnZ3KQdOyM9A== dependencies: "@caporal/core" "^2.0.7" "@codemirror/lang-css" "^6.2.1" "@codemirror/lang-html" "^6.4.8" - "@codemirror/lang-javascript" "^6.2.1" - "@codemirror/state" "^6.4.0" + "@codemirror/lang-javascript" "^6.2.2" + "@codemirror/state" "^6.4.1" "@codemirror/theme-one-dark" "^6.1.2" "@fast-csv/parse" "^5.0.0" "@mdn/bcd-utils-api" "^0.0.5" - "@mdn/browser-compat-data" "^5.5.10" + "@mdn/browser-compat-data" "^5.5.11" "@mozilla/glean" "2.0.5" - "@sentry/integrations" "^7.101.0" - "@sentry/node" "^7.101.0" + "@sentry/integrations" "^7.102.0" + "@sentry/node" "^7.102.0" "@stripe/stripe-js" "^2.4.0" "@use-it/interval" "^1.0.0" "@vscode/ripgrep" "^1.15.9" - "@webref/css" "^6.11.1" + "@webref/css" "^6.11.2" accept-language-parser "^1.5.0" async "^3.2.5" chalk "^5.3.0" @@ -798,7 +798,7 @@ css-tree "^2.3.1" dayjs "^1.11.10" dexie "^3.2.5" - dotenv "^16.4.4" + dotenv "^16.4.5" ejs "^3.1.9" express "^4.18.2" fdir "^6.1.1" @@ -815,7 +815,7 @@ imagemin-mozjpeg "^10.0.0" imagemin-pngquant "^9.0.2" imagemin-svgo "^10.0.1" - inquirer "^9.2.14" + inquirer "^9.2.15" is-svg "^5.0.0" js-yaml "^4.1.0" loglevel "^1.9.1" @@ -853,7 +853,7 @@ unist-builder "^4.0.0" unist-util-visit "^5.0.0" web-features "^0.5.1" - web-specs "^3.0.0" + web-specs "^3.3.0" "@mozilla/glean@2.0.5": version "2.0.5" @@ -886,54 +886,54 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@sentry-internal/tracing@7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.101.0.tgz#9a92ee722d071449a61c061867aa43a5beefcfb6" - integrity sha512-rp9oOLQs6vMuzvAnAHRRCNu5Z0o/ZVRI3WPYedxpdMWKD1Z3G9o+0joP+ZIUqHsamWWYiIgPqXgL9AK6AWjFRg== +"@sentry-internal/tracing@7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.102.0.tgz#24cf662e1eb5623f6d5197e78c66d7b257560eb8" + integrity sha512-BlE33HWL1IzkGa0W+pwTiyu01MUIfYf+WnO9UC8qkDW3jxVvg2zhoSjXSxikT+KPCOgoZpQHspaTzwjnI1LCvw== dependencies: - "@sentry/core" "7.101.0" - "@sentry/types" "7.101.0" - "@sentry/utils" "7.101.0" + "@sentry/core" "7.102.0" + "@sentry/types" "7.102.0" + "@sentry/utils" "7.102.0" -"@sentry/core@7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.101.0.tgz#7ddae48771bad6d3170df0d9807f86c39824dd0a" - integrity sha512-dRNrNV5OLGARkOGgxJsVDhA98Pev5G1LVJcud5E83cRg49BCUx2riqEtDP6iIS1nvem6cApkSnLC1kvl/T5/Cw== +"@sentry/core@7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.102.0.tgz#da5e04a5fe97ed91464944dac40b813e6f8aa453" + integrity sha512-GO9eLOSBK1waW4AD0wDXAreaNqXFQ1MPQZrkKcN+GJYEFhJK1+u+MSV7vO5Fs/rIfaTZIZ2jtEkxSSAOucE8EQ== dependencies: - "@sentry/types" "7.101.0" - "@sentry/utils" "7.101.0" + "@sentry/types" "7.102.0" + "@sentry/utils" "7.102.0" -"@sentry/integrations@^7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.101.0.tgz#d3c2593fefdbd46d8c713e417bc10c5b14af2677" - integrity sha512-vLebp9VpZL6jt++eL+1O06sEXrhqRsLk0qbDsJbuagJhNu12TTlH93t5wBpKmBi+xqCr+SzgeYYEHBYOjyyHVw== +"@sentry/integrations@^7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.102.0.tgz#27045133517b97dd21b83fb270810b3675a58745" + integrity sha512-WW7DiAcihi+Fya2YrB6lEUzDAIPuO23wDm4tLJ9vQpMw4LaTj/XkulITTXFI7XLJLzs5Eks9pIfZJdmKrqjchA== dependencies: - "@sentry/core" "7.101.0" - "@sentry/types" "7.101.0" - "@sentry/utils" "7.101.0" + "@sentry/core" "7.102.0" + "@sentry/types" "7.102.0" + "@sentry/utils" "7.102.0" localforage "^1.8.1" -"@sentry/node@^7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.101.0.tgz#acafd4efc81035bb3ffe73ef92f348099c7c5df1" - integrity sha512-4z01VAFjRYk7XcajbWPJlhkPN6PBG4nVX8n1dl+OH2OeqTxFxcnmY5zR5v+AtEbNJgg5PMwy8mnnGZRG/wLZgA== +"@sentry/node@^7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.102.0.tgz#f2853bad8650b1f94a57ae3bafad3440740f98ab" + integrity sha512-ZS1s2uO/+K4rHkmWjyqm5Jtl6dT7klbZSMvn4tfIpkfWuqrs7pP0jaATyvmF+96z3lpq6fRAJliV5tRqPy7w5Q== dependencies: - "@sentry-internal/tracing" "7.101.0" - "@sentry/core" "7.101.0" - "@sentry/types" "7.101.0" - "@sentry/utils" "7.101.0" + "@sentry-internal/tracing" "7.102.0" + "@sentry/core" "7.102.0" + "@sentry/types" "7.102.0" + "@sentry/utils" "7.102.0" -"@sentry/types@7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.101.0.tgz#0174a32d6c12def73f438dc2a10bd52cc0ba0c81" - integrity sha512-YC+ltO/AlbEyJHjCUYQ4is1HcDT2zSMuLkIAcyQmK7fUdlGT4iR5sfENriY9ZopYHgjPdJKfhI8ohScam7zp/A== +"@sentry/types@7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.102.0.tgz#b31e9faa54036053ab82c09c3c855035a4889c59" + integrity sha512-FPfFBP0x3LkPARw1/6cWySLq1djIo8ao3Qo2KNBeE9CHdq8bsS1a8zzjJLuWG4Ww+wieLP8/lY3WTgrCz4jowg== -"@sentry/utils@7.101.0": - version "7.101.0" - resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.101.0.tgz#0eadb9709c9b6fbc03d509acf7fe6a00ab4e6220" - integrity sha512-px1NUkCLsD9UKLE4W4DghpyzmAVHgYhskrjRt30ubyUKqlggtHkOXRvS8MjuWowR/i0wF0GuTCbU9StBd7JMrw== +"@sentry/utils@7.102.0": + version "7.102.0" + resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.102.0.tgz#66325f2567986cc3fd12fbdb980fb8ada170342b" + integrity sha512-cp5KCRe0slOVMwG4iP2Z4UajQkjryRTiFskZ5H7Q3X9R5voM8+DAhiDcIW88GL9NxqyUrAJOjmKdeLK2vM+bdA== dependencies: - "@sentry/types" "7.101.0" + "@sentry/types" "7.102.0" "@sinclair/typebox@^0.27.8": version "0.27.8" @@ -1196,10 +1196,10 @@ proxy-from-env "^1.1.0" yauzl "^2.9.2" -"@webref/css@^6.11.1": - version "6.11.1" - resolved "https://registry.yarnpkg.com/@webref/css/-/css-6.11.1.tgz#4346cba2e723f6c89b751035ef5be027c2abfce0" - integrity sha512-C12N4cdcZC0z2Tt/yl4J3zHDU7HQXaj9MM9NzfdLieXvjQt/K1n/pJzA67zyHiNv9EnScqWoTnJfBQW6ms/6JA== +"@webref/css@^6.11.2": + version "6.11.2" + resolved "https://registry.yarnpkg.com/@webref/css/-/css-6.11.2.tgz#64cb66351326a95e039cf670de79073ad696f632" + integrity sha512-cYwROJShZTjx1aDkVl0D5fwscDcNNiQHB8dI/vodNO7ztuYdbOm6QmJtQ/BH42SLQ+yV3Bulst7DQOanceoyCw== abort-controller@^3.0.0: version "3.0.0" @@ -2585,10 +2585,10 @@ domutils@^3.0.1: domelementtype "^2.3.0" domhandler "^5.0.3" -dotenv@^16.4.4: - version "16.4.4" - resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.4.tgz#a26e7bb95ebd36272ebb56edb80b826aecf224c1" - integrity sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg== +dotenv@^16.4.5: + version "16.4.5" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f" + integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg== download@^6.2.2: version "6.2.5" @@ -4030,10 +4030,10 @@ inquirer@^6.0.0: strip-ansi "^5.1.0" through "^2.3.6" -inquirer@^9.2.14: - version "9.2.14" - resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.2.14.tgz#b55474f1e4f5f0eb28b2f75f09c082209f0cc2ca" - integrity sha512-4ByIMt677Iz5AvjyKrDpzaepIyMewNvDcvwpVVRZNmy9dLakVoVgdCHZXbK1SlVJra1db0JZ6XkJyHsanpdrdQ== +inquirer@^9.2.15: + version "9.2.15" + resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.2.15.tgz#2135a36190a6e5c92f5d205e0af1fea36b9d3492" + integrity sha512-vI2w4zl/mDluHt9YEQ/543VTCwPKWiHzKtm9dM2V0NdFcqEexDAjUHzO1oA60HRNaVifGXXM1tRRNluLVHa0Kg== dependencies: "@ljharb/through" "^2.3.12" ansi-escapes "^4.3.2" @@ -7885,10 +7885,10 @@ web-namespaces@^2.0.0: resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692" integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ== -web-specs@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-3.1.0.tgz#17c101d008eb92518350055163b0419a098e497e" - integrity sha512-m9/rjxGeHIlQGtIj3UeATcCRE7Kmi6AwswkfRp4B5Or+TeQVcBrfWOyRwj2CP8ue07aQ4XKnp9SANhsJFy5X8g== +web-specs@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-3.3.0.tgz#393f2be14b683a076b61cd6fcd6386c89ea6d4a1" + integrity sha512-MqJvS3sCOxQoGBzRLrF2+wezXcLRL4HcG6qQ6PhBIVZWidw4H5POP/CSwZ86hIXxNEUJrkMud4YNNIE87cnpIg== web-streams-polyfill@4.0.0-beta.3: version "4.0.0-beta.3" From 7415a0b7fe6203b636d232b757f257360a6b4546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Wei=C3=9Fenfels?= <10491533+tim-we@users.noreply.github.com> Date: Thu, 22 Feb 2024 16:06:35 +0100 Subject: [PATCH 119/746] Fix note in aria-flowto page (#32389) Update ario-flowto attribute page --- .../web/accessibility/aria/attributes/aria-flowto/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-flowto/index.md b/files/en-us/web/accessibility/aria/attributes/aria-flowto/index.md index a80829bcd3e2c18..027fb527d9ee02f 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-flowto/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-flowto/index.md @@ -15,7 +15,7 @@ The global `aria-flowto` attribute lets the author indicate to assistive technol When `aria-flowto` has a single [id](/en-US/docs/Web/HTML/Global_attributes/id) reference, it allows assistive technologies to, at the user's request, go to the element targeted via that `id` instead of reading the document in the order of the DOM. When the `aria-flowto` value uses a space separated list of multiple `id` references, assistive technology can provide the user with a list of path choices, with each `id` referenced being a choice. The path choice names are determined by the accessible name of each target element of the `aria-flowto` attribute. -> **Note:** Setting `aria-flow` does not impact the content's tab order. It only provides users the option to follow a content path that doesn't match the DOM order when using tech that supports this attribute. +> **Note:** Setting `aria-flowto` does not impact the content's tab order. It only provides users the option to follow a content path that doesn't match the DOM order when using tech that supports this attribute. ## Values From b8282f9ff8e309eed0e6dff02ac28a32db1b4bf6 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 22 Feb 2024 17:55:21 +0000 Subject: [PATCH 120/746] Editorial review: Topics API docs (#30107) * Add Topic API docs * Update files/en-us/web/api/fetch/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Making fixes for samdutton review comments * prettier fix * Making fixes for samdutton comments * fix ad tech example URL issue * Rewrite explanatory text for Topics API usage * improve Sec-Browsing-Topics header description and ref page * minor tweaks to browsingTopics() wording * Further update description of API usage, based on samdutton comments * Fixes for latest samdutton review * remove specification macros for features that have no spec_url in BCD * final few bits of cleanup * Update history entry description with feedback from Yao * Add privacy sandbox enrollment information, restructure privacy section to fit it * Restructure and clarify topics api content, answer review comments * missing paren * Other small tweaks * Update non-standard and spec opposition information * fix linting errors * Further updates to topics API description * Update standards positions information * more changes to increase accuracy of content * Update files/en-us/web/api/topics_api/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/topics_api/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/topics_api/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/document/browsingtopics/index.md Co-authored-by: wbamberg * Fixes for wbamberg review comments --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: wbamberg --- files/en-us/_redirects.txt | 1 + .../web/api/document/browsingtopics/index.md | 102 +++++++++++ files/en-us/web/api/document/index.md | 2 + files/en-us/web/api/fetch/index.md | 91 ++++++---- .../htmliframeelement/browsingtopics/index.md | 70 ++++++++ .../en-us/web/api/htmliframeelement/index.md | 6 +- files/en-us/web/api/request/request/index.md | 49 +++--- .../web/api/speculation_rules_api/index.md | 2 +- files/en-us/web/api/topics_api/index.md | 95 ++++++++++ files/en-us/web/api/topics_api/using/index.md | 166 ++++++++++++++++++ files/en-us/web/html/element/iframe/index.md | 4 + .../headers/observe-browsing-topics/index.md | 54 ++++++ .../browsing-topics/index.md | 42 +++++ .../http/headers/permissions-policy/index.md | 4 + .../http/headers/sec-browsing-topics/index.md | 74 ++++++++ .../web/http/headers/sec-fetch-dest/index.md | 2 +- .../firefox_tracking_protection/index.md | 6 +- files/en-us/web/privacy/index.md | 13 +- .../privacy_sandbox/enrollment/index.md | 38 ++++ .../web/privacy/privacy_sandbox/index.md | 29 +++ .../partitioned_cookies/index.md | 8 +- .../redirect_tracking_protection/index.md | 6 +- .../web/privacy/state_partitioning/index.md | 6 +- .../storage_access_policy/errors/index.md | 6 +- .../privacy/storage_access_policy/index.md | 6 +- files/jsondata/GroupData.json | 8 + 26 files changed, 797 insertions(+), 93 deletions(-) create mode 100644 files/en-us/web/api/document/browsingtopics/index.md create mode 100644 files/en-us/web/api/htmliframeelement/browsingtopics/index.md create mode 100644 files/en-us/web/api/topics_api/index.md create mode 100644 files/en-us/web/api/topics_api/using/index.md create mode 100644 files/en-us/web/http/headers/observe-browsing-topics/index.md create mode 100644 files/en-us/web/http/headers/permissions-policy/browsing-topics/index.md create mode 100644 files/en-us/web/http/headers/sec-browsing-topics/index.md create mode 100644 files/en-us/web/privacy/privacy_sandbox/enrollment/index.md create mode 100644 files/en-us/web/privacy/privacy_sandbox/index.md rename files/en-us/web/privacy/{ => privacy_sandbox}/partitioned_cookies/index.md (97%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 855e0e46bc91fd6..a3e6fac0061189c 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -12780,6 +12780,7 @@ /en-US/docs/Web/Performance/Time_to_interactive /en-US/docs/Glossary/Time_to_interactive /en-US/docs/Web/Performance/business_case_for_performance /en-US/docs/Learn/Performance/business_case_for_performance /en-US/docs/Web/Performance/learn /en-US/docs/Web/Performance/How_browsers_work +/en-US/docs/Web/Privacy/Partitioned_cookies /en-US/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies /en-US/docs/Web/Privacy/Tracking_Protection /en-US/docs/Web/Privacy/Firefox_tracking_protection /en-US/docs/Web/Progressive_web_apps/Add_to_home_screen /en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable /en-US/docs/Web/Progressive_web_apps/Advantages /en-US/docs/Web/Progressive_web_apps diff --git a/files/en-us/web/api/document/browsingtopics/index.md b/files/en-us/web/api/document/browsingtopics/index.md new file mode 100644 index 000000000000000..62d268be46a087b --- /dev/null +++ b/files/en-us/web/api/document/browsingtopics/index.md @@ -0,0 +1,102 @@ +--- +title: "Document: browsingTopics() method" +short-title: browsingTopics() +slug: Web/API/Document/browsingTopics +page-type: web-api-instance-method +status: + - non-standard +browser-compat: api.Document.browsingTopics +--- + +{{APIRef("Topics API")}} + +> **Warning:** This feature is currently opposed by two browser vendors. See the [Standards positions](/en-US/docs/Web/API/Topics_API#standards_positions) section below for details of opposition. + +> **Note:** An [Enrollment process](/en-US/docs/Web/Privacy/Privacy_sandbox/Enrollment) is required to use this feature in your applications. + +The `browsingTopics()` method of the {{domxref("Document")}} interface returns a promise that fulfills with an array of objects representing the selected topics for the current user, which can then be returned to the ad tech platform in a subsequent fetch request. It also triggers the browser to observe the topics inferred from the calling site's URL (i.e. the site where the ad tech ` +``` + +Log the `browsingTopics` value via script: + +```js +const iframeElem = document.querySelector("iframe"); +console.log(iframeElem.browsingTopics); // will return true in supporting browsers +``` + +### Set + +Specify a minimum ` +``` + +Set `browsingtopics` to `true` then load the ` + ``` + + - Programmatically by setting the equivalent {{domxref("HTMLIFrameElement.browsingTopics")}} property to `true`: + + ```js + const iframeElem = document.querySelector("iframe"); + iframeElem.browsingTopics = true; + ``` + +When the request associated with one of the above features is sent: + +1. A {{httpheader("Sec-Browsing-Topics")}} header is sent along with the request, which contains the topic(s) chosen for the current user. +2. The ad tech server selects a relevant ad to display in the ` +``` + +### Complete examples + +- [Topics API demo](https://topics-demo.glitch.me/): Demonstrates how `document.browsingTopics()` calls can be used to observe and then access topics ([see source code](https://glitch.com/edit/#!/topics-demo)). +- [Topics API header demo](https://topics-fetch-demo.glitch.me/): Demonstrates a `fetch()` request with a {{httpheader("Sec-Browsing-Topics")}} header can be used to observe and then access topics ([see source code](https://glitch.com/edit/#!/topics-fetch-demo)). + +## Testing hints + +### Chrome + +The default epoch length for observing topics is one week, which is way too long to test code that uses the Topics API. To shorten this for test purposes, in Chrome you can open the browser with a feature flag along the following lines: + +```bash +BrowsingTopicsParameters:time_period_per_epoch/15s/max_epoch_introduction_delay/3s +``` + +See [Run Chromium with command-line switches](https://www.chromium.org/developers/how-tos/run-chromium-with-flags/) for more information on how to do this. + +You can also test your Topics API code locally without [enrollment](/en-US/docs/Web/API/Topics_API#enrollment) by enabling the following Chrome developer flag: + +`chrome://flags/#privacy-sandbox-enrollment-overrides` + +## See also + +- [Topics API](https://developer.chrome.com/docs/privacy-sandbox/topics/overview/) on developer.chrome.com (2023) diff --git a/files/en-us/web/html/element/iframe/index.md b/files/en-us/web/html/element/iframe/index.md index 9dd6a25e4a71c8b..3106ef42ff64e38 100644 --- a/files/en-us/web/html/element/iframe/index.md +++ b/files/en-us/web/html/element/iframe/index.md @@ -39,6 +39,10 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib > **Note:** This attribute is considered a legacy attribute and redefined as `allow="payment"`. +- `browsingtopics` {{Experimental_Inline}} + + - : A boolean attribute that, if present, specifies that the selected topics for the current user should be sent with the request for the {{htmlelement("iframe")}}'s source. See [Using the Topics API](/en-US/docs/Web/API/Topics_API/Using) for more details. + - `credentialless` {{Experimental_Inline}} - : Set to `true` to make the ` +``` + +` +``` + +```js +const el = document.getElementById("el"); +console.log(Array.from(el.sandbox)); // Output: ["allow-same-origin", "allow-scripts"] + +el.sandbox = ""; +console.log(Array.from(el.sandbox)); // Output: [] +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} From 30760bac53f12ec937eb3380bf7bd79cbe670a39 Mon Sep 17 00:00:00 2001 From: busybox <29630035+busybox11@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:22:12 +0200 Subject: [PATCH 676/746] Mention CPU architecture inside OS User Agent detection page (#33135) Mention CPU architecture Not entirely sure about this one, as Mac still doesn't report ARM in its user agent for Apple silicon macs. Windows does though, and this mention could've saved me some headaches. --- .../web/http/browser_detection_using_the_user_agent/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/browser_detection_using_the_user_agent/index.md b/files/en-us/web/http/browser_detection_using_the_user_agent/index.md index 645fa0a19a7531a..cb6cb7ab7fdc476 100644 --- a/files/en-us/web/http/browser_detection_using_the_user_agent/index.md +++ b/files/en-us/web/http/browser_detection_using_the_user_agent/index.md @@ -248,7 +248,7 @@ Most rendering engines put the version number in the _RenderingEngine/VersionNum ## OS -The Operating System is given in most User Agent strings (although not web-focused platforms like Firefox OS), but the format varies a lot. It is a fixed string between two semicolons, in the comment part of the User Agent. These strings are specific for each browser. They indicate the OS, but also often its version and information on the relying hardware (32 or 64 bits, or Intel/PPC for Mac). +The Operating System is given in most User Agent strings (although not web-focused platforms like Firefox OS), but the format varies a lot. It is a fixed string between two semicolons, in the comment part of the User Agent. These strings are specific for each browser. They indicate the OS, but also often its version and information on the relying hardware (32 or 64 bits, Intel/PPC for Mac, or x86/ARM CPU architecture for Windows PCs). Like in all cases, these strings may change in the future, one should use them only in conjunction with the detection of already released browsers. A technological survey must be in place to adapt the script when new browser versions are coming out. From 92fdc736b06fa2260381406b7eae26fa0398bbe1 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 22 Apr 2024 16:17:39 +0200 Subject: [PATCH 677/746] chore: tidy up CODEOWNERS file (#33170) * chore: tidy up CODEOWNERS for readability * chore: tidy up CODEOWNERS for readability * chore: tidy up CODEOWNERS for readability * Update .github/CODEOWNERS Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya --- .github/CODEOWNERS | 105 ++++++++++++++++++--------------------------- 1 file changed, 41 insertions(+), 64 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index b91ee44af140f0a..389c9a0e18d8756 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,80 +1,57 @@ -# ---------------------------------------------------------------------------- -# MDN Content CODEOWNERS -# ---------------------------------------------------------------------------- -# Order is important. The last matching pattern takes precedence. For more -# detailed information, see: +# Order is important: The last matching pattern takes precedence. +# For more detailed information, see: # https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners -# ---------------------------------------------------------------------------- -# ---------------------------------------------------------------------------- -# DEFAULT OWNERS -# ---------------------------------------------------------------------------- -* @mdn/core-yari-content +# Default owners +* @mdn/core-yari-content -# ---------------------------------------------------------------------------- -# DEFAULT ENGLISH CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/ @mdn/yari-content-mdn +# Default content owners +/files/en-us/ @mdn/yari-content-mdn -# ---------------------------------------------------------------------------- -# ENGLISH WEB ACCESSIBILITY CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/accessibility/ @mdn/yari-content-accessibility -/files/en-us/learn/accessibility/ @mdn/yari-content-accessibility +# Accessibility +/files/en-us/web/accessibility/ @mdn/yari-content-accessibility +/files/en-us/learn/accessibility/ @mdn/yari-content-accessibility -# ---------------------------------------------------------------------------- -# ENGLISH CSS CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/css/ @mdn/yari-content-css -/files/en-us/learn/css/ @mdn/yari-content-css +# CSS +/files/en-us/web/css/ @mdn/yari-content-css +/files/en-us/learn/css/ @mdn/yari-content-css -# ---------------------------------------------------------------------------- -# ENGLISH HTML CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/html/ @mdn/yari-content-html -/files/en-us/learn/html/ @mdn/yari-content-html +# HTML +/files/en-us/web/html/ @mdn/yari-content-html +/files/en-us/learn/html/ @mdn/yari-content-html -# ---------------------------------------------------------------------------- -# ENGLISH JAVASCRIPT CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/javascript/ @mdn/yari-content-javascript -/files/en-us/learn/javascript/ @mdn/yari-content-javascript +# JavaScript +/files/en-us/web/javascript/ @mdn/yari-content-javascript +/files/en-us/learn/javascript/ @mdn/yari-content-javascript -# ---------------------------------------------------------------------------- -# ENGLISH HTTP CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/http/ @mdn/yari-content-http -/files/en-us/learn/server-side/ @mdn/yari-content-http +# HTTP +/files/en-us/web/http/ @mdn/yari-content-http +/files/en-us/learn/server-side/ @mdn/yari-content-http -# ---------------------------------------------------------------------------- -# ENGLISH WEB API CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/api/ @mdn/yari-content-web-api +# Web API +/files/en-us/web/api/ @mdn/yari-content-web-api -# ---------------------------------------------------------------------------- -# ENGLISH MOZILLA ADD-ONS CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/mozilla/add-ons/ @mdn/yari-content-mozilla-add-ons +# Mozilla Add-ons +/files/en-us/mozilla/add-ons/ @mdn/yari-content-mozilla-add-ons -# ---------------------------------------------------------------------------- -# ENGLISH MATHML CONTENT OWNER(S) -# ---------------------------------------------------------------------------- -/files/en-us/web/mathml/ @mdn/content-mathml +# MathML +/files/en-us/web/mathml/ @mdn/content-mathml +# ============================= CONTROL FILES ============================= # +# The CODEOWNERS file must end with these matches: Any pull request changing +# one or more of these files should be escalated to the owners specified here. + +# mdn/content GitHub configuration +/.github/ @mdn/core-dev +# Issue templates in .github +/.github/ISSUE_TEMPLATE/ff-project-issue.md @mdn/core-yari-content + +# Root directory +/* @mdn/core-dev +# Markdown files in root directory +/*.md @mdn/core-yari-content -# ---------------------------------------------------------------------------- -# CONTROL FILES OWNER(S) -# ---------------------------------------------------------------------------- -# These should be the last matches in this file, since any pull request that -# tries to change any one or more of these files should be escalated to the -# owners specified here. -# ---------------------------------------------------------------------------- -/.github/ @mdn/core-dev -## Issue templates -/.github/ISSUE_TEMPLATE/ff-project-issue.md @mdn/core-yari-content -/* @mdn/core-dev -/*.md @mdn/core-yari-content # These are @mdn-bot because the auto-merge GHA workflow uses the PAT of this account. # If another reviewer is specified, update the PAT token or auto-merge will cease to be automatic. /package.json @mdn-bot -/yarn.lock @mdn-bot +/yarn.lock @mdn-bot From 5eb216b5d534c09d94a087d166c2a7f49a428762 Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Mon, 22 Apr 2024 18:33:12 +0300 Subject: [PATCH 678/746] Fix minor typo (#33213) --- files/en-us/web/api/speechrecognition/interimresults/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/speechrecognition/interimresults/index.md b/files/en-us/web/api/speechrecognition/interimresults/index.md index d12492f48bbde9e..952ead082e38bf1 100644 --- a/files/en-us/web/api/speechrecognition/interimresults/index.md +++ b/files/en-us/web/api/speechrecognition/interimresults/index.md @@ -10,9 +10,9 @@ browser-compat: api.SpeechRecognition.interimResults The **`interimResults`** property of the {{domxref("SpeechRecognition")}} interface controls whether interim results should be -returned (`true`) or not (`false`.) Interim results are results +returned (`true`) or not (`false`). Interim results are results that are not yet final (e.g. the {{domxref("SpeechRecognitionResult.isFinal")}} property -is `false`.) +is `false`). The default value for **`interimResults`** is `false`. From 7320f0512afef601f2b06fd02c92e3ee0bf69e08 Mon Sep 17 00:00:00 2001 From: Gauthier Fiorentino Date: Mon, 22 Apr 2024 19:41:59 +0200 Subject: [PATCH 679/746] Update user-valid algorithm (#33105) * Update user-valid algorithm * Apply suggestions from code review Co-authored-by: Estelle Weyl * Update files/en-us/web/css/_colon_user-valid/index.md * fix linter issue --------- Co-authored-by: Estelle Weyl --- files/en-us/web/css/_colon_user-valid/index.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/_colon_user-valid/index.md b/files/en-us/web/css/_colon_user-valid/index.md index fc17d46e770c0a7..46dc2a9bb1d9b80 100644 --- a/files/en-us/web/css/_colon_user-valid/index.md +++ b/files/en-us/web/css/_colon_user-valid/index.md @@ -9,12 +9,15 @@ browser-compat: css.selectors.user-valid The **`:user-valid`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any validated form element whose value validates correctly based on its [validation constraints](/en-US/docs/Learn/Forms#constraint_validation). However, unlike {{cssxref(":valid")}} it only matches once the user has interacted with it. -This pseudo-class is applied according to the following rules: +This pseudo-class is applied if the form control is valid and any of the following has occurred: + +- The user made a change to the form control and committed the change such as by moving focus elsewhere. +- The user has attempted to submit the form, even if no change was made to the control. +- The value was invalid when it gained focus, and the user made a change making it valid, even if focus is still in the control. + +Once this pseudo-class has been applied, the user-agent re-validates whether the control is valid at every keystroke when the control has focus. -- If the control does not have focus, and the value is valid, apply this pseudo-class. -- If the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class. - If the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. -- If the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. The result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. However, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. Required items are flagged as invalid only if the user changes them or attempts to submit an unchanged invalid value. From ca46bb981f7bc0528e95e6acb7d0a6b0bdce6d75 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 23 Apr 2024 09:33:37 +1000 Subject: [PATCH 680/746] FF126 Relnote: CustomStateSet and CSS :state() selector (#33098) * FF126 Relnote: CustomStateSet and CSS :state() selector * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya --- .../firefox/experimental_features/index.md | 42 ------------------- .../mozilla/firefox/releases/126/index.md | 3 ++ 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 0a6139fc34911aa..993fe52f475c39b 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -1872,48 +1872,6 @@ The `GeometryUtils` method `getBoxQuads()` returns the CSS boxes for a {{domxref -#### CustomStateSet and the :state() pseudo-class: States for custom elements - -You can now define custom states for custom elements and match them using CSS. -Custom states are represented as custom identifiers that can be added to, or removed from, the element's {{domxref("ElementInternals.states")}} property (a {{domxref("CustomStateSet")}}). The CSS [`:state()`](/en-US/docs/Web/CSS/:state) pseudo-class takes a custom identifier as an argument and matches the custom elements if the identifier is present in their set of states. -(See [Firefox bug 1861466](https://bugzil.la/1861466) and [Firefox bug 1866351](https://bugzil.la/1866351) for more details.) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        Release channelVersion addedEnabled by default?
        Nightly121No
        Developer Edition121No
        Beta121No
        Release121No
        Preference namedom.element.customstateset.enabled
        - ### Payment Request API #### Primary payment handling diff --git a/files/en-us/mozilla/firefox/releases/126/index.md b/files/en-us/mozilla/firefox/releases/126/index.md index 4bb81070a629503..0ec4507bd6a549f 100644 --- a/files/en-us/mozilla/firefox/releases/126/index.md +++ b/files/en-us/mozilla/firefox/releases/126/index.md @@ -49,6 +49,9 @@ This article provides information about the changes in Firefox 126 that affect d #### DOM +- The ability to define states for custom elements and match them using CSS selectors is now available by default. + The custom states are represented as custom identifiers that can be added to or removed from the element's {{domxref("ElementInternals.states")}} property (a {{domxref("CustomStateSet")}}). The CSS [`:state()`](/en-US/docs/Web/CSS/:state) pseudo-class takes a custom identifier as an argument and matches custom elements if the identifier is present in their set of states. ([Firefox bug 1887543](https://bugzil.la/1887543)). + #### Media, WebRTC, and Web Audio #### Removals From 668bcea4980d44e92e86b14a2718d547f5ab9bd0 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 23 Apr 2024 10:09:01 +1000 Subject: [PATCH 681/746] Add OffScreenCanvas context lost/restored events (#33159) * Add OffScreenCanvas context lost/restored events * Apply suggestions from code review Co-authored-by: Brian Thomas Smith Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> * Replace backing storage * Apply suggestions from code review Co-authored-by: Brian Thomas Smith --------- Co-authored-by: Brian Thomas Smith Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../contextlost_event/index.md | 1 + .../contextrestored_event/index.md | 1 + .../en-us/web/api/htmlcanvaselement/index.md | 4 +- .../contextlost_event/index.md | 68 +++++++++++++++++++ .../contextrestored_event/index.md | 61 +++++++++++++++++ files/en-us/web/api/offscreencanvas/index.md | 11 +++ 6 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/offscreencanvas/contextlost_event/index.md create mode 100644 files/en-us/web/api/offscreencanvas/contextrestored_event/index.md diff --git a/files/en-us/web/api/htmlcanvaselement/contextlost_event/index.md b/files/en-us/web/api/htmlcanvaselement/contextlost_event/index.md index 5d4f35271004bb1..e206cc815a92904 100644 --- a/files/en-us/web/api/htmlcanvaselement/contextlost_event/index.md +++ b/files/en-us/web/api/htmlcanvaselement/contextlost_event/index.md @@ -64,3 +64,4 @@ canvas.addEventListener("contextlost", (event) => { - [`HTMLCanvasElement: contextrestored` event](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event) - [`CanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost) +- [`OffscreenCanvas: contextlost` event](/en-US/docs/Web/API/OffscreenCanvas/contextlost_event) diff --git a/files/en-us/web/api/htmlcanvaselement/contextrestored_event/index.md b/files/en-us/web/api/htmlcanvaselement/contextrestored_event/index.md index 36938708507a949..445755f0b390d34 100644 --- a/files/en-us/web/api/htmlcanvaselement/contextrestored_event/index.md +++ b/files/en-us/web/api/htmlcanvaselement/contextrestored_event/index.md @@ -57,3 +57,4 @@ canvas.addEventListener( - [`HTMLCanvasElement: contextlost` event](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event) - [`CanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost) +- [OffscreenCanvas: contextlost` event](/en-US/docs/Web/API/OffscreenCanvas/contextlost_event) diff --git a/files/en-us/web/api/htmlcanvaselement/index.md b/files/en-us/web/api/htmlcanvaselement/index.md index d8da3d6f37a92e9..f103b1951a10cbf 100644 --- a/files/en-us/web/api/htmlcanvaselement/index.md +++ b/files/en-us/web/api/htmlcanvaselement/index.md @@ -46,9 +46,9 @@ _Inherits events from its parent, {{domxref("HTMLElement")}}._ Listen to these events using {{DOMxRef("EventTarget.addEventListener", "addEventListener()")}} or by assigning an event listener to the `oneventname` property of this interface. - [`contextlost`](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event) {{Experimental_Inline}} - - : Fired if the user agent detects that the backing storage associated with a `CanvasRenderingContext2D` or an `OffscreenCanvasRenderingContext2D` context has been lost. + - : Fired if the browser detects that the `CanvasRenderingContext2D` context has been lost. - [`contextrestored`](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event) {{Experimental_Inline}} - - : Fired if the user agent successfully restores a `CanvasRenderingContext2D` or an `OffscreenCanvasRenderingContext2D` context. + - : Fired if the browser successfully restores a `CanvasRenderingContext2D` context - [`webglcontextcreationerror`](/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event) - : Fired if the user agent is unable to create a `WebGLRenderingContext` or `WebGL2RenderingContext` context. - [`webglcontextlost`](/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event) diff --git a/files/en-us/web/api/offscreencanvas/contextlost_event/index.md b/files/en-us/web/api/offscreencanvas/contextlost_event/index.md new file mode 100644 index 000000000000000..8d4da67e38cd7e2 --- /dev/null +++ b/files/en-us/web/api/offscreencanvas/contextlost_event/index.md @@ -0,0 +1,68 @@ +--- +title: "OffscreenCanvas: contextlost event" +short-title: contextlost +slug: Web/API/OffscreenCanvas/contextlost_event +page-type: web-api-event +status: + - experimental +browser-compat: api.OffscreenCanvas.contextlost_event +--- + +{{APIRef("Canvas API")}}{{SeeCompatTable}} + +The **`contextlost`** event of the {{domxref("OffscreenCanvas")}} interface is fired if the browser detects that the [`OffscreenCanvasRenderingContext2D`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D) context is lost. +Contexts can be lost for several reasons, such as an associated GPU driver crashes, or the application runs out of memory, and so on. + +By default the user agent will attempt to restore the context and then fire the [`contextrestored` event](/en-US/docs/Web/API/OffscreenCanvas/contextrestored_event). +User code can prevent the context from being restored by calling [`Event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault) during event handling. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("contextlost", (event) => {}); + +oncontextlost = (event) => {}; +``` + +## Event type + +A generic {{domxref("Event")}}. + +## Examples + +The code fragment below detects the `contextlost` event. + +```js +const canvas = new OffscreenCanvas(256, 256); +const gl = offscreen.getContext("2d"); + +// Do drawing etc + +canvas.addEventListener("contextlost", (event) => { + console.log(event); +}); +``` + +To prevent the context from being restored the event handler code might instead look like this: + +```js +canvas.addEventListener("contextlost", (event) => { + event.preventDefault(); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`OffScreenCanvas: contextrestored` event](/en-US/docs/Web/API/OffScreenCanvas/contextrestored_event) +- [`OffscreenCanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.iscontextlost) +- [`HTMLCanvasElement: contextlost` event](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event) diff --git a/files/en-us/web/api/offscreencanvas/contextrestored_event/index.md b/files/en-us/web/api/offscreencanvas/contextrestored_event/index.md new file mode 100644 index 000000000000000..371b3dc146fff44 --- /dev/null +++ b/files/en-us/web/api/offscreencanvas/contextrestored_event/index.md @@ -0,0 +1,61 @@ +--- +title: "OffscreenCanvas: contextrestored event" +short-title: contextrestored +slug: Web/API/OffscreenCanvas/contextrestored_event +page-type: web-api-event +status: + - experimental +browser-compat: api.OffscreenCanvas.contextrestored_event +--- + +{{APIRef("Canvas API")}}{{SeeCompatTable}} + +The **`contextrestored`** event of the {{domxref("OffscreenCanvas")}} interface is fired if the browser restores a [`OffscreenCanvasRenderingContext2D`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D) context that was [previously lost](/en-US/docs/Web/API/OffscreenCanvas/contextlost_event). + +You can redraw, re-retrieve resources, and reinitialize the state of your context after receiving this event. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("contextrestored", (event) => {}); + +oncontextrestored = (event) => {}; +``` + +## Event type + +A generic {{domxref("Event")}}. + +## Examples + +The code fragment below detects the context restored event. + +```js +const canvas = new OffscreenCanvas(256, 256); +const gl = offscreen.getContext("2d"); + +canvas.addEventListener( + "contextrestored", + (e) => { + console.log(e); + // call to redrawCanvas() or similar + }, + false, +); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`OffscreenCanvas: contextlost` event](/en-US/docs/Web/API/OffScreenCanvas/contextlost_event) +- [`OffscreenCanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.iscontextlost) +- [`HTMLCanvasElement: contextrestored` event](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event) diff --git a/files/en-us/web/api/offscreencanvas/index.md b/files/en-us/web/api/offscreencanvas/index.md index ec8b37859731b13..8047b64fe4b3821 100644 --- a/files/en-us/web/api/offscreencanvas/index.md +++ b/files/en-us/web/api/offscreencanvas/index.md @@ -38,6 +38,17 @@ Rendering operations can also be run inside a [worker](/en-US/docs/Web/API/Web_W - {{domxref("OffscreenCanvas.transferToImageBitmap()")}} - : Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the `OffscreenCanvas`. See the {{domxref("OffscreenCanvas.transferToImageBitmap()", "API description")}} for important notes on managing this {{domxref("ImageBitmap")}}. +## Events + +_Inherits events from its parent, {{domxref("EventTarget")}}._ + +Listen to these events using {{DOMxRef("EventTarget.addEventListener", "addEventListener()")}} or by assigning an event listener to the `oneventname` property of this interface. + +- [`contextlost`](/en-US/docs/Web/API/OffscreenCanvas/contextlost_event) {{Experimental_Inline}} +- : Fired if the browser detects that an [`OffscreenCanvasRenderingContext2D`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D) context is lost. +- [`contextrestored`](/en-US/docs/Web/API/OffscreenCanvas/contextrestored_event) {{Experimental_Inline}} + - : Fired if the browser successfully restores an [`OffscreenCanvasRenderingContext2D`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D) context. + ## Examples ### Synchronous display of frames produced by an `OffscreenCanvas` From df052b23bd544e625e471e8fad77d060eef9c9d1 Mon Sep 17 00:00:00 2001 From: rebloor Date: Tue, 23 Apr 2024 12:15:42 +1200 Subject: [PATCH 682/746] Doc and release note for manifest options_page key support (#33212) * Doc and release note for manifest options_page key support * Feedback update Removed reference to Firefox regarding `options page` ignored when`options_ui` is specified. Seems to be the same in Chrome --- .../manifest.json/options_page/index.md | 15 ++++----------- .../manifest.json/options_ui/index.md | 17 ++++++++++------- .../en-us/mozilla/firefox/releases/126/index.md | 1 + 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_page/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_page/index.md index fca397c7009f637..0c5215d4e98a718 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_page/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_page/index.md @@ -32,15 +32,13 @@ browser-compat: webextensions.manifest.options_page -{{Deprecated_Header}} +Use the `options_page` key to define an [options page](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) that opens in a new tab. You use this page to enable users to modify your extension's settings. -> **Warning:** This manifest key has been deprecated. Use [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) instead. +The way the user opens the page is browser-dependent. In Firefox, the page opens when the extension's icon is clicked. Your extension can also open the page using {{WebExtAPIRef("runtime.openOptionsPage()")}}. -Use the `options_page` key to define an [options page](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) for your extension. +Alternatively, you can use the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) key with `open_in_tab` set to `true`. If `options_ui` is specified, `options page` is ignored. -The options page contains settings for the extension. The user can access it from the browser's add-ons manager, and you can open it from within your extension using {{WebExtAPIRef("runtime.openOptionsPage()")}}. - -Unlike options pages specified using the newer `options_ui` key, options pages specified using the deprecated `options_page` key don't receive browser styles and always open in a normal browser tab. +See [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) for more information on developing a settings page. ## Example @@ -51,8 +49,3 @@ Unlike options pages specified using the newer `options_ui` key, options pages s ## Browser compatibility {{Compat}} - -## See also - -- [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) -- [Options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md index 02cfcef403642f8..beeaa7e12138192 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md @@ -34,16 +34,16 @@ browser-compat: webextensions.manifest.options_ui -Use the `options_ui` key to define an [options page](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) for your extension. +Use the `options_ui` key to define an [options page](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) for your extension. You use this page to enable users to modify your extension's settings. -The options page contains settings for the extension. The user can access it from the browser's add-ons manager, and you can open it from within your extension using {{WebExtAPIRef("runtime.openOptionsPage()")}}. +The way the user opens the page is browser-dependent and also depends on the `open_in_tab` setting. Your extension can also open the page using {{WebExtAPIRef("runtime.openOptionsPage()")}}. You specify `options_ui` as a path to an HTML file packaged with your extension. The HTML file can include CSS and JavaScript files, just like a normal web page. Unlike a normal page, though, the JavaScript can use all the [WebExtension APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions/API) that the extension has [permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) for. However, it runs in a different scope than your background scripts. If you want to **share** data or functions between the JavaScript on your **options page** and your **background script(s)**, you can do so directly by obtaining a reference to the [Window](/en-US/docs/Web/API/Window) of your background scripts by using {{WebExtAPIRef("extension.getBackgroundPage()")}}, or a reference to the {{domxref("Window")}} of any of the pages running within your extension with {{WebExtAPIRef("extension.getViews()")}}. Alternately, you can communicate between the JavaScript for your options page and your background script(s) using {{WebExtAPIRef("runtime.sendMessage()")}}, {{WebExtAPIRef("runtime.onMessage")}}, or {{WebExtAPIRef("runtime.connect()")}}. The latter (or {{WebExtAPIRef("runtime.Port")}} equivalents) can also be used to share options between your [background script(s)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts) and your **[content script(s).](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)** -In general, you will want to store options changed on option pages using the {{WebExtAPIRef("storage", "storage API", "", "true")}} to either {{WebExtAPIRef("storage.sync")}} (if you want the settings synchronized across all instances of that browser that the user is logged into), or {{WebExtAPIRef("storage.local")}} (if the settings are local to the current machine/profile). If you do so and your [background script(s)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts) (or [content script(s)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)) need to know about the change, your script(s) might choose to add a listener to {{WebExtAPIRef("storage.onChanged")}}. +In general, you want to store options changed on option pages using the {{WebExtAPIRef("storage", "storage API", "", "true")}} to either {{WebExtAPIRef("storage.sync")}} (if you want the settings synchronized across all instances of that browser that the user is logged into), or {{WebExtAPIRef("storage.local")}} (if the settings are local to the current machine/profile). If you do so and your [background script(s)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts) (or [content script(s)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)) need to know about the change, your script(s) might choose to add a listener to {{WebExtAPIRef("storage.onChanged")}}. ## Syntax @@ -94,11 +94,14 @@ The `options_ui` key is an object with the following contents: open_in_tab
        {{optional_inline}} Boolean +
          +
        • If false, the options page opens in the browser's add-on manager.
          • +
        • + If true, the options page opens in a normal browser + tab. +
          • +

        Defaults to false.

        -

        - If true, the options page will open in a normal browser - tab, rather than being integrated into the browser's add-ons manager. -

        diff --git a/files/en-us/mozilla/firefox/releases/126/index.md b/files/en-us/mozilla/firefox/releases/126/index.md index 0ec4507bd6a549f..e60d8383b42d89b 100644 --- a/files/en-us/mozilla/firefox/releases/126/index.md +++ b/files/en-us/mozilla/firefox/releases/126/index.md @@ -72,6 +72,7 @@ This article provides information about the changes in Firefox 126 that affect d - The {{WebExtAPIRef("commands.onCommand")}} event now passes the `tab` argument to the event listener. This enables extensions to apply a triggered shortcut to the page in which it was issued, without the need to call the `tabs.query()` method ([Firefox bug 1843866](https://bugzil.la/1843866)). - The {{WebExtAPIRef("runtime.MessageSender")}} type now includes the `origin` property. This enables message or connection requests to see the page or frame that opened the connection. This is useful for identifying if the origin can be trusted if it isn't apparent from the URL ([Firefox bug 1787379](https://bugzil.la/1787379)). +- The [`options_page` manifest key](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_page) is provided as an alias of the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) key. This has been provided to offer extensions better compatibility with Chrome ([Firefox bug 1816960](https://bugzil.la/1816960)). ### Removals From fcdc6853377f0dfef656f8036bfaa41804a8ebef Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 23 Apr 2024 10:29:08 +1000 Subject: [PATCH 683/746] Ff126 Removes marquee events (#33205) * HTMLMarqueeElement - remove links to docs that wont exist * Relnote etc * Update files/en-us/mozilla/firefox/releases/126/index.md Co-authored-by: Chris Mills --------- Co-authored-by: Chris Mills --- .../mozilla/firefox/releases/126/index.md | 2 ++ .../en-us/web/api/htmlmarqueeelement/index.md | 32 +++++++++---------- files/en-us/web/html/element/marquee/index.md | 10 +++--- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/126/index.md b/files/en-us/mozilla/firefox/releases/126/index.md index e60d8383b42d89b..44a56e8fd847ecd 100644 --- a/files/en-us/mozilla/firefox/releases/126/index.md +++ b/files/en-us/mozilla/firefox/releases/126/index.md @@ -56,6 +56,8 @@ This article provides information about the changes in Firefox 126 that affect d #### Removals +- The marquee events [`bounce`](/en-US/docs/Web/API/HTMLMarqueeElement#bounce), [`finish`](/en-US/docs/Web/API/HTMLMarqueeElement#finish), and [`start`](/en-US/docs/Web/API/HTMLMarqueeElement#start) have been removed from [`HTMLMarqueeElement`](/en-US/docs/Web/API/HTMLMarqueeElement), along with the corresponding [event handler attributes](/en-US/docs/Web/HTML/Element/marquee#event_handlers) defined on the [`` HTML element](/en-US/docs/Web/HTML/Element/marquee) ([Firefox bug 1689705](https://bugzil.la/1689705)). + ### WebAssembly #### Removals diff --git a/files/en-us/web/api/htmlmarqueeelement/index.md b/files/en-us/web/api/htmlmarqueeelement/index.md index 63f50e07d5bb438..efe44464e497176 100644 --- a/files/en-us/web/api/htmlmarqueeelement/index.md +++ b/files/en-us/web/api/htmlmarqueeelement/index.md @@ -19,45 +19,45 @@ It inherits properties and methods from the {{DOMxRef("HTMLElement")}} interface _Inherits properties from its parent, {{DOMxRef("HTMLElement")}}._ -- {{DOMxRef("HTMLMarqueeElement.behavior")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.behavior` {{Deprecated_Inline}} - : Sets how the text is scrolled within the marquee. Possible values are `scroll`, `slide` and `alternate`. If no value is specified, the default value is `scroll`. -- {{DOMxRef("HTMLMarqueeElement.bgColor")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.bgColor` {{Deprecated_Inline}} - : Sets the background color through color name or hexadecimal value. -- {{DOMxRef("HTMLMarqueeElement.direction")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.direction` {{Deprecated_Inline}} - : Sets the direction of the scrolling within the marquee. Possible values are `left`, `right`, `up` and `down`. If no value is specified, the default value is `left`. -- {{DOMxRef("HTMLMarqueeElement.height")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.height` {{Deprecated_Inline}} - : Sets the height in pixels or percentage value. -- {{DOMxRef("HTMLMarqueeElement.hspace")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.hspace` {{Deprecated_Inline}} - : Sets the horizontal margin. -- {{DOMxRef("HTMLMarqueeElement.loop")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.loop` {{Deprecated_Inline}} - : Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously. -- {{DOMxRef("HTMLMarqueeElement.scrollAmount")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.scrollAmount` {{Deprecated_Inline}} - : Sets the amount of scrolling at each interval in pixels. The default value is 6. -- {{DOMxRef("HTMLMarqueeElement.scrollDelay")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.scrollDelay` {{Deprecated_Inline}} - : Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unless `trueSpeed` is `true`. -- {{DOMxRef("HTMLMarqueeElement.trueSpeed")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.trueSpeed` {{Deprecated_Inline}} - : By default, `scrollDelay` values lower than 60 are ignored. If `trueSpeed` is `true`, then those values are not ignored. -- {{DOMxRef("HTMLMarqueeElement.vspace")}} {{Deprecated_Inline}} +- `"HTMLMarqueeElement.vspace` {{Deprecated_Inline}} - : Sets the vertical margin. -- {{DOMxRef("HTMLMarqueeElement.width")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.width` {{Deprecated_Inline}} - : Sets the width in pixels or percentage value. ## Instance methods _Inherits methods from its parent, {{DOMxRef("HTMLElement")}}._ -- {{DOMxRef("HTMLMarqueeElement.start()")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.start()` {{Deprecated_Inline}} - : Starts scrolling of the marquee. -- {{DOMxRef("HTMLMarqueeElement.stop()")}} {{Deprecated_Inline}} +- `HTMLMarqueeElement.stop()` {{Deprecated_Inline}} - : Stops scrolling of the marquee. ## Events -- {{DOMxRef("HTMLMarqueeElement/bounce_event", "bounce")}} {{Deprecated_Inline}} +- `bounce` {{Deprecated_Inline}} - : Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to `alternate`. -- {{DOMxRef("HTMLMarqueeElement/finish_event", "finish")}} {{Deprecated_Inline}} +- `finish` {{Deprecated_Inline}} - : Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0. -- {{DOMxRef("HTMLMarqueeElement/start_event", "start")}} {{Deprecated_Inline}} +- `start` {{Deprecated_Inline}} - : Fires when the marquee starts scrolling. ## Examples diff --git a/files/en-us/web/html/element/marquee/index.md b/files/en-us/web/html/element/marquee/index.md index 4fd0366f8848c1e..adfed014331d46d 100644 --- a/files/en-us/web/html/element/marquee/index.md +++ b/files/en-us/web/html/element/marquee/index.md @@ -38,18 +38,18 @@ The **``** [HTML](/en-US/docs/Web/HTML) element is used to insert a scr ## Event handlers -- `onbounce` +- `onbounce` {{deprecated_inline}} - : Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to `alternate`. -- `onfinish` +- `onfinish` {{deprecated_inline}} - : Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0. -- `onstart` +- `onstart` {{deprecated_inline}} - : Fires when the marquee starts scrolling. ## Methods -- `start()` +- `start()` {{deprecated_inline}} - : Starts scrolling of the marquee. -- `stop()` +- `stop()` {{deprecated_inline}} - : Stops scrolling of the marquee. ## Examples From 06f0d9067ab8a4bf8695bc590bca8080ca16ed94 Mon Sep 17 00:00:00 2001 From: rebloor Date: Tue, 23 Apr 2024 12:43:41 +1200 Subject: [PATCH 684/746] Release notes for manifest permissions.webRequestAuthProvider support (#33151) Co-authored-by: Hamish Willee --- .../webextensions/api/webrequest/onauthrequired/index.md | 4 +--- files/en-us/mozilla/firefox/releases/126/index.md | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md index 55deda69f8ffff6..e36bd848e8c881e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md @@ -43,9 +43,7 @@ If your extension provides bad credentials, then the listener is called again. F In Firefox and Chrome Manifest V2 extensions, you must add the [`"webRequest"` and `"webRequestBlocking"` API permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions) to your `manifest.json`. -For Chrome Manifest V3 extensions, the `"webRequestBlocking"` permission is no longer available (except for policy-installed extensions). Instead, the `"webRequest"` and `"webRequestAuthProvider"` permissions enable you to supply credentials asynchronously. - -> **Note:** Firefox does not support `"webRequestAuthProvider"`, but support is planned. See [bug 1820569](https://bugzilla.mozilla.org/show_bug.cgi?id=1820569). +For Manifest V3 extensions, Chrome no longer supports the `"webRequestBlocking"` permission (except for policy-installed extensions). Instead, the `"webRequest"` and `"webRequestAuthProvider"` permissions enable you to supply credentials asynchronously. Firefox continues to support `"webRequestBlocking"` in Manifest V3 and provides `"webRequestAuthProvider"` to offer cross-browser compatibility. ## Proxy authorization diff --git a/files/en-us/mozilla/firefox/releases/126/index.md b/files/en-us/mozilla/firefox/releases/126/index.md index 44a56e8fd847ecd..6662c7afb985696 100644 --- a/files/en-us/mozilla/firefox/releases/126/index.md +++ b/files/en-us/mozilla/firefox/releases/126/index.md @@ -74,6 +74,7 @@ This article provides information about the changes in Firefox 126 that affect d - The {{WebExtAPIRef("commands.onCommand")}} event now passes the `tab` argument to the event listener. This enables extensions to apply a triggered shortcut to the page in which it was issued, without the need to call the `tabs.query()` method ([Firefox bug 1843866](https://bugzil.la/1843866)). - The {{WebExtAPIRef("runtime.MessageSender")}} type now includes the `origin` property. This enables message or connection requests to see the page or frame that opened the connection. This is useful for identifying if the origin can be trusted if it isn't apparent from the URL ([Firefox bug 1787379](https://bugzil.la/1787379)). +- The `"webRequestAuthProvider"` permission is now supported. This provides compatibility with Chrome for requesting permission for {{WebExtAPIRef("webRequest.onAuthRequired")}} in Manifest V3 ([Firefox bug 1820569](https://bugzil.la/1820569)). - The [`options_page` manifest key](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_page) is provided as an alias of the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) key. This has been provided to offer extensions better compatibility with Chrome ([Firefox bug 1816960](https://bugzil.la/1816960)). ### Removals From 4d8f69a23112f6ec7d8bfe1efcc6397423aa6782 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 23 Apr 2024 02:44:44 +0200 Subject: [PATCH 685/746] fix: auto-cleanup by bot (#33219) chore: auto-fix Markdownlint, Prettier, and front-matter issues --- files/en-us/mozilla/firefox/releases/125/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/125/index.md b/files/en-us/mozilla/firefox/releases/125/index.md index 8a76d80974b8d58..3d076d4f8471bbe 100644 --- a/files/en-us/mozilla/firefox/releases/125/index.md +++ b/files/en-us/mozilla/firefox/releases/125/index.md @@ -59,7 +59,7 @@ No notable changes. - Applications can monitor for [`contextlost`](/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event) and [`contextrestored`](/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event) events, which are fired on at [`HTMLCanvasElement`](/en-US/docs/Web/API/HTMLCanvasElement) when the context is lost and recovered, respectively, and can also check the context using [`CanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost). - After emitting `contentlost`, a browser will try and restart the lost context, by default, but code can prevent this by cancelling the event. - - Offscreen canvases can be monitored in the same way, but using [`OffScreenCanvas`](/en-US/docs/Web/API/OffScreenCanvas) events [`contextlost`](/en-US/docs/Web/API/OffScreenCanvas/contextlost_event) and [`contextrestored`](/en-US/docs/Web/API/OffScreenCanvas/contextrestored_event), along with [`OffscreenCanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D#context). + - Offscreen canvases can be monitored in the same way, but using [`OffScreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) events [`contextlost`](/en-US/docs/Web/API/OffScreenCanvas/contextlost_event) and [`contextrestored`](/en-US/docs/Web/API/OffScreenCanvas/contextrestored_event), along with [`OffscreenCanvasRenderingContext2D.isContextLost()`](/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D#context). #### Media, WebRTC, and Web Audio From 0b999684ee7e7e2849f3b486064ad4f279d6281a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 22 Apr 2024 21:25:18 -0700 Subject: [PATCH 686/746] minor: link min-content and max-content terms (#33216) * minor: link min-content and max-content terms * link terms (#33217) --- files/en-us/web/css/white-space-collapse/index.md | 2 +- files/en-us/web/css/white-space/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/white-space-collapse/index.md b/files/en-us/web/css/white-space-collapse/index.md index c2c99cd7d849fc5..67c889866be4971 100644 --- a/files/en-us/web/css/white-space-collapse/index.md +++ b/files/en-us/web/css/white-space-collapse/index.md @@ -45,7 +45,7 @@ The `white-space-collapse` property is specified as a single keyword chosen from - : The behavior is identical to `preserve`, except that: - Any sequence of preserved white space always takes up space, including at the end of the line. - A line-breaking opportunity exists after every preserved white space character, including between white space characters. - - Preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes (`min-content` size and `max-content` size). + - Preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes ({{cssxref("min-content")}} size and {{cssxref("max-content")}} size). > **Note:** _Segment break characters_ are characters such as line feeds that cause text to break onto new lines. diff --git a/files/en-us/web/css/white-space/index.md b/files/en-us/web/css/white-space/index.md index 9a067287c389654..cd53dc39b306043 100644 --- a/files/en-us/web/css/white-space/index.md +++ b/files/en-us/web/css/white-space/index.md @@ -61,7 +61,7 @@ white-space: unset; - Any sequence of preserved white space always takes up space, including at the end of the line. - A line-breaking opportunity exists after every preserved white space character, including between white space characters. - - Such preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes (`min-content` size and `max-content` size). + - Such preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes ({{cssxref("min-content")}} size and {{cssxref("max-content")}} size). The following table summarizes the behavior of the various `white-space` keyword values: From 99876b7b2ca4089a98ebd06ab4dc46fcf6d8da6b Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 23 Apr 2024 09:37:40 +0200 Subject: [PATCH 687/746] fix: Tidy up fetch with init examples on Request and Fetch pages (#33214) * fix: tidy up fetch request with init example * fix: tidy up fetch request with init example * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier --------- Co-authored-by: Jean-Yves Perrier --- files/en-us/web/api/fetch/index.md | 40 +++++++++----------- files/en-us/web/api/request/request/index.md | 40 +++++++++----------- 2 files changed, 34 insertions(+), 46 deletions(-) diff --git a/files/en-us/web/api/fetch/index.md b/files/en-us/web/api/fetch/index.md index 0b7286052ca5fc3..4ec6bfbd08c629f 100644 --- a/files/en-us/web/api/fetch/index.md +++ b/files/en-us/web/api/fetch/index.md @@ -295,50 +295,44 @@ fetch(myRequest) }); ``` -In the [Fetch with init then Request example](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-with-init-then-request/index.html) (see [Fetch Request init live](https://mdn.github.io/dom-examples/fetch/fetch-with-init-then-request/)), we do the same thing except that we pass in an -`init` object when we invoke `fetch()`: +In our [Fetch Request with init example](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request-with-init) (see [Fetch Request init live](https://mdn.github.io/dom-examples/fetch/fetch-request-with-init)) we do the same thing except that we pass in an _options_ object when we invoke `fetch()`. +In this case, we can set a {{httpheader("Cache-Control")}} value to indicate what kind of cached responses we're okay with: ```js const myImage = document.querySelector("img"); +const reqHeaders = new Headers(); -const myHeaders = new Headers(); -myHeaders.append("Accept", "image/jpeg"); +// A cached response is okay unless it's more than a week old +reqHeaders.set("Cache-Control", "max-age=604800"); -const myInit = { - method: "GET", - headers: myHeaders, - mode: "cors", - cache: "default", +const options = { + headers: reqHeaders, }; -const myRequest = new Request("flowers.jpg"); +// Pass init as an "options" object with our headers. +const req = new Request("flowers.jpg", options); -fetch(myRequest, myInit).then((response) => { - // … +fetch(req).then((response) => { + // ... }); ``` -You could also pass the `init` object in with the -`Request` constructor to get the same effect: +You could also pass the `init` object in with the `Request` constructor to get the same effect: ```js -const myRequest = new Request("flowers.jpg", myInit); +const req = new Request("flowers.jpg", options); ``` -You can also use an object literal as `headers` in -`init`. +You can also use an object literal as `headers` in `init`: ```js -const myInit = { - method: "GET", +const options = { headers: { - Accept: "image/jpeg", + "Cache-Control": "max-age=60480", }, - mode: "cors", - cache: "default", }; -const myRequest = new Request("flowers.jpg", myInit); +const req = new Request("flowers.jpg", options); ``` ## Specifications diff --git a/files/en-us/web/api/request/request/index.md b/files/en-us/web/api/request/request/index.md index ca24b139f47295c..f2faf81a81078c3 100644 --- a/files/en-us/web/api/request/request/index.md +++ b/files/en-us/web/api/request/request/index.md @@ -131,7 +131,6 @@ handled properly, then create an Object URL of it and display it in an ```js const myImage = document.querySelector("img"); - const myRequest = new Request("flowers.jpg"); fetch(myRequest) @@ -142,51 +141,46 @@ fetch(myRequest) }); ``` -In our [Fetch Request with init example](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-with-init-then-request) (see [Fetch Request init live](https://mdn.github.io/dom-examples/fetch/fetch-with-init-then-request/)) we do the same thing except that we pass in an _options_ object when we -invoke `fetch()`: +In our [Fetch Request with init example](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request-with-init) (see [Fetch Request init live](https://mdn.github.io/dom-examples/fetch/fetch-request-with-init)) we do the same thing except that we pass in an _options_ object when we invoke `fetch()`. +In this case, we can set a {{httpheader("Cache-Control")}} value to indicate what kind of cached responses we're okay with: ```js const myImage = document.querySelector("img"); +const reqHeaders = new Headers(); -const myHeaders = new Headers(); -myHeaders.append("Content-Type", "image/jpeg"); +// A cached response is okay unless it's more than a week old. +reqHeaders.set("Cache-Control", "max-age=604800"); -const myOptions = { - method: "GET", - headers: myHeaders, - mode: "cors", - cache: "default", +const options = { + headers: reqHeaders, }; -const myRequest = new Request("flowers.jpg", myOptions); +// pass init as an "options" object with our headers +const req = new Request("flowers.jpg", options); -fetch(myRequest).then((response) => { +fetch(req).then((response) => { // ... }); ``` -Note that you could also pass `myOptions` into the `fetch` call to get -the same effect, e.g.: +Note that you could also pass `options` into the `fetch` call to get the same effect, e.g.: ```js -fetch(myRequest, myOptions).then((response) => { +fetch(req, options).then((response) => { // ... }); ``` -You can also use an object literal as `headers` in `myOptions`. +You can also use an object literal as `headers` in `options`. ```js -const myOptions = { - method: "GET", +const options = { headers: { - "Content-Type": "image/jpeg", + "Cache-Control": "max-age=60480", }, - mode: "cors", - cache: "default", }; -const myRequest = new Request("flowers.jpg", myOptions); +const req = new Request("flowers.jpg", options); ``` You may also pass a {{domxref("Request")}} object to the `Request()` @@ -194,7 +188,7 @@ constructor to create a copy of the Request (This is similar to calling the {{domxref("Request.clone","clone()")}} method.) ```js -const copy = new Request(myRequest); +const copy = new Request(req); ``` > **Note:** This last usage is probably only useful in [ServiceWorkers](/en-US/docs/Web/API/Service_Worker_API). From edd12a268c7b2cbd1a5be394d9e89e9d8f285ad5 Mon Sep 17 00:00:00 2001 From: krystiancha Date: Tue, 23 Apr 2024 08:38:03 +0000 Subject: [PATCH 688/746] Fix incorrect link (#33222) --- .../video_player_styling_basics/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/media/audio_and_video_delivery/video_player_styling_basics/index.md b/files/en-us/web/media/audio_and_video_delivery/video_player_styling_basics/index.md index 2c6850fb8f3b615..b3862dcc42bdf5a 100644 --- a/files/en-us/web/media/audio_and_video_delivery/video_player_styling_basics/index.md +++ b/files/en-us/web/media/audio_and_video_delivery/video_player_styling_basics/index.md @@ -6,7 +6,7 @@ page-type: guide {{QuickLinksWithSubPages("/en-US/docs/Web/Media")}} -In the previous [Cross browser video player article](/en-US/docs/Web/Media) we described how to build a cross-browser HTML video player using the Media and Fullscreen APIs. This follow-up article looks at how to style this custom player, including making it responsive. +In the previous [Cross browser video player article](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player) we described how to build a cross-browser HTML video player using the Media and Fullscreen APIs. This follow-up article looks at how to style this custom player, including making it responsive. ## The example in action From adf4e2c9ee887bc74e4b67d9a809ee5c4a518ff8 Mon Sep 17 00:00:00 2001 From: Isaiah Odhner Date: Tue, 23 Apr 2024 07:52:04 -0400 Subject: [PATCH 689/746] Fix MIME typo (#33221) --- files/en-us/web/html/attributes/rel/preload/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/attributes/rel/preload/index.md b/files/en-us/web/html/attributes/rel/preload/index.md index 114db47ecb00e08..f272bb98211f17f 100644 --- a/files/en-us/web/html/attributes/rel/preload/index.md +++ b/files/en-us/web/html/attributes/rel/preload/index.md @@ -97,7 +97,7 @@ Note that for users whose browsers have both `image/avif` and `image/webp` suppo Therefore, specifying preloading for multiple types of the same resource is discouraged. Instead, the best practice is to specify preloading only for the type the majority of your users are likely to actually use. That's why the code in the example above doesn't specify preloading for the `image/webp` image. -However, the lack of preloading doesn't prevent the `image/webp` image from actually being used by those who need it: for users whose browsers don't have `image/avif` support but do have `image/webp` support, the code in the example above does still cause the `image/avif` image to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users. +However, the lack of preloading doesn't prevent the `image/webp` image from actually being used by those who need it: for users whose browsers don't have `image/avif` support but do have `image/webp` support, the code in the example above does still cause the `image/webp` image to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users. ## CORS-enabled fetches From 7cf04da4f63ea96edfddde0a74ac0d0b1bc4d12e Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 23 Apr 2024 20:20:47 +0800 Subject: [PATCH 690/746] Update {{AvailableInWorkers}} macros usage of WebRTC API (#33225) --- .../api/dedicatedworkerglobalscope/rtctransform_event/index.md | 2 +- files/en-us/web/api/rtcencodedaudioframe/data/index.md | 2 +- files/en-us/web/api/rtcencodedaudioframe/getmetadata/index.md | 2 +- files/en-us/web/api/rtcencodedaudioframe/index.md | 2 +- files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/data/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/getmetadata/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md | 2 +- files/en-us/web/api/rtcencodedvideoframe/type/index.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/api/dedicatedworkerglobalscope/rtctransform_event/index.md b/files/en-us/web/api/dedicatedworkerglobalscope/rtctransform_event/index.md index a319cc0ce62cb0a..4055135873b0132 100644 --- a/files/en-us/web/api/dedicatedworkerglobalscope/rtctransform_event/index.md +++ b/files/en-us/web/api/dedicatedworkerglobalscope/rtctransform_event/index.md @@ -6,7 +6,7 @@ page-type: web-api-event browser-compat: api.DedicatedWorkerGlobalScope.rtctransform_event --- -{{APIRef("WebRTC")}} {{AvailableInWorkers}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("dedicated")}} The **`rtctransform`** event is fired at a worker's {{domxref('DedicatedWorkerGlobalScope')}} object when an encoded video or audio frame has been queued for processing by a {{domxref("WebRTC API/Using Encoded Transforms", "WebRTC Encoded Transform", "", "nocode")}}. diff --git a/files/en-us/web/api/rtcencodedaudioframe/data/index.md b/files/en-us/web/api/rtcencodedaudioframe/data/index.md index 4d4bbe757d5b42f..906ed470d0e43d0 100644 --- a/files/en-us/web/api/rtcencodedaudioframe/data/index.md +++ b/files/en-us/web/api/rtcencodedaudioframe/data/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.RTCEncodedAudioFrame.data --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`data`** property of the {{domxref("RTCEncodedAudioFrame")}} interface returns a buffer containing the data for an encoded frame. diff --git a/files/en-us/web/api/rtcencodedaudioframe/getmetadata/index.md b/files/en-us/web/api/rtcencodedaudioframe/getmetadata/index.md index 99c26d6271c0fc9..9173d1426191c20 100644 --- a/files/en-us/web/api/rtcencodedaudioframe/getmetadata/index.md +++ b/files/en-us/web/api/rtcencodedaudioframe/getmetadata/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.RTCEncodedAudioFrame.getMetadata --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`getMetadata()`** method of the {{domxref("RTCEncodedAudioFrame")}} interface returns an object containing the metadata associated with the frame. diff --git a/files/en-us/web/api/rtcencodedaudioframe/index.md b/files/en-us/web/api/rtcencodedaudioframe/index.md index 521985729c197fe..3bfd799ed01ebdb 100644 --- a/files/en-us/web/api/rtcencodedaudioframe/index.md +++ b/files/en-us/web/api/rtcencodedaudioframe/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.RTCEncodedAudioFrame --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`RTCEncodedAudioFrame`** of the [WebRTC API](/en-US/docs/Web/API/WebRTC_API) represents an encoded audio frame in the WebRTC receiver or sender pipeline, which may be modified using a [WebRTC Encoded Transform](/en-US/docs/Web/API/WebRTC_API/Using_Encoded_Transforms). diff --git a/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md b/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md index 035c3e85d1f4015..7cfcba37988d308 100644 --- a/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md +++ b/files/en-us/web/api/rtcencodedaudioframe/timestamp/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.RTCEncodedAudioFrame.timestamp --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The readonly **`timestamp`** property of the {{domxref("RTCEncodedAudioFrame")}} interface indicates the time at which frame sampling started. diff --git a/files/en-us/web/api/rtcencodedvideoframe/data/index.md b/files/en-us/web/api/rtcencodedvideoframe/data/index.md index ea02209aaca7f15..5cd777e468b0720 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/data/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/data/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.RTCEncodedVideoFrame.data --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`data`** property of the {{domxref("RTCEncodedVideoFrame")}} interface returns a buffer containing the frame data. diff --git a/files/en-us/web/api/rtcencodedvideoframe/getmetadata/index.md b/files/en-us/web/api/rtcencodedvideoframe/getmetadata/index.md index 6b80247692676a8..755812d4017e2ce 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/getmetadata/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/getmetadata/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.RTCEncodedVideoFrame.getMetadata --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`getMetadata()`** method of the {{domxref("RTCEncodedVideoFrame")}} interface returns an object containing the metadata associated with the frame. diff --git a/files/en-us/web/api/rtcencodedvideoframe/index.md b/files/en-us/web/api/rtcencodedvideoframe/index.md index c91781db6853920..e6e959fe1afe8c2 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.RTCEncodedVideoFrame --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The **`RTCEncodedVideoFrame`** of the [WebRTC API](/en-US/docs/Web/API/WebRTC_API) represents an encoded video frame in the WebRTC receiver or sender pipeline, which may be modified using a [WebRTC Encoded Transform](/en-US/docs/Web/API/WebRTC_API/Using_Encoded_Transforms). diff --git a/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md b/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md index 5596501be0297c3..bd40829d3040528 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/timestamp/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.RTCEncodedVideoFrame.timestamp --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The readonly **`timestamp`** property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates the time at which frame sampling started. diff --git a/files/en-us/web/api/rtcencodedvideoframe/type/index.md b/files/en-us/web/api/rtcencodedvideoframe/type/index.md index b01327068454894..2e50efd4be9b1a4 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/type/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/type/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.RTCEncodedVideoFrame.type --- -{{APIRef("WebRTC")}} +{{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} The readonly **`type`** property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates whether this frame is a key frame, delta frame, or empty frame. From 08716a598d088b803857950657803092c709bb22 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 23 Apr 2024 17:34:35 +0200 Subject: [PATCH 691/746] fix: LibJS website has moved (#33235) --- .../web/javascript/javascript_technologies_overview/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/javascript_technologies_overview/index.md b/files/en-us/web/javascript/javascript_technologies_overview/index.md index 62830ab1b590a41..b30a5985fcc209a 100644 --- a/files/en-us/web/javascript/javascript_technologies_overview/index.md +++ b/files/en-us/web/javascript/javascript_technologies_overview/index.md @@ -106,7 +106,7 @@ Besides the above implementations, there are other popular JavaScript engines su - [Carakan](https://dev.opera.com/blog/carakan-faq/), used in earlier versions of Opera. - Microsoft's [Chakra]() engine, used in Internet Explorer (although the language it implements is formally called "JScript" to avoid trademark issues). Earlier versions of Edge used a new JavaScript engine, confusingly also called [Chakra](). -- [LibJS](https://libjs.dev/), used in the browser implementation of [SerenityOS](https://serenityos.org/). +- [LibJS](https://serenityos.github.io/libjs-website/), used in the browser implementation of [SerenityOS](https://serenityos.org/). - Mozilla's [Rhino]() engine, a JavaScript implementation written in Java, created primarily by Norris Boyd (also at Netscape). There are some engines specifically tailored for non-browser purposes: From da5dda6c72331dc8037cd922ee51141e3c1f8565 Mon Sep 17 00:00:00 2001 From: primeagen-rustaceans <115938518+primeagen-rustaceans@users.noreply.github.com> Date: Tue, 23 Apr 2024 21:05:36 +0530 Subject: [PATCH 692/746] Improve language (#33233) --- .../reference/global_objects/reflect/construct/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/reflect/construct/index.md b/files/en-us/web/javascript/reference/global_objects/reflect/construct/index.md index 3eb4c8da19b6c4b..74034add97fb271 100644 --- a/files/en-us/web/javascript/reference/global_objects/reflect/construct/index.md +++ b/files/en-us/web/javascript/reference/global_objects/reflect/construct/index.md @@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Reflect.construct {{JSRef}} -The **`Reflect.construct()`** static method is like the {{jsxref("Operators/new", "new")}} operator, but as a function. It is equivalent to calling `new target(...args)`. It gives also the added option to specify a different [`new.target`](/en-US/docs/Web/JavaScript/Reference/Operators/new.target) value. +The **`Reflect.construct()`** static method is like the {{jsxref("Operators/new", "new")}} operator, but as a function. It is equivalent to calling `new target(...args)`. It additionally allows to specify a different [`new.target`](/en-US/docs/Web/JavaScript/Reference/Operators/new.target) value. {{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}} From b62406e1ac7ad23f8693131e9819f0e12d295194 Mon Sep 17 00:00:00 2001 From: nad182 Date: Tue, 23 Apr 2024 15:23:46 -0400 Subject: [PATCH 693/746] Fix the code example to show output values in the correct order. (#33240) --- .../reference/global_objects/set/symmetricdifference/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/set/symmetricdifference/index.md b/files/en-us/web/javascript/reference/global_objects/set/symmetricdifference/index.md index 3bf0a6e7d28f4aa..3575ee8aa037f06 100644 --- a/files/en-us/web/javascript/reference/global_objects/set/symmetricdifference/index.md +++ b/files/en-us/web/javascript/reference/global_objects/set/symmetricdifference/index.md @@ -47,7 +47,7 @@ The following example computes the symmetric difference between the set of even ```js const evens = new Set([2, 4, 6, 8]); const squares = new Set([1, 4, 9]); -console.log(evens.symmetricDifference(squares)); // Set(5) { 1, 2, 6, 8, 9 } +console.log(evens.symmetricDifference(squares)); // Set(5) { 2, 6, 8, 1, 9 } ``` ## Specifications From c07ea28f0692d2a9448fd610bdd5471559786221 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Tue, 23 Apr 2024 20:25:50 +0100 Subject: [PATCH 694/746] Correct info on indeterminate checkboxes (#33239) --- files/en-us/web/html/element/input/checkbox/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/html/element/input/checkbox/index.md b/files/en-us/web/html/element/input/checkbox/index.md index 62ed6a39a544676..0181c476269e7c5 100644 --- a/files/en-us/web/html/element/input/checkbox/index.md +++ b/files/en-us/web/html/element/input/checkbox/index.md @@ -109,13 +109,15 @@ Beyond accessibility, this is another good reason to properly set up `