From a468a537c0234a3035951e80af76715e1c36c8f7 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Mon, 27 Nov 2023 23:46:20 +0300 Subject: [PATCH 001/390] Fix `MacroBrokenLinkError` on `Web/API/Document/applets` (#30579) fix 'MacroBrokenLinkError' on 'Web/API/Document/applets' --- files/en-us/web/api/document/applets/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document/applets/index.md b/files/en-us/web/api/document/applets/index.md index 99502c079962d5e..1c9acb921ad7b83 100644 --- a/files/en-us/web/api/document/applets/index.md +++ b/files/en-us/web/api/document/applets/index.md @@ -12,7 +12,7 @@ browser-compat: api.Document.applets The **`applets`** property of the {{domxref("Document")}} returns an empty {{domxref("HTMLCollection")}}. This property is kept only for compatibility reasons; in older versions of browsers, it returned a list of the applets within a document. -> **Note:** Support for the {{htmlelement("applet")}} element has been removed by all browsers. Therefore, calling `document.applets` always +> **Note:** Support for the `` element has been removed by all browsers. Therefore, calling `document.applets` always > returns an empty collection. ## Value From 679f5893a4734fd136b80140e13262422d76b123 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 27 Nov 2023 13:05:25 -0800 Subject: [PATCH 002/390] CSS ::marker: typo and grammar (#30580) --- files/en-us/web/css/_doublecolon_marker/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_marker/index.md b/files/en-us/web/css/_doublecolon_marker/index.md index 17190b140610287..4af55ff513a9aeb 100644 --- a/files/en-us/web/css/_doublecolon_marker/index.md +++ b/files/en-us/web/css/_doublecolon_marker/index.md @@ -13,16 +13,16 @@ The **`::marker`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/C ## Allowable properties -Only certain CSS properties can be used in a rule with `::marker` as a selector: +The `::marker` pseudo-element supports a limited number of CSS properties, including: - All [font properties](/en-US/docs/Web/CSS/CSS_fonts) - The {{CSSxRef("white-space")}} property - {{CSSxRef("color")}} -- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} and {{CSSxRef("direction")}} properties +- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}}, and {{CSSxRef("direction")}} properties - The {{CSSxRef("content")}} property - All [animation](/en-US/docs/Web/CSS/CSS_animations#properties) and [transition](/en-US/docs/Web/CSS/CSS_transitions#properties) properties -> **Note:** The specification states that additional CSS properties may be supported in future. +> **Note:** The specification states that additional CSS properties may be supported in the future. ## Syntax From b16e0cd21bfe6ae138711aaa57bb138dfa19a38e Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 28 Nov 2023 09:14:28 +1100 Subject: [PATCH 003/390] FF121 Relnote: WebTransportSendStream.sendOrder supported (#30564) * FF121 Relnote: WebTransportSendStream.sendOrder supported * Add WebTransportSendStream to FF114 release note --- files/en-us/mozilla/firefox/releases/114/index.md | 2 +- files/en-us/mozilla/firefox/releases/121/index.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md index 4e8ea98a1856c90..c2e471c294f75e0 100644 --- a/files/en-us/mozilla/firefox/releases/114/index.md +++ b/files/en-us/mozilla/firefox/releases/114/index.md @@ -40,7 +40,7 @@ No notable changes. ### APIs - [`Window.print()`](/en-US/docs/Web/API/Window/print) now opens a print dialog on Firefox for Android, allowing the current document to be printed ([Firefox bug 1809922](https://bugzil.la/1809922)). -- The [WebTransport API](/en-US/docs/Web/API/WebTransport_API) is now supported, which includes the following interfaces: [`WebTransport`](/en-US/docs/Web/API/WebTransport), [`WebTransportBidirectionalStream`](/en-US/docs/Web/API/WebTransportBidirectionalStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream), [`WebTransportReceiveStream`](/en-US/docs/Web/API/WebTransportReceiveStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream) and [`WebTransportError`](/en-US/docs/Web/API/WebTransportError). +- The [WebTransport API](/en-US/docs/Web/API/WebTransport_API) is now supported, which includes the following interfaces: [`WebTransport`](/en-US/docs/Web/API/WebTransport), [`WebTransportBidirectionalStream`](/en-US/docs/Web/API/WebTransportBidirectionalStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream), [`WebTransportReceiveStream`](/en-US/docs/Web/API/WebTransportReceiveStream), [`WebTransportSendStream`](/en-US/docs/Web/API/WebTransportSendStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream) and [`WebTransportError`](/en-US/docs/Web/API/WebTransportError). For more information see [Firefox bug 1692754](https://bugzil.la/1692754), [Firefox bug 1818754](https://bugzil.la/1818754), and [Firefox bug 1791835](https://bugzil.la/1791835). - [`CSSImportRule.supportsText`](/en-US/docs/Web/API/CSSImportRule/supportsText) can now be used for getting any `supports()` conditions that were specified when using the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule) ([Firefox bug 1829590](https://bugzil.la/1829590)). diff --git a/files/en-us/mozilla/firefox/releases/121/index.md b/files/en-us/mozilla/firefox/releases/121/index.md index 19fd497049708de..1ed738400dc0760 100644 --- a/files/en-us/mozilla/firefox/releases/121/index.md +++ b/files/en-us/mozilla/firefox/releases/121/index.md @@ -61,6 +61,8 @@ This article provides information about the changes in Firefox 121 that affect d ### APIs +- The {{domxref("WebTransportSendStream.sendOrder", "sendOrder")}} property of the {{domxref("WebTransportSendStream")}} interface is now supported, allowing the relative priority of outgoing [WebTransport API](/en-US/docs/Web/API/WebTransport_API) _bidirectional_ streams to be read and changed after the stream is created. Note that this cannot be used to modify the priority of unidirectional streams, as Firefox implements them as {{domxref("WritableStream")}} instead of {{domxref("WebTransportSendStream")}}. (For more information see [Firefox bug 1853444](https://bugzil.la/1853444).) + #### DOM #### Media, WebRTC, and Web Audio From 4c47e035a6b93ba35a14b943b83a637056fb6d10 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Mon, 27 Nov 2023 14:54:39 -0800 Subject: [PATCH 004/390] Add a more realistic EventTarget example (#30356) * Add a more realistic EventTarget example The previous example had the event target handling events dispatched by itself, which is an unusual way of using an event target. This PR proposes a new example where the event target dispatches events which another system listens for and responds to. * lint Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * lint Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix variable name Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> * add live example * consistent quote marks * mdn linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove history list * mdn linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove log we don't really need it to illustrate how the valuechange event works --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../web/api/eventtarget/eventtarget/index.md | 58 +++++++++++++++---- 1 file changed, 46 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/api/eventtarget/eventtarget/index.md b/files/en-us/web/api/eventtarget/eventtarget/index.md index ee6e47ca3ebc670..14d4e797f7c2cbf 100644 --- a/files/en-us/web/api/eventtarget/eventtarget/index.md +++ b/files/en-us/web/api/eventtarget/eventtarget/index.md @@ -28,29 +28,63 @@ A new instance of the {{domxref("EventTarget")}} object. ## Examples +### Implementing a counter + +This example implements a `Counter` class, with `increment()` and `decrement()` methods. If fires a custom `"valuechange"` event when either of these methods is called. + +#### HTML + +```html + +0 + +``` + +#### JavaScript + ```js -class MyEventTarget extends EventTarget { - constructor(mySecret) { +class Counter extends EventTarget { + constructor(initialValue = 0) { super(); - this._secret = mySecret; + this.value = initialValue; + } + + #emitChangeEvent() { + this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value })); } - get secret() { - return this._secret; + increment() { + this.value++; + this.#emitChangeEvent(); + } + + decrement() { + this.value--; + this.#emitChangeEvent(); } } -let myEventTarget = new MyEventTarget(5); -let value = myEventTarget.secret; // === 5 -myEventTarget.addEventListener("foo", (e) => { - myEventTarget._secret = e.detail; +const initialValue = 0; +const counter = new Counter(initialValue); +document.querySelector("#currentValue").innerText = initialValue; + +counter.addEventListener("valuechange", (event) => { + document.querySelector("#currentValue").innerText = event.detail; +}); + +document.querySelector("#inc").addEventListener("click", () => { + counter.increment(); }); -let event = new CustomEvent("foo", { detail: 7 }); -myEventTarget.dispatchEvent(event); -let newValue = myEventTarget.secret; // === 7 +document.querySelector("#dec").addEventListener("click", () => { + counter.decrement(); +}); ``` +#### Result + +{{EmbedLiveSample("Implementing a counter")}} + ## Specifications {{Specifications}} From 6021469fc4777ec7bc48ba840e1ba01b1d5ca4e8 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 27 Nov 2023 15:09:29 -0800 Subject: [PATCH 005/390] counter-reset: new example and description (#30440) * counter-reset: new example and description * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/counter-reset/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Edits per review * Edits per review * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/counter-reset/index.md | 131 +++++++++++++-------- 1 file changed, 80 insertions(+), 51 deletions(-) diff --git a/files/en-us/web/css/counter-reset/index.md b/files/en-us/web/css/counter-reset/index.md index 72a75396f9dc598..42467895083faac 100644 --- a/files/en-us/web/css/counter-reset/index.md +++ b/files/en-us/web/css/counter-reset/index.md @@ -7,40 +7,29 @@ browser-compat: css.properties.counter-reset {{CSSRef}} -The **`counter-reset`** [CSS](/en-US/docs/Web/CSS) property resets a [CSS counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) to a given value. -This property will create a new counter or reversed counter with the given name on the specified element. - -Normal counters have a default initial value of 0. -Reversed counters are intended to count down, and have a default initial value set to the number of elements at the current level. -The default initial values make it easy to implement the two most common numbering patterns: counting up from one to the number of elements, and counting down from the number of elements to one. - -A counter's value is increased or decreased using the {{cssxref("counter-increment")}} CSS property, and the value of an existing counter may be set using {{cssxref("counter-set")}}. +The **`counter-reset`** [CSS](/en-US/docs/Web/CSS) property creates named [CSS counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one. {{EmbedInteractiveExample("pages/css/counter-reset.html")}} -In addition to author-created counters, the property can also reset the `list-item` counters used by ordered lists (as created using {{HTMLElement("ol")}} elements). -These have the same behavior as author-created counters, except they are _automatically_ incremented/decremented by one with each list element. -This behavior can be overridden using {{cssxref("counter-increment")}}. - ## Syntax ```css -/* Set "my-counter" to 0 */ +/* Create a counter with initial default value 0 */ counter-reset: my-counter; -/* Set "my-counter" to -3 */ +/* Create a counter and initialize as "-3" */ counter-reset: my-counter -3; -/* Set reversed "my-counter" to "the number of peer elements" */ +/* Create a reversed counter with initial default value */ counter-reset: reversed(my-counter); -/* Set reversed "my-counter" to -1 */ +/* Create a reversed counter and initialize as "-1" */ counter-reset: reversed(my-counter) -1; -/* Set counter2 to 9 and reversed "counter1" and "counter3" to 1 and 4, respectively*/ -counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 4; +/* Create reversed and regular counters at the same time */ +counter-reset: reversed(pages) 10 items 1 reversed(sections) 4; -/* Cancel any reset that could have been set in less specific rules */ +/* Remove all counter-reset declarations in less specific rules */ counter-reset: none; /* Global values */ @@ -51,25 +40,57 @@ counter-reset: revert-layer; counter-reset: unset; ``` -The `counter-reset` property is specified as either one of the following: - -- A `` or a `reversed()` naming the counter, followed optionally by an ``. - Note that the `reversed()` method is used to create a "reversed" counter. - You may specify as many counters and reversed counters to reset as you want, with each counter or counter-number pair separated by a space. -- The keyword value `none`. - -The "implicit" counter named `list-item` can be used to control the numbering for ordered lists, as created using {{HTMLElement("ol")}} - ### Values +The `counter-reset` property accepts a list of one or more space-separated counter names or the keyword `none`. For counter names, regular counters use the format ``, and reversed counters use `reversed()`, where `` is a {{cssxref("custom-ident", "<custom-ident>")}} or `list-item` for the built-in {{HTMLElement("ol")}} counter. Optionally, each counter name can be followed by an `` to set its initial value. + - {{cssxref("custom-ident", "<custom-ident>")}} - - : The name of the counter to reset. + - : Specifies the counter name to create and initialize using the {{cssxref("custom-ident", "<custom-ident>")}} format. - {{cssxref("<integer>")}} - : The value to reset the counter to on each occurrence of the element. Defaults to `0` if not specified. - `none` - - : No counter reset is to be performed. - This can be used to override a `counter-reset` defined in a less specific rule. + - : Specifies that no counter initialization should occur. + This value is useful for overriding `counter-reset` values in less specific rules. + +## Description + +The `counter-reset` property can create both regular and, in browsers that support it, reversed counters. You can create multiple regular and reversed counters, each separated by a space. Counters can be a standalone name or a space-separated name-value pair. + +After creating a counter using `counter-reset`, you can adjust its value by using the {{cssxref("counter-set")}} property. This is counterintuitive because, despite its name, the `counter-reset` property is used for creating and initializing counters, while the `counter-set` property is used for resetting the value of an existing counter. + +Setting `counter-increment: none` on a selector with greater specificity overrides the creation of the named counter set on selectors with lower specificity. + +### Default initial values + +The default initial values of both regular and reversed counters make it easy to implement the two most common numbering patterns: counting up from one to the number of elements and counting down from the number of elements to one, respectively. By including a counter value for a named counter, your counter can count up or down, starting at an integer value. + +Regular counters default to `0` if no reset value is provided. By default, regular counters increment by one, which can be adjusted with the {{cssxref("counter-increment")}} property. + +```css +h1 { + /* Create the counters "chapter" and "page" and set to initial default value. + Create the counter "section" and set to "4". */ + counter-reset: chapter section 4 page; +} +``` + +### Reversed counters + +When creating reversed counters without a value, the counter will start with the value equal to the number of elements in the set, counting down so the last element in the set is `1`. By default, reverse counters decrement by one; this can also be changed with the `counter-increment` property. + +```css +h1 { + /* Create reversed counters "chapter" and "section". + Set "chapter" as the number of elements and "section" as "10". + Create the counter "pages" with the initial default value. */ + counter-reset: reversed(chapter) reversed(section) 10 pages; +} +``` + +### Built-in `list-item` counter + +Ordered lists ({{HTMLElement("ol")}}) come with built-in `list-item` counters that control their numbering. These counters automatically increase or decrease by one with each list item. The `counter-reset` property can be used to reset the `list-item` counters. Like with other counters, you can override the default increment value for `list-item` counters by using the {{cssxref("counter-increment")}} property. ## Formal definition @@ -81,31 +102,38 @@ The "implicit" counter named `list-item` can be used to control the numbering fo ## Examples -The following examples show how to reset the counters, but not how they are incremented, decremented, and displayed. +### Overriding the `list-item` counter -For more-complete examples see [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters). +In this example, the `counter-reset` property is used to set a starting value for an implicit `list-item` counter. -### Resetting named counters +#### HTML -```css -h1 { - counter-reset: chapter section 1 page; - /* Sets the chapter and page counters to 0, - and the section counter to 1 */ -} +```html +
    +
  1. First
  2. +
  3. Second
  4. +
  5. Third
  6. +
  7. Fourth
  8. +
  9. Fifth
  10. +
``` -### Reversing a counter +#### CSS + +Using `counter-reset`, we set the implicit `list-item` counter to start at a value other than the default `1`: ```css -h1 { - counter-reset: reversed(chapter) reversed(section) 1 page; - /* Sets the reversed flag on the chapter and section counters. - Sets the chapter to the number of elements, the section counter to 1, - and the page counters to 0*/ +ol { + counter-reset: list-item 3; } ``` +#### Result + +{{EmbedLiveSample("Overriding the list-item counter", 140, 300)}} + +Using `counter-reset`, we were able to set the implicit `list-item` counter to start counting at `3`, similar to the effect of writing [`
    `](/en-US/docs/Web/HTML/Element/ol#start) in HTML. + ## Specifications {{Specifications}} @@ -116,11 +144,12 @@ h1 { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) -- {{cssxref("counter-increment")}} -- {{cssxref("counter-set")}} -- {{cssxref("@counter-style")}} +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) guide +- {{cssxref("counter-increment")}} property +- {{cssxref("counter-set")}} property +- {{cssxref("@counter-style")}} at-rule - {{cssxref("counter", "counter()")}} and {{cssxref("counters", "counters()")}} functions - {{cssxref("content")}} property -- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module +- {{cssxref("::marker")}} pseudo-class - [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module +- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module From 30bf06a9aaef9429ecf3dc36f0bec936b610c13f Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 28 Nov 2023 13:56:22 +0800 Subject: [PATCH 006/390] remove incorrect usage of {{readonly}} (#30588) inconsitant usgae of FontData.blob --- files/en-us/web/api/fontdata/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/fontdata/index.md b/files/en-us/web/api/fontdata/index.md index dda917d4d2c3bd5..a2c31cdb5029c74 100644 --- a/files/en-us/web/api/fontdata/index.md +++ b/files/en-us/web/api/fontdata/index.md @@ -26,7 +26,7 @@ The **`FontData`** interface of the {{domxref("Local Font Access API", "Local Fo ## Instance methods -- {{domxref('FontData.blob()')}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref('FontData.blob()')}} {{Experimental_Inline}} - : Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("Blob")}} containing the raw bytes of the underlying font file. ## Examples From 1311596f6e8ecb5886caa9b24e4f917d6ef8c6cc Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 28 Nov 2023 17:29:40 +1100 Subject: [PATCH 007/390] Client side frameworks - confusion with previous paragraph (#30582) --- .../client-side_javascript_frameworks/introduction/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md index baf81940171bc4b..4518cfa324fe455 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md @@ -21,9 +21,7 @@ We begin our look at frameworks with a general overview of the area, looking at Objective: - To understand how client-side JavaScript frameworks came to exist, what - problems they solve, what alternatives there are, and how to go about - choosing one. + To understand how client-side JavaScript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one. @@ -292,7 +290,7 @@ If you're looking for tools to expedite the web development process, and you kno **Content-management systems** (**CMSes**) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this. -Popular examples include [Wordpress](https://wordpress.com/), [Joomla](https://www.joomla.org/), and [Drupal](https://www.drupal.org/). +A few popular CMS systems include [Wordpress](https://wordpress.com/), [Joomla](https://www.joomla.org/), and [Drupal](https://www.drupal.org/). ### Server-side rendering From 70ae69d428b14d403032c01315c0c59eb80e628e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 27 Nov 2023 23:02:02 -0800 Subject: [PATCH 008/390] Rewrite: 2002 list item article (#30586) --- .../consistent_list_indentation/index.md | 183 ++++++++++++------ 1 file changed, 122 insertions(+), 61 deletions(-) diff --git a/files/en-us/web/css/css_lists/consistent_list_indentation/index.md b/files/en-us/web/css/css_lists/consistent_list_indentation/index.md index 5c835cc3b812bd8..f587c0dd53e9ad7 100644 --- a/files/en-us/web/css/css_lists/consistent_list_indentation/index.md +++ b/files/en-us/web/css/css_lists/consistent_list_indentation/index.md @@ -6,108 +6,169 @@ page-type: guide {{CSSRef}} -One of the most common style changes made to lists is a change in the indentation distance—that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they sit stubbornly in place in Gecko-based browsers. This article will help you understand the problems that can occur and how to avoid them. +One of the most common style changes made to lists is a change in the indentation distance—that is, how far the list items are pushed over to the right. This article will help you understand indenting list items so that list item markers are visible. To understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. ## Making a List -First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself. It hangs alone in the void, simple and unadorned, as shown in Figure 1. +### The stand-alone list item -![Figure 1](consistent-list-indentation-figure1.gif) - -That dotted red border represents the outer edges of the content area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2. - -![Figure 2](consistent-list-indentation-figure2.gif) - -Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., `
      `). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3. - -![Figure 3](consistent-list-indentation-figure3.gif) - -Here, the dotted blue border shows us the edges of the `
        ` element's content area. Since we have no padding for the `
          ` element, its content wraps snugly around the three list items. - -Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4. - -![Figure 4](consistent-list-indentation-figure4.gif) - -Visually, the markers are _outside_ the content area of the `
            `, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the `
          • ` elements, not the `
              `. They're sort of like appendages to the list items, hanging outside the content-area of the `
            • ` but still attached to the `
            • `. - -This is why, in every modern browser, markers are placed outside any border set for an `
            • ` element, assuming the value of `list-style-position` is `outside`. If it's changed to `inside`, then the markers are brought inside the `
            • `'s content, as though they're an inline box placed at the very beginning of the `
            • `. - -## Indenting It Twice - -So how will all this appear in a document? At the moment, we have a situation analogous to these styles: +First, we consider the pure list item, not nested in a list of items. When using the HTML {{htmlelement("li")}} element, the browser sets the {{cssxref("display")}} value to `list-item`. Whether list items not nested in a list are provided a marker (otherwise known as a "bullet") depends on the browser. We can remove that bullet with {{cssxref("list-style-type")}}`: none`. ```css -ul, li { - margin-left: 0; - padding-left: 0; + border: 1px dashed red; +} +li:nth-of-type(n + 4) { + list-style-type: none; } ``` -If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window. +```css hidden +li { + width: 15em; +} +``` -To avoid this and get some indentation, there are only three options available to browser implementors. +```html hidden +

              Default bullets depend on the browser:

              +
            • A list item
            • +
            • A list item
            • +
            • A list item
            • +

              These list items have their bullets removed:

              +
            • A list item
            • +
            • A list item
            • +
            • A list item
            • +``` -1. Give each `
            • ` element a left margin. -2. Give the `
                ` element a left margin. -3. Give the `
                  ` element some left padding. +{{EmbedLiveSample("The stand-alone list item", "100%", 200)}} -As it turns out, nobody seems to have used the first option. The second option was taken by Opera. The third was adopted by Firefox. +That dotted red border represents the outer edges of the content area of each list item. At this point, the list items have no padding or borders. -Let's look at the two approaches for a moment. In Opera, the lists are indented by setting a left margin of 40 pixels on the `
                    ` element. If we apply a background color to the `
                      ` element and leave the list item and `
                        ` borders in place, we get the result shown in Figure 5. +### List items nested in a list -![Figure 5](consistent-list-indentation-figure5.gif) +Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., `
                          `). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. -Gecko, on the other hand, sets a left _padding_ of 40 pixels for the `
                            ` element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6. +```css +ul { + border: 1px dashed blue; +} +li { + border: 1px dashed red; + list-style-type: none; +} +``` -![Figure 6](consistent-list-indentation-figure6.gif) +```css hidden +body { + width: 15em; +} +``` -As we can see, the markers remain attached to the `
                          • ` elements, no matter where they are. The difference is entirely in how the `
                              ` is styled. We can only see the difference if we try to set a background or border on the `
                                ` element. +```html hidden +
                                  +
                                • A list item
                                • +
                                • A list item
                                • +
                                • A list item
                                • +
                                +``` -## Finding Consistency +{{EmbedLiveSample("List items nested in a list", "100%", 150)}} -Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko and Opera, you need to set **both** the left margin and left padding of the `
                                  ` element. We can ignore `
                                • ` altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write: +The dotted blue border shows us the edges of the `
                                    ` element's content area. That parent comes with both margin and padding. Browsers set the following default styles on unordered lists: ```css ul { - margin-left: 0; - padding-left: 40px; + /* user-agent styles */ + display: block; + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + padding-inline-start: 40px; } ``` -If you're more interested in following the Opera model, then: +### Default bullet position + +Now we put the list item markers back in. Since this is an unordered list, the list items inherit `list-style-type: disc;` browser styles, which are filled-circle "bullets," from their `
                                      ` parent. ```css +li { + border: 1px dashed red; +} ul { - margin-left: 40px; - padding-left: 0; + border: 1px dotted blue; +} +ul:last-of-type { + list-style-position: inside; } ``` -Of course, you can fill in your preferred values. Set both to `1.25em`, if you like — there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin: - -```css +```css hidden ul { - margin-left: 0; - padding-left: 0; + width: 15em; } ``` -Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the `body`, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible. +```html hidden +

                                      These default to list-style-position: outside.

                                      +
                                        +
                                      • A list item
                                      • +
                                      • A list item
                                      • +
                                      • A list item
                                      • +
                                      +

                                      These have list-style-position: inside set.

                                      +
                                        +
                                      • A list item
                                      • +
                                      • A list item
                                      • +
                                      • A list item
                                      • +
                                      +``` + +{{EmbedLiveSample("Inheriting `list-style-type`", "100%", 220)}} -## Conclusion +Visually, the markers are _outside_ the content area of the `
                                        `, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the `
                                      • ` elements, not the `
                                          `. They're sort of like appendages to the list items, hanging outside the content-area of the `
                                        • ` but still attached to the `
                                        • `. -In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation. +This is why, in every modern browser, markers are placed outside any border set for an `
                                        • ` element when the value of {{cssxref("list-style-position")}} defaults to or is explicitly set to `outside`. When we changed it to `inside`, the markers were brought inside the `
                                        • `'s content, as though they're an inline box placed at the very beginning of the `
                                        • `. -## Recommendations +## Default indentation -- When altering the indentation of lists, make sure to set both the padding and margin. +As noted above, all browsers provide the `
                                            ` parent both margin and padding. While user agents CSS differ somewhat, they all include: -## Original Document Information +```css +ul, +ol { + /* user-agent styles */ + display: block; + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + padding-inline-start: 40px; +} +ol { + list-style-type: decimal; +} +li { + display: list-item; + text-align: match-parent; +} +::marker { + unicode-bidi: isolate; + font-variant-numeric: tabular-nums; + text-transform: none; +} +``` + +All browsers set {{cssxref("padding-inline-start")}} to 40 pixels for the `
                                              ` element by default. In left-to-right languages, like English, this is the left _padding_. Any padding set in the author style sheets (that's your stylesheet) takes precedence. + +If you want to be explicit, set the following in your style sheets to ensure, unless otherwise overridden, the list items in the main content area of your document, contained in the {{htmlelement("main")}} section, are properly indented: + +```css +:where(main ol, main ul) { + margin-inline-start: 0; + padding-inline-start: 40px; +} +``` -- Author(s): Eric A. Meyer, Netscape Communications -- Last Updated Date: Published 30 Aug 2002 -- Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved. -- Note: This reprinted article was originally part of the DevEdge site. +And always nest your `
                                            • ` elements in a `
                                                ` or `
                                                  `. From 0c649a51088092a95277943ce3f572b149decd25 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 27 Nov 2023 23:17:13 -0800 Subject: [PATCH 009/390] CSS list-style-* properties refresh (#30578) * see also links * a11y note. FF prefix. currentcolor. * See also, content added to examples * list-style-position: see also, default value * see also. @counter-style comment and link to converter * default value * list style properties * Update files/en-us/web/css/list-style-image/index.md * Update files/en-us/web/css/list-style-image/index.md * Update files/en-us/web/css/list-style-image/index.md --------- Co-authored-by: Jean-Yves Perrier --- files/en-us/web/css/list-style-image/index.md | 14 +++++++-- .../web/css/list-style-position/index.md | 9 ++++-- files/en-us/web/css/list-style-type/index.md | 31 ++++++++++++------- files/en-us/web/css/list-style/index.md | 2 +- 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/files/en-us/web/css/list-style-image/index.md b/files/en-us/web/css/list-style-image/index.md index 917a002eab1e050..4020317cf0aa781 100644 --- a/files/en-us/web/css/list-style-image/index.md +++ b/files/en-us/web/css/list-style-image/index.md @@ -40,7 +40,7 @@ list-style-image: unset; - {{cssxref("<image>")}} - : A valid image to use as the marker. - `none` - - : Specifies that no image is used as the marker. If this value is set, the marker defined in {{ Cssxref("list-style-type") }} will be used instead. + - : Specifies that no image is used as the marker. If this value is set, the marker defined in {{ Cssxref("list-style-type") }} will be used instead. This is the default value for {{cssxref("list-style")}}. ## Formal definition @@ -54,6 +54,8 @@ list-style-image: unset; ### Using a url value +This example has a star as a marker, which we include using the {{cssxref("url", "url()")}} image function. + #### HTML ```html @@ -77,6 +79,8 @@ ul { ### Using a gradient +This example has a [CSS gradient](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) as a marker, which we create uses the {{cssxref("gradient/linear-gradient", "linear-gradient()")}} image function. + #### HTML ```html @@ -109,5 +113,9 @@ ul { ## See also -- {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}} -- {{cssxref("url", "url()")}} function +- {{Cssxref("list-style")}} shorthand +- {{Cssxref("list-style-type")}} property +- {{Cssxref("list-style-position")}} property +- {{cssxref("::marker")}} pseudo-element +- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module +- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module diff --git a/files/en-us/web/css/list-style-position/index.md b/files/en-us/web/css/list-style-position/index.md index dfe6d7fb2c97c15..36730bb9cf3939c 100644 --- a/files/en-us/web/css/list-style-position/index.md +++ b/files/en-us/web/css/list-style-position/index.md @@ -33,7 +33,7 @@ The `list-style-position` property is specified as one of the keyword values lis - `inside` - : The {{cssxref("::marker")}} is the first element among the list item's contents. - `outside` - - : The {{cssxref("::marker")}} is outside the principal block box. + - : The {{cssxref("::marker")}} is outside the principal block box. This is the default value for {{cssxref("list-style")}}. ## Description @@ -114,4 +114,9 @@ It is often more convenient to use the shorthand {{cssxref("list-style")}}. ## See also -- {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}} +- {{Cssxref("list-style")}} shorthand +- {{Cssxref("list-style-type")}} property +- {{Cssxref("list-style-image")}} property +- {{cssxref("::marker")}} pseudo-element +- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module +- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module diff --git a/files/en-us/web/css/list-style-type/index.md b/files/en-us/web/css/list-style-type/index.md index 6ba6255e5a8f932..d3f2507f19062e5 100644 --- a/files/en-us/web/css/list-style-type/index.md +++ b/files/en-us/web/css/list-style-type/index.md @@ -11,7 +11,7 @@ The **`list-style-type`** [CSS](/en-US/docs/Web/CSS) property sets the marker (s {{EmbedInteractiveExample("pages/css/list-style-type.html")}} -The [color](/en-US/docs/Web/CSS/color_value) of the marker will be the same as the computed color of the element it applies to. +The marker will be [`currentcolor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword), the same as the computed [color](/en-US/docs/Web/CSS/color_value) of the element it applies to. Only a few elements ({{HTMLElement("li")}} and {{HTMLElement("summary")}}) have a default value of `display: list-item`. However, the `list-style-type` property may be applied to any element whose {{cssxref("display")}} value is set to `list-item`. Moreover, because this property is inherited, it can be set on a parent element (commonly {{HTMLElement("ol")}} or {{HTMLElement("ul")}}) to make it apply to all list items. @@ -175,19 +175,22 @@ Refer to the [All list style types](#all_list_style_types) example to see the ab ### Non-standard extensions -A few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers support which extension. +A few predefined types are supported by Mozilla (Firefox) with a `-moz-` prefix. -- `-moz-ethiopic-halehame` -- `-moz-ethiopic-halehame-am` -- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` -- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` -- `hangul`, `-moz-hangul` -- `hangul-consonant`, `-moz-hangul-consonant` -- `urdu`, `-moz-urdu` +- `ethiopic-halehame`: `-moz-ethiopic-halehame` +- `ethiopic-halehame-am`: `-moz-ethiopic-halehame-am` +- `ethiopic-halehame-ti-er`: `-moz-ethiopic-halehame-ti-er` +- `ethiopic-halehame-ti-et`: `-moz-ethiopic-halehame-ti-et` +- `ethiopic-numeric`: `-moz-ethiopic-numeric` +- `hangul`: `-moz-hangul` +- `hangul-consonant`: `-moz-hangul-consonant` +- `urdu`: `-moz-urdu` + +See the [compatibility table](#browser-compatibility) to check which browsers support which extension. ## Accessibility concerns -Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. To learn more about this and potential workarounds, see [`list-style`](/en-US/docs/Web/CSS/list-style#accessibility_concerns). +Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. This can be resolved by adding `role="list"` to the list's opening tag. To learn more about this and potential workarounds, see [`list-style`](/en-US/docs/Web/CSS/list-style#accessibility_concerns). ## Formal definition @@ -697,6 +700,8 @@ container.addEventListener("change", (event) => { {{EmbedLiveSample("All_list_style_types", "600", "800")}} +We're not limited to the list style types defined on this page or the specification. The {{cssxref("@counter-style")}} at-rule enables creating [counters using any alphabet](https://r12a.github.io/app-counters/). + ## Specifications {{Specifications}} @@ -707,7 +712,9 @@ container.addEventListener("change", (event) => { ## See also -- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} -- [Counter styles converter](https://r12a.github.io/app-counters/) +- {{Cssxref("list-style")}} shorthand property +- {{Cssxref("list-style-image")}} property +- {{Cssxref("list-style-position")}} property +- {{Cssxref("::marker")}} pseudo-element - [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module - [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module diff --git a/files/en-us/web/css/list-style/index.md b/files/en-us/web/css/list-style/index.md index 38b37449babca26..dec84743c8e8e4e 100644 --- a/files/en-us/web/css/list-style/index.md +++ b/files/en-us/web/css/list-style/index.md @@ -153,7 +153,7 @@ These CSS workarounds should only be used when an HTML solution is unavailable, ## See also -- {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, and {{Cssxref("list-style-position")}} properties +- Component properties: {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, and {{Cssxref("list-style-position")}} - {{Cssxref("::marker")}} pseudo-element - [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module - [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module From e502f33688119ae8249ab400028e4ce42e7225f4 Mon Sep 17 00:00:00 2001 From: YecineM <45966855+YecineM@users.noreply.github.com> Date: Tue, 28 Nov 2023 08:57:32 +0100 Subject: [PATCH 010/390] Indicating that pre is a block element (#30590) * a block element The article doesn't indicate that
                                                   is a block-level element.
                                                  Some people like me used to think it's inline.
                                                  Feel free to modify my 'robotic' sentence.
                                                  
                                                  * Update sentence about block-level.
                                                  
                                                  ---------
                                                  
                                                  Co-authored-by: Chris Mills 
                                                  ---
                                                   files/en-us/web/html/element/pre/index.md | 2 ++
                                                   1 file changed, 2 insertions(+)
                                                  
                                                  diff --git a/files/en-us/web/html/element/pre/index.md b/files/en-us/web/html/element/pre/index.md
                                                  index b02ae0c2965b31d..9dbe42b97ce1802 100644
                                                  --- a/files/en-us/web/html/element/pre/index.md
                                                  +++ b/files/en-us/web/html/element/pre/index.md
                                                  @@ -9,6 +9,8 @@ browser-compat: html.elements.pre
                                                   
                                                   The **`
                                                  `** [HTML](/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font), font. Whitespace inside this element is displayed as written.
                                                   
                                                  +By default, `
                                                  ` is a [block-level](/en-US/docs/Glossary/Block-level_content) element, i.e. its default {{cssxref("display")}} value is block.
                                                  +
                                                   {{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
                                                   
                                                   If you have to display reserved characters such as `<`, `>`, `&`, and `"` within the `
                                                  ` tag, the characters must be escaped using their respective [HTML entity](/en-US/docs/Glossary/Entity).
                                                  
                                                  From b88ebbe55ca7a051e9af8d772dd92e1ce41ef40b Mon Sep 17 00:00:00 2001
                                                  From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
                                                  Date: Tue, 28 Nov 2023 18:12:21 +0800
                                                  Subject: [PATCH 011/390] Fix return type description to
                                                   `Element.hasPointerCapture` (#30422)
                                                  
                                                  update return type description
                                                  ---
                                                   files/en-us/web/api/element/haspointercapture/index.md | 3 +--
                                                   1 file changed, 1 insertion(+), 2 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/api/element/haspointercapture/index.md b/files/en-us/web/api/element/haspointercapture/index.md
                                                  index 46a9100c6a067a3..8ed881a11dd302e 100644
                                                  --- a/files/en-us/web/api/element/haspointercapture/index.md
                                                  +++ b/files/en-us/web/api/element/haspointercapture/index.md
                                                  @@ -26,8 +26,7 @@ hasPointerCapture(pointerId)
                                                   
                                                   ### Return value
                                                   
                                                  -A boolean value — `true` if the element does have pointer
                                                  -capture, `false` if it doesn't.
                                                  +A boolean value — `true` if the element does have pointer capture for the pointer identified by the given pointer ID, `false` if it doesn't.
                                                   
                                                   ## Examples
                                                   
                                                  
                                                  From 37299890c7fe7e4d92c1a86a5fa264afc13467e8 Mon Sep 17 00:00:00 2001
                                                  From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
                                                  Date: Tue, 28 Nov 2023 18:57:36 +0800
                                                  Subject: [PATCH 012/390] some update to Barcode Detection API (#30332)
                                                  
                                                  * fix header macros
                                                  
                                                  * remove in group data
                                                  
                                                  * fix word
                                                  
                                                  * add the another possible example
                                                  
                                                  * fix
                                                  
                                                  * fix
                                                  
                                                  * Apply suggestions from code review
                                                  
                                                  Co-authored-by: Brian Thomas Smith 
                                                  
                                                  ---------
                                                  
                                                  Co-authored-by: Brian Thomas Smith 
                                                  ---
                                                   files/en-us/web/api/barcode_detection_api/index.md       | 9 +++++----
                                                   .../web/api/barcodedetector/barcodedetector/index.md     | 2 +-
                                                   files/en-us/web/api/barcodedetector/detect/index.md      | 2 +-
                                                   .../barcodedetector/getsupportedformats_static/index.md  | 2 +-
                                                   files/en-us/web/api/barcodedetector/index.md             | 2 +-
                                                   files/jsondata/GroupData.json                            | 5 +----
                                                   6 files changed, 10 insertions(+), 12 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/api/barcode_detection_api/index.md b/files/en-us/web/api/barcode_detection_api/index.md
                                                  index 76c45bb30186809..e9510d179403796 100644
                                                  --- a/files/en-us/web/api/barcode_detection_api/index.md
                                                  +++ b/files/en-us/web/api/barcode_detection_api/index.md
                                                  @@ -7,7 +7,7 @@ status:
                                                   browser-compat: api.BarcodeDetector
                                                   ---
                                                   
                                                  -{{securecontext_header}}{{DefaultAPISidebar("Barcode Detection API")}} {{AvailableInWorkers}} {{SeeCompatTable}}
                                                  +{{securecontext_header}}{{DefaultAPISidebar("Barcode Detection API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
                                                   
                                                   The Barcode Detection API detects linear and two-dimensional barcodes in images.
                                                   
                                                  @@ -16,9 +16,10 @@ The Barcode Detection API detects linear and two-dimensional barcodes in images.
                                                   Support for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, Aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items.
                                                   
                                                   Detection is achieved through the {{domxref('BarcodeDetector.detect()','detect()')}} method, which takes an image object; it can be one of these objects:
                                                  -an {{domxref("SVGImageElement")}},
                                                  -an {{domxref("HTMLVideoElement")}},
                                                  -an {{domxref("HTMLCanvasElement")}},
                                                  +a {{domxref("HTMLImageElement")}},
                                                  +a {{domxref("SVGImageElement")}},
                                                  +a {{domxref("HTMLVideoElement")}},
                                                  +a {{domxref("HTMLCanvasElement")}},
                                                   an {{domxref("ImageBitmap")}},
                                                   an {{domxref("OffscreenCanvas")}},
                                                   a {{domxref("VideoFrame")}},
                                                  diff --git a/files/en-us/web/api/barcodedetector/barcodedetector/index.md b/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  index 28377c4825ae396..abbf0753149a63f 100644
                                                  --- a/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  @@ -8,7 +8,7 @@ status:
                                                   browser-compat: api.BarcodeDetector.BarcodeDetector
                                                   ---
                                                   
                                                  -{{securecontext_header}}{{DefaultAPISidebar("Barcode Detector API")}}{{SeeCompatTable}}
                                                  +{{securecontext_header}}{{APIRef("Barcode Detector API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
                                                   
                                                   The **`BarcodeDetector()`** constructor creates
                                                   a new {{domxref("BarcodeDetector")}} object which detects linear and two-dimensional
                                                  diff --git a/files/en-us/web/api/barcodedetector/detect/index.md b/files/en-us/web/api/barcodedetector/detect/index.md
                                                  index 712f8b1ee538e10..fdd0266ac572249 100644
                                                  --- a/files/en-us/web/api/barcodedetector/detect/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/detect/index.md
                                                  @@ -8,7 +8,7 @@ status:
                                                   browser-compat: api.BarcodeDetector.detect
                                                   ---
                                                   
                                                  -{{securecontext_header}}{{DefaultAPISidebar("Barcode Detector API")}}{{SeeCompatTable}}
                                                  +{{securecontext_header}}{{APIRef("Barcode Detector API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
                                                   
                                                   The **`detect()`** method of the
                                                   {{domxref("BarcodeDetector")}} interface returns a {{jsxref('Promise')}} which fulfills
                                                  diff --git a/files/en-us/web/api/barcodedetector/getsupportedformats_static/index.md b/files/en-us/web/api/barcodedetector/getsupportedformats_static/index.md
                                                  index 551f992596bb9d0..2cc3e52fe3112b1 100644
                                                  --- a/files/en-us/web/api/barcodedetector/getsupportedformats_static/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/getsupportedformats_static/index.md
                                                  @@ -8,7 +8,7 @@ status:
                                                   browser-compat: api.BarcodeDetector.getSupportedFormats_static
                                                   ---
                                                   
                                                  -{{securecontext_header}}{{DefaultAPISidebar("Barcode Detector API")}}{{SeeCompatTable}}
                                                  +{{securecontext_header}}{{APIRef("Barcode Detector API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
                                                   
                                                   The **`getSupportedFormats()`** static method
                                                   of the {{domxref("BarcodeDetector")}} interface returns a {{jsxref('Promise')}} which
                                                  diff --git a/files/en-us/web/api/barcodedetector/index.md b/files/en-us/web/api/barcodedetector/index.md
                                                  index 1bf422c81e2850b..97ee4eb325cef05 100644
                                                  --- a/files/en-us/web/api/barcodedetector/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/index.md
                                                  @@ -7,7 +7,7 @@ status:
                                                   browser-compat: api.BarcodeDetector
                                                   ---
                                                   
                                                  -{{securecontext_header}}{{APIRef("Barcode Detector API")}}{{SeeCompatTable}}
                                                  +{{securecontext_header}}{{APIRef("Barcode Detector API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
                                                   
                                                   The **`BarcodeDetector`** interface of the {{domxref('Barcode Detection API')}} allows detection of linear and two dimensional barcodes in images.
                                                   
                                                  diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json
                                                  index ab525d3c41b4f35..dca2755743846a4 100644
                                                  --- a/files/jsondata/GroupData.json
                                                  +++ b/files/jsondata/GroupData.json
                                                  @@ -51,10 +51,7 @@
                                                         "overview": ["Barcode Detection API"],
                                                         "guides": [],
                                                         "interfaces": ["BarcodeDetector"],
                                                  -      "methods": [
                                                  -        "BarcodeDetector.detect()",
                                                  -        "BarcodeDetector.getSupportedFormats()"
                                                  -      ],
                                                  +      "methods": [],
                                                         "properties": [],
                                                         "events": []
                                                       },
                                                  
                                                  From a729ffeb2586faba4febef073ea996f78ad0d5ee Mon Sep 17 00:00:00 2001
                                                  From: Brian Thomas Smith 
                                                  Date: Tue, 28 Nov 2023 13:06:52 +0100
                                                  Subject: [PATCH 013/390] chore(meta): Fix some 404s in MDN meta docs (#30597)
                                                  
                                                  * chore(meta): Fix some 404s in MDN meta docs
                                                  
                                                  * chore(meta): Point to Fx source docs for WebIDL bindings
                                                  ---
                                                   .../issues/content_suggestions_feature_proposals/index.md     | 2 +-
                                                   .../information_contained_in_a_webidl_file/index.md           | 4 ++--
                                                   .../page_structures/compatibility_tables/index.md             | 2 +-
                                                   3 files changed, 4 insertions(+), 4 deletions(-)
                                                  
                                                  diff --git a/files/en-us/mdn/community/issues/content_suggestions_feature_proposals/index.md b/files/en-us/mdn/community/issues/content_suggestions_feature_proposals/index.md
                                                  index 44dcef042c72a37..7b8a6f09878028b 100644
                                                  --- a/files/en-us/mdn/community/issues/content_suggestions_feature_proposals/index.md
                                                  +++ b/files/en-us/mdn/community/issues/content_suggestions_feature_proposals/index.md
                                                  @@ -24,7 +24,7 @@ Once you have completed the form and submitted the issue, a core team member wil
                                                   
                                                   ## Participate in the discussion and wait for approval
                                                   
                                                  -If we feel the proposal might be a good fit, we will [start a discussion](https://github.com/mdn/mdn-community/dicsussions) on our MDN community discussions repository. This is to get input from our partners and the wider community. We encourage you to monitor the discussion and join in as appropriate.
                                                  +If we feel the proposal might be a good fit, we will [start a discussion](https://github.com/orgs/mdn/discussions) on our MDN community discussions repository. This is to get input from our partners and the wider community. We encourage you to monitor the discussion and join in as appropriate.
                                                   
                                                   ## Opening an issue
                                                   
                                                  diff --git a/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md b/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
                                                  index 8dc89c1fe1f73bb..e451e003f5be2de 100644
                                                  --- a/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
                                                  +++ b/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
                                                  @@ -104,7 +104,7 @@ See the following two pages that document `HTMLHyperlinkElementUtils.hash` accor
                                                   - [`HTMLAnchorElement.hash`](/en-US/docs/Web/API/HTMLAnchorElement/hash)
                                                   - [`HTMLAreaElement.hash`](/en-US/docs/Web/API/HTMLAreaElement/hash)
                                                   
                                                  -For compat data, consult the [data guideline for mixins in BCD](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines.md).
                                                  +For compat data, consult the [data guideline for mixins in BCD](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/index.md).
                                                   
                                                   ### Old mixin syntax
                                                   
                                                  @@ -158,7 +158,7 @@ The most common values for the `[Exposed]` are:
                                                   - `ServiceWorker`
                                                     - : The partial interface is available to the {{domxref('ServiceWorkerGlobalScope')}} only.
                                                   
                                                  -Another value is possible, like `System`, but this has a [special meaning](/en-US/docs/Mozilla/WebIDL_bindings#exposed) and doesn't need to be documented.
                                                  +Another value is possible, like `System`, but this has a [special meaning](https://firefox-source-docs.mozilla.org/dom/webIdlBindings/index.html#custom-extended-attributes) and doesn't need to be documented.
                                                   
                                                   Note that these possible values are themselves defined in WebIDL files. Interfaces may have a `[Global=xyz]` annotation. It means that when an object of this type is used as a global scope, any interface, property or method, with `xyz` as a value of `[Exposed]` is available.
                                                   
                                                  diff --git a/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md b/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
                                                  index e0aa87744a6dc90..5d269f97770e534 100644
                                                  --- a/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
                                                  +++ b/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
                                                  @@ -21,7 +21,7 @@ To get started with BCD data in MDN pages, use the query string specified in the
                                                   For example:
                                                   
                                                   - {{domxref("AbortController")}} compatibility data is defined in [api/AbortController.json](https://github.com/mdn/browser-compat-data/blob/main/api/AbortController.json) and can be queried using `api.AbortController`.
                                                  -- {{HTTPHeader("Content-Type")}} HTTP header compatibility data is defined in [http/headers/content-type.json](https://github.com/mdn/browser-compat-data/blob/main/http/headers/content-type.json) and the query is `http.headers.Content-Type`.
                                                  +- {{HTTPHeader("Content-Type")}} HTTP header compatibility data is defined in [http/headers/content-type.json](https://github.com/mdn/browser-compat-data/blob/main/http/headers/Content-Type.json) and the query is `http.headers.Content-Type`.
                                                   - {{domxref("VRDisplay.capabilities")}} property compatibility data is defined in [api/VRDisplay.json](https://github.com/mdn/browser-compat-data/blob/main/api/VRDisplay.json) and its query is `api.VRDisplay.capabilities`.
                                                   
                                                   The compatibility data query should be specified in the page front-matter in the `browser-compat` key.
                                                  
                                                  From 473c5974cf9afca9d7750ae4943d5b6d40b4f410 Mon Sep 17 00:00:00 2001
                                                  From: Brian Thomas Smith 
                                                  Date: Tue, 28 Nov 2023 13:09:28 +0100
                                                  Subject: [PATCH 014/390] docs(http): Add info about 'Accept-Ranges: none' in
                                                   range requests (#30595)
                                                  
                                                  ---
                                                   files/en-us/web/http/headers/range/index.md | 7 +++++--
                                                   1 file changed, 5 insertions(+), 2 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/http/headers/range/index.md b/files/en-us/web/http/headers/range/index.md
                                                  index 8eaed2fb2f02d2e..035374043475e84 100644
                                                  --- a/files/en-us/web/http/headers/range/index.md
                                                  +++ b/files/en-us/web/http/headers/range/index.md
                                                  @@ -9,9 +9,11 @@ browser-compat: http.headers.Range
                                                   
                                                   The **`Range`** HTTP request header indicates the parts of a resource that the server should return.
                                                   Several parts can be requested at the same time in one `Range` header, and the server may send back these ranges in a multipart document.
                                                  -If the server sends back ranges, it uses the {{HTTPStatus("206", "206 Partial Content")}} for the response.
                                                  +If the server sends back ranges, it uses the {{HTTPStatus("206", "206 Partial Content")}} status code for the response.
                                                   If the ranges are invalid, the server returns the {{HTTPStatus("416", "416 Range Not Satisfiable")}} error.
                                                  -The server can also ignore the `Range` header and return the whole resource with a {{HTTPStatus("200")}} status code.
                                                  +
                                                  +A server that doesn't support range requests may ignore the `Range` header and return the whole resource with a {{HTTPStatus("200")}} status code.
                                                  +Ignoring the `Range` header is equivalent to `Accept-Ranges: none`, so the {{HTTPHeader("Accept-Ranges")}} response header is rarely used for this purpose.
                                                   
                                                   Currently only [`bytes` units are registered](https://www.iana.org/assignments/http-parameters/http-parameters.xhtml#range-units) which are _offsets_ (zero-indexed & inclusive).
                                                   If the requested data has a [content coding](/en-US/docs/Web/HTTP/Headers/Content-Encoding) applied, each byte range represents the encoded sequence of bytes, not the bytes that would be obtained after decoding.
                                                  @@ -116,6 +118,7 @@ Range: bytes=0-499, -499
                                                   - {{HTTPHeader("If-Range")}}
                                                   - {{HTTPHeader("Content-Range")}}
                                                   - {{HTTPHeader("Content-Type")}}
                                                  +- {{HTTPHeader("Accept-Ranges")}}
                                                   - {{HTTPStatus("206", "206 Partial Content")}}
                                                   - {{HTTPStatus("416", "416 Range Not Satisfiable")}}
                                                   - [HTTP range requests](/en-US/docs/Web/HTTP/Range_requests) guide
                                                  
                                                  From 8b0bce989395bc54e6f512c1d61caab180bebf98 Mon Sep 17 00:00:00 2001
                                                  From: Michael McAndrew 
                                                  Date: Tue, 28 Nov 2023 14:26:53 +0100
                                                  Subject: [PATCH 015/390] Be more explicit about session cookies (#30594)
                                                  
                                                  * Be more explicit about session cookies
                                                  
                                                  See https://github.com/mdn/content/issues/30593
                                                  
                                                  * Update files/en-us/web/http/cookies/index.md
                                                  
                                                  * Update files/en-us/web/http/cookies/index.md
                                                  
                                                  ---------
                                                  
                                                  Co-authored-by: Jean-Yves Perrier 
                                                  ---
                                                   files/en-us/web/http/cookies/index.md | 6 +++---
                                                   1 file changed, 3 insertions(+), 3 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/http/cookies/index.md b/files/en-us/web/http/cookies/index.md
                                                  index 6cb490d48344d85..2d86e16566f6e88 100644
                                                  --- a/files/en-us/web/http/cookies/index.md
                                                  +++ b/files/en-us/web/http/cookies/index.md
                                                  @@ -63,10 +63,10 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry
                                                   
                                                   ### Define the lifetime of a cookie
                                                   
                                                  -The lifetime of a cookie can be defined in two ways:
                                                  +Cookies can persist for two different periods, depending on the attributes used with the {{HTTPHeader("Set-Cookie")}} header when they were created:
                                                   
                                                  -- _Session_ cookies are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use _session restoring_ when restarting. This can cause session cookies to last indefinitely.
                                                  -- _Permanent_ cookies are deleted at a date specified by the `Expires` attribute, or after a period of time specified by the `Max-Age` attribute.
                                                  +- _Permanent_ cookies are deleted at a date specified by the `Expires` attribute or after a period prescribed by the `Max-Age` attribute.
                                                  +- _Session_ cookies – cookies without a `Max age` or `Expires` attribute – are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use _session restoring_ when restarting. This can cause session cookies to last indefinitely.
                                                   
                                                   For example:
                                                   
                                                  
                                                  From 236d6a07df44912cfd6d55d33bd8869fad173040 Mon Sep 17 00:00:00 2001
                                                  From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
                                                  Date: Tue, 28 Nov 2023 21:32:22 +0800
                                                  Subject: [PATCH 016/390] update `BarcodeDetector` exceptions and parameters
                                                   (#30343)
                                                  
                                                  * update
                                                  
                                                  * update
                                                  
                                                  * update text
                                                  
                                                  * update
                                                  
                                                  * update
                                                  
                                                  * Update files/en-us/web/api/barcodedetector/detect/index.md
                                                  
                                                  Co-authored-by: Brian Thomas Smith 
                                                  
                                                  * Apply suggestions from code review
                                                  
                                                  Co-authored-by: Brian Thomas Smith 
                                                  
                                                  * Update files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  
                                                  ---------
                                                  
                                                  Co-authored-by: Brian Thomas Smith 
                                                  ---
                                                   .../web/api/barcodedetector/barcodedetector/index.md  | 11 +++++++++--
                                                   files/en-us/web/api/barcodedetector/detect/index.md   |  8 +++++---
                                                   2 files changed, 14 insertions(+), 5 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/api/barcodedetector/barcodedetector/index.md b/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  index abbf0753149a63f..384e8a940e95548 100644
                                                  --- a/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/barcodedetector/index.md
                                                  @@ -29,9 +29,16 @@ new BarcodeDetector(options)
                                                       in the subsequent {{domxref('BarcodeDetector.detect()','detect()')}} calls. The
                                                       options are:
                                                   
                                                  -    - `formats`
                                                  +    - `formats` {{optional_inline}}
                                                         - : An {{jsxref('Array')}} of barcode formats as strings.
                                                  -        To see a full list of supported formats see the [Barcode Detection API](/en-US/docs/Web/API/Barcode_Detection_API).
                                                  +        If not provided, `detect()` calls search for all supported formats.
                                                  +        Limiting to specific formats is therefore recommended for performance reasons.
                                                  +        To see a full list of supported formats see the {{domxref("Barcode Detection API")}}.
                                                  +
                                                  +### Exceptions
                                                  +
                                                  +- {{jsxref("TypeError")}}
                                                  +  - : Thrown if the `formats` is specified and the parameter is empty or contains `unknown`.
                                                   
                                                   ## Examples
                                                   
                                                  diff --git a/files/en-us/web/api/barcodedetector/detect/index.md b/files/en-us/web/api/barcodedetector/detect/index.md
                                                  index fdd0266ac572249..9e0a00ccedda8cd 100644
                                                  --- a/files/en-us/web/api/barcodedetector/detect/index.md
                                                  +++ b/files/en-us/web/api/barcodedetector/detect/index.md
                                                  @@ -23,9 +23,7 @@ detect(imageBitmapSource)
                                                   ### Parameters
                                                   
                                                   - `imageBitmapSource`
                                                  -  - : Receives an `ImageBitmapSource` as a parameter. This can be an
                                                  -    {{HTMLElement('img', ' element')}}, a {{domxref('Blob')}} of type image or an
                                                  -    {{domxref('ImageData')}} object.
                                                  +  - : Receives an image source as a parameter. This can be a {{domxref("HTMLImageElement")}}, a {{domxref("SVGImageElement")}}, a {{domxref("HTMLVideoElement")}}, a {{domxref("HTMLCanvasElement")}}, an {{domxref("ImageBitmap")}}, an {{domxref("OffscreenCanvas")}}, a {{domxref("VideoFrame")}}, a {{domxref('Blob')}} of type image or an {{domxref('ImageData')}} object.
                                                   
                                                   ### Return value
                                                   
                                                  @@ -51,6 +49,10 @@ Returns a {{jsxref('Promise')}} which fulfills with an array of
                                                   - {{jsxref("TypeError")}}
                                                     - : No parameter is specified or the `type` is not that of an
                                                       `ImageBitmapSource`.
                                                  +- `SecurityError` {{domxref("DOMException")}}
                                                  +  - : Thrown if the `imageBitmapSource` has an origin and is not the same as the document's origin, or if the `imageBitmapSource` is a {{domxref('HTMLCanvasElement')}} and its [origin-clean](https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-origin-clean) flag is set to `false`.
                                                  +- `InvalidStateError` {{domxref("DOMException")}}
                                                  +  - : Thrown if the `imageBitmapSource` is an {{domxref('HTMLImageElement')}} and is not fully decoded or decoding failed, or is an {{domxref('HTMLVideoElement')}} and its {{domxref('HTMLMediaElement.readyState', 'readyState')}} is `HAVE_NOTHING` or `HAVE_METADATA`.
                                                   
                                                   ## Examples
                                                   
                                                  
                                                  From 9b8fba1439f6069a90a16023e89e0f8bf363a957 Mon Sep 17 00:00:00 2001
                                                  From: Brian Thomas Smith 
                                                  Date: Tue, 28 Nov 2023 19:17:45 +0100
                                                  Subject: [PATCH 017/390] chore(docs): Branches renamed from master to main
                                                   (#30600)
                                                  
                                                  * chore(docs): Branches renamed from master to main
                                                  
                                                  * Update files/en-us/web/api/analysernode/frequencybincount/index.md
                                                  
                                                  Co-authored-by: Jean-Yves Perrier 
                                                  
                                                  ---------
                                                  
                                                  Co-authored-by: Jean-Yves Perrier 
                                                  ---
                                                   .../analysernode/frequencybincount/index.md   |  2 +-
                                                   .../api/audiobuffersourcenode/buffer/index.md |  2 +-
                                                   .../web/api/audiobuffersourcenode/index.md    |  2 +-
                                                   .../en-us/web/api/audiocontext/close/index.md |  2 +-
                                                   .../createmediastreamdestination/index.md     |  2 +-
                                                   .../audiocontext/getoutputtimestamp/index.md  |  2 +-
                                                   .../web/api/audiocontext/suspend/index.md     |  2 +-
                                                   .../api/audioparam/settargetattime/index.md   |  2 +-
                                                   .../api/audioparam/setvalueattime/index.md    |  2 +-
                                                   .../audioparam/setvaluecurveattime/index.md   |  2 +-
                                                   .../baseaudiocontext/createbuffer/index.md    |  2 +-
                                                   .../createbuffersource/index.md               |  2 +-
                                                   .../api/baseaudiocontext/creategain/index.md  |  2 +-
                                                   .../createoscillator/index.md                 |  2 +-
                                                   .../createscriptprocessor/index.md            |  2 +-
                                                   .../baseaudiocontext/decodeaudiodata/index.md |  4 +--
                                                   .../getfrequencyresponse/index.md             |  2 +-
                                                   .../getfrequencyresponse/index.md             |  2 +-
                                                   .../offlineaudiocontext/index.md              |  2 +-
                                                   .../web/api/oscillatornode/detune/index.md    |  2 +-
                                                   .../web/api/oscillatornode/frequency/index.md |  2 +-
                                                   files/en-us/web/api/oscillatornode/index.md   |  2 +-
                                                   .../web/api/oscillatornode/type/index.md      |  2 +-
                                                   .../web/javascript/guide/modules/index.md     | 32 +++++++++----------
                                                   24 files changed, 40 insertions(+), 40 deletions(-)
                                                  
                                                  diff --git a/files/en-us/web/api/analysernode/frequencybincount/index.md b/files/en-us/web/api/analysernode/frequencybincount/index.md
                                                  index 165e4a153a2006d..c79907282013a4e 100644
                                                  --- a/files/en-us/web/api/analysernode/frequencybincount/index.md
                                                  +++ b/files/en-us/web/api/analysernode/frequencybincount/index.md
                                                  @@ -19,7 +19,7 @@ For technical reasons related to how the [Fast Fourier transform](https://en.wik
                                                   ## Examples
                                                   
                                                   The following example shows basic usage of an {{domxref("AudioContext")}} to create an `AnalyserNode`, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.
                                                  -For more complete applied examples/information, check out our [Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) demo (see [app.js lines 108-193](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic/blob/gh-pages/scripts/app.js#L108-L193) for relevant code).
                                                  +For more complete applied examples/information, check out our [Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) demo.
                                                   
                                                   ```js
                                                   const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                                                  diff --git a/files/en-us/web/api/audiobuffersourcenode/buffer/index.md b/files/en-us/web/api/audiobuffersourcenode/buffer/index.md
                                                  index e7646e037a1b902..ad3f13a66d2954c 100644
                                                  --- a/files/en-us/web/api/audiobuffersourcenode/buffer/index.md
                                                  +++ b/files/en-us/web/api/audiobuffersourcenode/buffer/index.md
                                                  @@ -22,7 +22,7 @@ node will play.
                                                   
                                                   ## Examples
                                                   
                                                  -> **Note:** For a full working example, see [this code running live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html).
                                                  +> **Note:** For a full working example, see [this code running live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html).
                                                   
                                                   ```js
                                                   const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
                                                  diff --git a/files/en-us/web/api/audiobuffersourcenode/index.md b/files/en-us/web/api/audiobuffersourcenode/index.md
                                                  index 6baad84f98efd61..ee6f8d57a10211e 100644
                                                  --- a/files/en-us/web/api/audiobuffersourcenode/index.md
                                                  +++ b/files/en-us/web/api/audiobuffersourcenode/index.md
                                                  @@ -75,7 +75,7 @@ _Inherits event handlers from its parent, {{domxref("AudioScheduledSourceNode")}
                                                   
                                                   In this example, we create a two-second buffer, fill it with white noise, and then play it using an `AudioBufferSourceNode`. The comments should clearly explain what is going on.
                                                   
                                                  -> **Note:** You can also [run the code live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html).
                                                  +> **Note:** You can also [run the code live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html).
                                                   
                                                   ```js
                                                   const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                                                  diff --git a/files/en-us/web/api/audiocontext/close/index.md b/files/en-us/web/api/audiocontext/close/index.md
                                                  index 0189e3d2ecaf32b..85f71f9427f7f71 100644
                                                  --- a/files/en-us/web/api/audiocontext/close/index.md
                                                  +++ b/files/en-us/web/api/audiocontext/close/index.md
                                                  @@ -28,7 +28,7 @@ A {{jsxref("Promise")}} that resolves with {{jsxref('undefined')}}.
                                                   
                                                   ## Examples
                                                   
                                                  -The following snippet is taken from our [AudioContext states demo](https://github.com/mdn/webaudio-examples/blob/master/audiocontext-states/index.html) ([see it running live](https://mdn.github.io/webaudio-examples/audiocontext-states/).) When the stop button is clicked, `close()` is called. When the promise resolves, the example is reset to its beginning state.
                                                  +The following snippet is taken from our [AudioContext states demo](https://github.com/mdn/webaudio-examples/blob/main/audiocontext-states/index.html) ([see it running live](https://mdn.github.io/webaudio-examples/audiocontext-states/).) When the stop button is clicked, `close()` is called. When the promise resolves, the example is reset to its beginning state.
                                                   
                                                   ```js
                                                   stopBtn.onclick = () => {
                                                  diff --git a/files/en-us/web/api/audiocontext/createmediastreamdestination/index.md b/files/en-us/web/api/audiocontext/createmediastreamdestination/index.md
                                                  index 4cfc5994a0bd0a7..16227170dc216b8 100644
                                                  --- a/files/en-us/web/api/audiocontext/createmediastreamdestination/index.md
                                                  +++ b/files/en-us/web/api/audiocontext/createmediastreamdestination/index.md
                                                  @@ -87,7 +87,7 @@ From here, you can play and save the opus file.
                                                   
                                                   ```
                                                   
                                                  -> **Note:** You can [view this example live](https://mdn.github.io/webaudio-examples/create-media-stream-destination/index.html), or [study the source code](https://github.com/mdn/webaudio-examples/blob/master/create-media-stream-destination/index.html), on GitHub.
                                                  +> **Note:** You can [view this example live](https://mdn.github.io/webaudio-examples/create-media-stream-destination/index.html), or [study the source code](https://github.com/mdn/webaudio-examples/blob/main/create-media-stream-destination/index.html), on GitHub.
                                                   
                                                   ## Specifications
                                                   
                                                  diff --git a/files/en-us/web/api/audiocontext/getoutputtimestamp/index.md b/files/en-us/web/api/audiocontext/getoutputtimestamp/index.md
                                                  index 8470146d74148e6..2ac95642ab91a4e 100644
                                                  --- a/files/en-us/web/api/audiocontext/getoutputtimestamp/index.md
                                                  +++ b/files/en-us/web/api/audiocontext/getoutputtimestamp/index.md
                                                  @@ -52,7 +52,7 @@ In the following code we start to play an audio file after a play button is clic
                                                   and start off a `requestAnimationFrame` loop running, which constantly
                                                   outputs the `contextTime` and `performanceTime`.
                                                   
                                                  -You can see full code of this [example at output-timestamp](https://github.com/mdn/webaudio-examples/blob/master/output-timestamp/index.html) ([see it live also](https://mdn.github.io/webaudio-examples/output-timestamp/)).
                                                  +You can see full code of this [example at output-timestamp](https://github.com/mdn/webaudio-examples/blob/main/output-timestamp/index.html) ([see it live also](https://mdn.github.io/webaudio-examples/output-timestamp/)).
                                                   
                                                   ```js
                                                   // Press the play button
                                                  diff --git a/files/en-us/web/api/audiocontext/suspend/index.md b/files/en-us/web/api/audiocontext/suspend/index.md
                                                  index 7c17f5ac8e1e3ee..c6be3554befe9a9 100644
                                                  --- a/files/en-us/web/api/audiocontext/suspend/index.md
                                                  +++ b/files/en-us/web/api/audiocontext/suspend/index.md
                                                  @@ -28,7 +28,7 @@ A {{jsxref("Promise")}} that resolves with {{jsxref('undefined')}}. The promise
                                                   
                                                   ## Examples
                                                   
                                                  -The following snippet is taken from our [AudioContext states demo](https://github.com/mdn/webaudio-examples/blob/master/audiocontext-states/index.html) ([see it running live](https://mdn.github.io/webaudio-examples/audiocontext-states/).) When the suspend/resume button is clicked, the {{domxref("BaseAudioContext/state", "AudioContext.state")}} is queried — if it is `running`, `suspend()` is called; if it is `suspended`, {{domxref("AudioContext/resume", "resume()")}} is called. In each case, the text label of the button is updated as appropriate once the promise resolves.
                                                  +The following snippet is taken from our [AudioContext states demo](https://github.com/mdn/webaudio-examples/blob/main/audiocontext-states/index.html) ([see it running live](https://mdn.github.io/webaudio-examples/audiocontext-states/).) When the suspend/resume button is clicked, the {{domxref("BaseAudioContext/state", "AudioContext.state")}} is queried — if it is `running`, `suspend()` is called; if it is `suspended`, {{domxref("AudioContext/resume", "resume()")}} is called. In each case, the text label of the button is updated as appropriate once the promise resolves.
                                                   
                                                   ```js
                                                   susresBtn.onclick = () => {
                                                  diff --git a/files/en-us/web/api/audioparam/settargetattime/index.md b/files/en-us/web/api/audioparam/settargetattime/index.md
                                                  index b633db8698ee013..14483f1cead9a10 100644
                                                  --- a/files/en-us/web/api/audioparam/settargetattime/index.md
                                                  +++ b/files/en-us/web/api/audioparam/settargetattime/index.md
                                                  @@ -95,7 +95,7 @@ the time progresses.
                                                   
                                                   ## Examples
                                                   
                                                  -In this example, we have a media source with two control buttons (see the [webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/).) When these buttons are pressed, `setTargetAtTime()` is used to
                                                  +In this example, we have a media source with two control buttons (see the [webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/main/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/).) When these buttons are pressed, `setTargetAtTime()` is used to
                                                   fade the gain value up to 1.0, and down to 0, respectively, with the effect starting
                                                   after 1 second, and the length of time the effect lasts being controlled by the
                                                   timeConstant.
                                                  diff --git a/files/en-us/web/api/audioparam/setvalueattime/index.md b/files/en-us/web/api/audioparam/setvalueattime/index.md
                                                  index 242cbacfc470c6f..2495b315598aa98 100644
                                                  --- a/files/en-us/web/api/audioparam/setvalueattime/index.md
                                                  +++ b/files/en-us/web/api/audioparam/setvalueattime/index.md
                                                  @@ -36,7 +36,7 @@ implementations of this interface return {{jsxref('undefined')}}.
                                                   ## Examples
                                                   
                                                   This simple example features a media element source with two control buttons (see our
                                                  -[webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/)). When the buttons are pressed, the `currGain` variable is
                                                  +[webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/main/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/)). When the buttons are pressed, the `currGain` variable is
                                                   incremented/decremented by 0.25, then the `setValueAtTime()` method is used
                                                   to set the gain value equal to `currGain`, one second from now
                                                   (`audioCtx.currentTime + 1`.)
                                                  diff --git a/files/en-us/web/api/audioparam/setvaluecurveattime/index.md b/files/en-us/web/api/audioparam/setvaluecurveattime/index.md
                                                  index c50e30b3041f708..e51047ef84ef6fc 100644
                                                  --- a/files/en-us/web/api/audioparam/setvaluecurveattime/index.md
                                                  +++ b/files/en-us/web/api/audioparam/setvaluecurveattime/index.md
                                                  @@ -67,7 +67,7 @@ parameter.
                                                   
                                                   ## Examples
                                                   
                                                  -In this example, we have a media source with a single button (see the [webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/).) When this button is pressed, `setValueCurveAtTime()` is used to
                                                  +In this example, we have a media source with a single button (see the [webaudio-examples repo](https://github.com/mdn/webaudio-examples/blob/main/audio-param/index.html) for the source code, or [view the example live](https://mdn.github.io/webaudio-examples/audio-param/).) When this button is pressed, `setValueCurveAtTime()` is used to
                                                   change the gain value between the values contained in the waveArray array:
                                                   
                                                   ```js
                                                  diff --git a/files/en-us/web/api/baseaudiocontext/createbuffer/index.md b/files/en-us/web/api/baseaudiocontext/createbuffer/index.md
                                                  index 1dc07f32bf882c7..a5df747045b7d2b 100644
                                                  --- a/files/en-us/web/api/baseaudiocontext/createbuffer/index.md
                                                  +++ b/files/en-us/web/api/baseaudiocontext/createbuffer/index.md
                                                  @@ -95,7 +95,7 @@ on an `AudioContext` running at 44100Hz, will be automatically \*resampled\* to
                                                   Now let's look at a more complex `createBuffer()` example, in which we
                                                   create a three-second buffer, fill it with white noise, and then play it via an {{
                                                     domxref("AudioBufferSourceNode") }}. The comment should clearly explain what is going
                                                  -on. You can also [run the code live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html).
                                                  +on. You can also [run the code live](https://mdn.github.io/webaudio-examples/audio-buffer/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html).
                                                   
                                                   ```js
                                                   const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                                                  diff --git a/files/en-us/web/api/baseaudiocontext/createbuffersource/index.md b/files/en-us/web/api/baseaudiocontext/createbuffersource/index.md
                                                  index 7801b0c8cf9b743..fa5535d30167d32 100644
                                                  --- a/files/en-us/web/api/baseaudiocontext/createbuffersource/index.md
                                                  +++ b/files/en-us/web/api/baseaudiocontext/createbuffersource/index.md
                                                  @@ -41,7 +41,7 @@ it via an {{ domxref("AudioBufferSourceNode") }}. The comments should clearly ex
                                                   what is going on.
                                                   
                                                   > **Note:** You can also [run the code live](https://mdn.github.io/webaudio-examples/audio-buffer/),
                                                  -> or [view the source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html).
                                                  +> or [view the source](https://github.com/mdn/webaudio-examples/blob/main/audio-buffer/index.html).
                                                   
                                                   ```js
                                                   const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                                                  diff --git a/files/en-us/web/api/baseaudiocontext/creategain/index.md b/files/en-us/web/api/baseaudiocontext/creategain/index.md
                                                  index 8446142da34401c..54d9632f5d2ba08 100644
                                                  --- a/files/en-us/web/api/baseaudiocontext/creategain/index.md
                                                  +++ b/files/en-us/web/api/baseaudiocontext/creategain/index.md
                                                  @@ -40,7 +40,7 @@ The following example shows basic usage of an {{domxref("AudioContext")}} to cre
                                                   button is clicked by changing the `gain` property value.
                                                   
                                                   The below snippet wouldn't work as is — for a complete working example, check out our
                                                  -[Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) demo ([view source](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic/blob/gh-pages/scripts/app.js).)
                                                  +[Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) demo ([view source](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic/scripts/app.js).)
                                                   
                                                   ```html
                                                   
                                                  diff --git a/files/en-us/web/api/baseaudiocontext/createoscillator/index.md b/files/en-us/web/api/baseaudiocontext/createoscillator/index.md index d4b711657c020b3..6472b4ca9e4a4e3 100644 --- a/files/en-us/web/api/baseaudiocontext/createoscillator/index.md +++ b/files/en-us/web/api/baseaudiocontext/createoscillator/index.md @@ -33,7 +33,7 @@ An {{domxref("OscillatorNode")}}. ## Examples The following example shows basic usage of an AudioContext to create an oscillator -node. For applied examples/information, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/master/violent-theremin/scripts/app.js) for relevant code); also see our {{domxref("OscillatorNode")}} page for +node. For applied examples/information, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/main/violent-theremin/scripts/app.js) for relevant code); also see our {{domxref("OscillatorNode")}} page for more information. ```js diff --git a/files/en-us/web/api/baseaudiocontext/createscriptprocessor/index.md b/files/en-us/web/api/baseaudiocontext/createscriptprocessor/index.md index 631383962e0820d..32b4f23272c2368 100644 --- a/files/en-us/web/api/baseaudiocontext/createscriptprocessor/index.md +++ b/files/en-us/web/api/baseaudiocontext/createscriptprocessor/index.md @@ -63,7 +63,7 @@ The following example shows how to use a `ScriptProcessorNode` to take a track l For each channel and each sample frame, the script node's {{domxref("ScriptProcessorNode.audioprocess_event", "audioprocess")}} event handler uses the associated `audioProcessingEvent` to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case. -> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/script-processor-node/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/). +> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/script-processor-node/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/script-processor-node/). ```js const myScript = document.querySelector("script"); diff --git a/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md b/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md index 0ca897722cf79d6..81a4154460e2dba 100644 --- a/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md +++ b/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md @@ -60,7 +60,7 @@ In this section we will first cover the promise-based syntax and then the callba In this example `loadAudio()` uses {{domxref("fetch()")}} to retrieve an audio file and decodes it into an {{domxref("AudioBuffer")}}. It then caches the `audioBuffer` in the global `buffer` variable for later playback. -> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/decode-audio-data/promise/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/decode-audio-data/promise/). +> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/decode-audio-data/promise/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/decode-audio-data/promise/). ```js let audioCtx; @@ -84,7 +84,7 @@ async function loadAudio() { In this example `loadAudio()` uses {{domxref("fetch()")}} to retrieve an audio file and decodes it into an {{domxref("AudioBuffer")}} using the callback-based version of `decodeAudioData()`. In the callback, it plays the decoded buffer. -> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/decode-audio-data/callback/), or [view the source](https://github.com/mdn/webaudio-examples/blob/master/decode-audio-data/callback/). +> **Note:** You can [run the full example live](https://mdn.github.io/webaudio-examples/decode-audio-data/callback/), or [view the source](https://github.com/mdn/webaudio-examples/blob/main/decode-audio-data/callback/). ```js let audioCtx; diff --git a/files/en-us/web/api/biquadfilternode/getfrequencyresponse/index.md b/files/en-us/web/api/biquadfilternode/getfrequencyresponse/index.md index f5f8827a60f2a3c..024c584ce59f51d 100644 --- a/files/en-us/web/api/biquadfilternode/getfrequencyresponse/index.md +++ b/files/en-us/web/api/biquadfilternode/getfrequencyresponse/index.md @@ -55,7 +55,7 @@ None ({{jsxref("undefined")}}). ## Examples In the following example we are using a biquad filter on a media stream (for the full -demo, see our [stream-source-buffer demo](https://mdn.github.io/webaudio-examples/stream-source-buffer/) live, or [read the source](https://github.com/mdn/webaudio-examples/blob/master/stream-source-buffer/index.html).) As part of this demo, we get the frequency responses for this biquad +demo, see our [stream-source-buffer demo](https://mdn.github.io/webaudio-examples/stream-source-buffer/) live, or [read the source](https://github.com/mdn/webaudio-examples/blob/main/stream-source-buffer/index.html).) As part of this demo, we get the frequency responses for this biquad filter, for five sample frequencies. We first create the {{jsxref("Float32Array")}}s we need, one containing the input frequencies, and two to receive the output magnitude and phase values: diff --git a/files/en-us/web/api/iirfilternode/getfrequencyresponse/index.md b/files/en-us/web/api/iirfilternode/getfrequencyresponse/index.md index 5aa780b6c320c18..e45752a28ed8618 100644 --- a/files/en-us/web/api/iirfilternode/getfrequencyresponse/index.md +++ b/files/en-us/web/api/iirfilternode/getfrequencyresponse/index.md @@ -48,7 +48,7 @@ None ({{jsxref("undefined")}}). In the following example we are using an IIR filter on a media stream (for a complete full demo, see our [stream-source-buffer demo](https://mdn.github.io/webaudio-examples/stream-source-buffer/) live, -or [read its source](https://github.com/mdn/webaudio-examples/blob/master/stream-source-buffer/index.html)). As part of this demo, we get the frequency responses for this IIR +or [read its source](https://github.com/mdn/webaudio-examples/blob/main/stream-source-buffer/index.html)). As part of this demo, we get the frequency responses for this IIR filter, for five sample frequencies. We first create the {{jsxref("Float32Array")}} objects we need, one containing the input frequencies, and two to receive the output magnitude and phase values: diff --git a/files/en-us/web/api/offlineaudiocontext/offlineaudiocontext/index.md b/files/en-us/web/api/offlineaudiocontext/offlineaudiocontext/index.md index a206797e81d46a4..f11c3458ccfe66c 100644 --- a/files/en-us/web/api/offlineaudiocontext/offlineaudiocontext/index.md +++ b/files/en-us/web/api/offlineaudiocontext/offlineaudiocontext/index.md @@ -72,7 +72,7 @@ const source = offlineCtx.createBufferSource(); ``` For a full working example, see our [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) -GitHub repo (see the [source code](https://github.com/mdn/webaudio-examples/blob/master/offline-audio-context-promise/index.html) too.) +GitHub repo (see the [source code](https://github.com/mdn/webaudio-examples/blob/main/offline-audio-context-promise/index.html) too.) ## Specifications diff --git a/files/en-us/web/api/oscillatornode/detune/index.md b/files/en-us/web/api/oscillatornode/detune/index.md index 28c26d834da9e60..3b8de1bb20f45fe 100644 --- a/files/en-us/web/api/oscillatornode/detune/index.md +++ b/files/en-us/web/api/oscillatornode/detune/index.md @@ -18,7 +18,7 @@ An [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}. ## Examples -The following example shows basic usage of an {{ domxref("AudioContext") }} to create an oscillator node. For applied examples/information, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/master/violent-theremin/scripts/app.js) for relevant code). +The following example shows basic usage of an {{ domxref("AudioContext") }} to create an oscillator node. For applied examples/information, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/main/violent-theremin/scripts/app.js) for relevant code). ```js // create web audio api context diff --git a/files/en-us/web/api/oscillatornode/frequency/index.md b/files/en-us/web/api/oscillatornode/frequency/index.md index ecccc52202f9e45..8724fb19a89a473 100644 --- a/files/en-us/web/api/oscillatornode/frequency/index.md +++ b/files/en-us/web/api/oscillatornode/frequency/index.md @@ -18,7 +18,7 @@ An [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}. ## Examples -The following example shows basic usage of an {{ domxref("AudioContext") }} to create an oscillator node. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/master/violent-theremin/scripts/app.js) for relevant code). +The following example shows basic usage of an {{ domxref("AudioContext") }} to create an oscillator node. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/main/violent-theremin/scripts/app.js) for relevant code). ```js // create web audio api context diff --git a/files/en-us/web/api/oscillatornode/index.md b/files/en-us/web/api/oscillatornode/index.md index 8e0e591619c6743..3db2089747c1021 100644 --- a/files/en-us/web/api/oscillatornode/index.md +++ b/files/en-us/web/api/oscillatornode/index.md @@ -70,7 +70,7 @@ _Inherits methods from its parent, {{domxref("AudioScheduledSourceNode")}}, and ## Examples -The following example shows basic usage of an {{domxref("AudioContext")}} to create an oscillator node and to start playing a tone on it. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/master/violent-theremin/scripts/app.js) for relevant code). +The following example shows basic usage of an {{domxref("AudioContext")}} to create an oscillator node and to start playing a tone on it. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/main/violent-theremin/scripts/app.js) for relevant code). ```js // create web audio api context diff --git a/files/en-us/web/api/oscillatornode/type/index.md b/files/en-us/web/api/oscillatornode/type/index.md index 7bf263343fe5aa9..eb853456014d2b0 100644 --- a/files/en-us/web/api/oscillatornode/type/index.md +++ b/files/en-us/web/api/oscillatornode/type/index.md @@ -43,7 +43,7 @@ available values are: ## Examples The following example shows basic usage of an {{ domxref("AudioContext") }} to create -an oscillator node. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/master/violent-theremin/scripts/app.js) for relevant code). +an oscillator node. For an applied example, check out our [Violent Theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/) ([see app.js](https://github.com/mdn/webaudio-examples/blob/main/violent-theremin/scripts/app.js) for relevant code). ```js // create web audio api context diff --git a/files/en-us/web/javascript/guide/modules/index.md b/files/en-us/web/javascript/guide/modules/index.md index 07ef28532225ede..57e7926b01f25ee 100644 --- a/files/en-us/web/javascript/guide/modules/index.md +++ b/files/en-us/web/javascript/guide/modules/index.md @@ -27,7 +27,7 @@ Use of native JavaScript modules is dependent on the {{jsxref("Statements/import ## Introducing an example -To demonstrate usage of modules, we've created a [simple set of examples](https://github.com/mdn/js-examples/tree/master/module-examples) that you can find on GitHub. These examples demonstrate a simple set of modules that create a [``](/en-US/docs/Web/HTML/Element/canvas) element on a webpage, and then draw (and report information about) different shapes on the canvas. +To demonstrate usage of modules, we've created a [simple set of examples](https://github.com/mdn/js-examples/tree/main/module-examples) that you can find on GitHub. These examples demonstrate a simple set of modules that create a [``](/en-US/docs/Web/HTML/Element/canvas) element on a webpage, and then draw (and report information about) different shapes on the canvas. These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly. @@ -35,7 +35,7 @@ These are fairly trivial, but have been kept deliberately simple to demonstrate ## Basic example structure -In our first example (see [basic-modules](https://github.com/mdn/js-examples/tree/master/module-examples/basic-modules)) we have a file structure as follows: +In our first example (see [basic-modules](https://github.com/mdn/js-examples/tree/main/module-examples/basic-modules)) we have a file structure as follows: ```plain index.html @@ -132,7 +132,7 @@ becomes ./modules/square.js ``` -You can see such lines in action in [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/basic-modules/main.js). +You can see such lines in action in [`main.js`](https://github.com/mdn/js-examples/blob/main/module-examples/basic-modules/main.js). > **Note:** In some module systems, you can use a module specifier like `modules/square` that isn't a relative or absolute path, and that doesn't have a file extension. > This kind of specifier can be used in a browser environment if you first define an [import map](#importing_modules_using_import_maps). @@ -486,7 +486,7 @@ import { } from "./modules/module.js"; ``` -Let's look at a real example. In our [renaming](https://github.com/mdn/js-examples/tree/master/module-examples/renaming) directory you'll see the same module system as in the previous example, except that we've added `circle.js` and `triangle.js` modules to draw and report on circles and triangles. +Let's look at a real example. In our [renaming](https://github.com/mdn/js-examples/tree/main/module-examples/renaming) directory you'll see the same module system as in the previous example, except that we've added `circle.js` and `triangle.js` modules to draw and report on circles and triangles. Inside each of these modules, we've got features with the same names being exported, and therefore each has the same `export` statement at the bottom: @@ -568,7 +568,7 @@ Module.function1(); Module.function2(); ``` -Again, let's look at a real example. If you go to our [module-objects](https://github.com/mdn/js-examples/tree/master/module-examples/module-objects) directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form: +Again, let's look at a real example. If you go to our [module-objects](https://github.com/mdn/js-examples/tree/main/module-examples/module-objects) directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form: ```js export { name, draw, reportArea, reportPerimeter }; @@ -598,7 +598,7 @@ So you can now write the code just the same as before (as long as you include th As we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style. -You can see an example of our shape drawing module rewritten with ES classes in our [classes](https://github.com/mdn/js-examples/tree/master/module-examples/classes) directory. As an example, the [`square.js`](https://github.com/mdn/js-examples/blob/master/module-examples/classes/modules/square.js) file now contains all its functionality in a single class: +You can see an example of our shape drawing module rewritten with ES classes in our [classes](https://github.com/mdn/js-examples/tree/main/module-examples/classes) directory. As an example, the [`square.js`](https://github.com/mdn/js-examples/blob/main/module-examples/classes/modules/square.js) file now contains all its functionality in a single class: ```js class Square { @@ -620,7 +620,7 @@ which we then export: export { Square }; ``` -Over in [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/classes/main.js), we import it like this: +Over in [`main.js`](https://github.com/mdn/js-examples/blob/main/module-examples/classes/main.js), we import it like this: ```js import { Square } from "./modules/square.js"; @@ -644,7 +644,7 @@ export * from "x.js"; export { name } from "x.js"; ``` -For an example, see our [module-aggregation](https://github.com/mdn/js-examples/tree/master/module-examples/module-aggregation) directory. In this example (based on our earlier classes example) we've got an extra module called `shapes.js`, which aggregates all the functionality from `circle.js`, `square.js`, and `triangle.js` together. We've also moved our submodules inside a subdirectory inside the `modules` directory called `shapes`. So the module structure in this example is: +For an example, see our [module-aggregation](https://github.com/mdn/js-examples/tree/main/module-examples/module-aggregation) directory. In this example (based on our earlier classes example) we've got an extra module called `shapes.js`, which aggregates all the functionality from `circle.js`, `square.js`, and `triangle.js` together. We've also moved our submodules inside a subdirectory inside the `modules` directory called `shapes`. So the module structure in this example is: ```plain modules/ @@ -662,7 +662,7 @@ In each of the submodules, the export is of the same form, e.g. export { Square }; ``` -Next up comes the aggregation part. Inside [`shapes.js`](https://github.com/mdn/js-examples/blob/master/module-examples/module-aggregation/modules/shapes.js), we include the following lines: +Next up comes the aggregation part. Inside [`shapes.js`](https://github.com/mdn/js-examples/blob/main/module-examples/module-aggregation/modules/shapes.js), we include the following lines: ```js export { Square } from "./shapes/square.js"; @@ -705,9 +705,9 @@ import("./modules/myModule.js").then((module) => { -Let's look at an example. In the [dynamic-module-imports](https://github.com/mdn/js-examples/tree/master/module-examples/dynamic-module-imports) directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape. +Let's look at an example. In the [dynamic-module-imports](https://github.com/mdn/js-examples/tree/main/module-examples/dynamic-module-imports) directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape. -In this example we've only made changes to our [`index.html`](https://github.com/mdn/js-examples/blob/master/module-examples/dynamic-module-imports/index.html) and [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/dynamic-module-imports/main.js) files — the module exports remain the same as before. +In this example we've only made changes to our [`index.html`](https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/index.html) and [`main.js`](https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/main.js) files — the module exports remain the same as before. Over in `main.js` we've grabbed a reference to each button using a [`document.querySelector()`](/en-US/docs/Web/API/Document/querySelector) call, for example: @@ -754,9 +754,9 @@ Another advantage of dynamic imports is that they are always available, even in Top level await is a feature available within modules. This means the `await` keyword can be used. It allows modules to act as big [asynchronous functions](/en-US/docs/Learn/JavaScript/Asynchronous/Introducing) meaning code can be evaluated before use in parent modules, but without blocking sibling modules from loading. -Let's take a look at an example. You can find all the files and code described in this section within the [`top-level-await`](https://github.com/mdn/js-examples/tree/master/module-examples/top-level-await) directory, which extends from the previous examples. +Let's take a look at an example. You can find all the files and code described in this section within the [`top-level-await`](https://github.com/mdn/js-examples/tree/main/module-examples/top-level-await) directory, which extends from the previous examples. -Firstly we'll declare our color palette in a separate [`colors.json`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/data/colors.json) file: +Firstly we'll declare our color palette in a separate [`colors.json`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json) file: ```json { @@ -768,7 +768,7 @@ Firstly we'll declare our color palette in a separate [`colors.json`](https://gi } ``` -Then we'll create a module called [`getColors.js`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/modules/getColors.js) which uses a fetch request to load the [`colors.json`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/data/colors.json) file and return the data as an object. +Then we'll create a module called [`getColors.js`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js) which uses a fetch request to load the [`colors.json`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json) file and return the data as an object. ```js // fetch request @@ -781,7 +781,7 @@ Notice the last export line here. We're using the keyword `await` before specifying the constant `colors` to export. This means any other modules which include this one will wait until `colors` has been downloaded and parsed before using it. -Let's include this module in our [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/main.js) file: +Let's include this module in our [`main.js`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js) file: ```js import colors from "./modules/getColors.js"; @@ -823,7 +823,7 @@ const triangle1 = new Module.Triangle( ); ``` -This is useful because the code within [`main.js`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/main.js) won't execute until the code in [`getColors.js`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/modules/getColors.js) has run. However it won't block other modules being loaded. For instance our [`canvas.js`](https://github.com/mdn/js-examples/blob/master/module-examples/top-level-await/modules/canvas.js) module will continue to load while `colors` is being fetched. +This is useful because the code within [`main.js`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js) won't execute until the code in [`getColors.js`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js) has run. However it won't block other modules being loaded. For instance our [`canvas.js`](https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/canvas.js) module will continue to load while `colors` is being fetched. ## Import declarations are hoisted From 4700d9601c7df14a64fdeecdeec00e8ac43234a3 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 28 Nov 2023 11:22:14 -0800 Subject: [PATCH 018/390] add link to module css module page (#30584) * add lists module to content property see also * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya * reorder see also --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/content/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/content/index.md b/files/en-us/web/css/content/index.md index d37cc566b16d527..c7f0310cc8e67ac 100644 --- a/files/en-us/web/css/content/index.md +++ b/files/en-us/web/css/content/index.md @@ -451,13 +451,14 @@ If inserted content is not decorative, check that the information is provided to ## See also -- [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module -- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) - {{Cssxref("::after")}} - {{Cssxref("::before")}} - {{Cssxref("::marker")}} - {{Cssxref("contain")}} - {{Cssxref("quotes")}} - {{cssxref("gradient", "<gradient>")}} -- {{cssxref("image/image-set", "image-set()")}} function -- {{cssxref("url", "url()")}} function +- {{cssxref("image/image-set", "image-set()")}} +- {{cssxref("url", "url()")}} +- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) +- [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module +- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module From 95000d401c429e42d04f9d25d4693511b66e925b Mon Sep 17 00:00:00 2001 From: Sideways S Date: Tue, 28 Nov 2023 14:23:06 -0600 Subject: [PATCH 019/390] additions and standardizations for polygon() and path() (#30545) * standardization of polygon() and path() * touchup to polygon() * more detail for polygon * touch-up for polygon() * with -> by * Update files/en-us/web/css/path/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/css/basic-shape/polygon/index.md Co-authored-by: Estelle Weyl --------- Co-authored-by: Sideways S Co-authored-by: Estelle Weyl --- .../web/css/basic-shape/polygon/index.md | 6 +++++- files/en-us/web/css/path/index.md | 19 ++++++++++++------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/basic-shape/polygon/index.md b/files/en-us/web/css/basic-shape/polygon/index.md index e2bdee467d6ac08..b4f98909593c5c5 100644 --- a/files/en-us/web/css/basic-shape/polygon/index.md +++ b/files/en-us/web/css/basic-shape/polygon/index.md @@ -28,12 +28,16 @@ polygon(nonzero, 0% 0%, 50% 50%, 0% 100%) polygon(evenodd, 0% 0%, 50% 50%, 0% 100%) ``` +The `polygon()` parameters are separated by a comma and optional whitespace. The first parameter is an optional [``](/en-US/docs/Web/SVG/Attribute/fill-rule) value. Additional parameters are points that define the polygon. Each point is a pair of x/y coordinate {{cssxref("length-percentage")}} values separated by a space, e.g. "0 0" and "100% 100%" for the left/top and bottom right corners, respectively. + +Note: The SVG [``](/en-US/docs/Web/SVG/Element/polygon) element has separate attributes for [`fill-rule`](/en-US/docs/Web/SVG/Attribute/fill-rule) and [`points`](/en-US/docs/Web/SVG/Attribute/points), and `points` is flexible about the use of space and comma separators. CSS `polygon()` rules for separators are strictly enforced. + ### Parameters - [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} - : An optional value of `nonzero` (the default when omitted) or `evenodd`, which specifies the filling rule. - {{cssxref("length-percentage")}} - - : Each vertex of the polygon is represented with a pair of `` values, which give the coordinates of the vertex relative to the shape's [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box). + - : Each vertex of the polygon is represented by a pair of `` values, which give the x/y coordinates of the vertex relative to the shape's [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box). ### Return value diff --git a/files/en-us/web/css/path/index.md b/files/en-us/web/css/path/index.md index 5a5b2e82a8d23fc..8ab20757a2ab1d8 100644 --- a/files/en-us/web/css/path/index.md +++ b/files/en-us/web/css/path/index.md @@ -27,13 +27,18 @@ path([<'fill-rule'>,]?) ### Parameters -- `<'fill-rule'>` - - : The filling rule for the interior of the path. - Possible values are `nonzero` or `evenodd`. - The default value is `nonzero`. - See [fill-rule](/en-US/docs/Web/SVG/Attribute/fill-rule) for more details. -- `` - - : The string is a [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path). +- [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} + - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which specifies the filling rule. +- {{cssxref("string")}} + - : A [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path). The syntax for the contents of this `` is identical to SVG. + +### Return value + +Returns a {{cssxref("basic-shape")}} value. + +## Formal syntax + +{{csssyntax}} ## Examples From 289d6314f3368aa3e28524e7d090f6e9c704e3b1 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 28 Nov 2023 15:48:44 -0500 Subject: [PATCH 020/390] fix(learn): Update `rgb()` values to use latest syntax (#30604) update rgb values in prose --- .../advanced_styling_effects/index.md | 18 ++++---- .../backgrounds_and_borders/index.md | 4 +- .../building_blocks/styling_tables/index.md | 6 +-- .../building_blocks/values_and_units/index.md | 4 +- .../learn/css/css_layout/floats/index.md | 20 ++++----- .../en-us/learn/css/css_layout/grids/index.md | 42 +++++++++--------- .../css/css_layout/introduction/index.md | 44 +++++++++---------- .../css_layout/legacy_layout_methods/index.md | 6 +-- .../css/css_layout/media_queries/index.md | 12 ++--- .../multiple-column_layout/index.md | 14 +++--- .../learn/css/css_layout/normal_flow/index.md | 4 +- .../learn/css/css_layout/positioning/index.md | 4 +- .../supporting_older_browsers/index.md | 12 ++--- .../css/howto/create_fancy_boxes/index.md | 24 +++++----- .../css/howto/make_box_transparent/index.md | 2 +- .../example_1/index.md | 12 ++--- .../example_2/index.md | 4 +- .../example_3/index.md | 4 +- .../example_4/index.md | 4 +- .../example_5/index.md | 4 +- .../index.md | 36 +++++++-------- .../learn/forms/styling_web_forms/index.md | 2 +- .../building_blocks/functions/index.md | 2 +- .../building_blocks/image_gallery/index.md | 4 +- .../building_blocks/looping_code/index.md | 6 +-- .../building_blocks/return_values/index.md | 2 +- .../drawing_graphics/index.md | 8 ++-- .../video_and_audio_apis/index.md | 2 +- .../objects/object_building_practice/index.md | 6 +-- .../learn/performance/javascript/index.md | 2 +- .../angular_styling/index.md | 4 +- .../react_todo_list_beginning/index.md | 4 +- .../svelte_todo_list_beginning/index.md | 4 +- .../vue_styling/index.md | 4 +- .../html_and_css/index.md | 4 +- 35 files changed, 165 insertions(+), 169 deletions(-) diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md index b4e4b5d3d4ab807..5230ae8d7f42438 100644 --- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md @@ -62,13 +62,13 @@ article { background-color: red; background-image: linear-gradient( to bottom, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.25) + rgb(0 0 0 / 0%), + rgb(0 0 0 / 25%) ); } .simple { - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7); + box-shadow: 5px 5px 5px rgb(0 0 0 / 70%); } ``` @@ -109,8 +109,8 @@ article { background-color: red; background-image: linear-gradient( to bottom, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.25) + rgb(0 0 0 / 0%), + rgb(0 0 0 / 25%) ); } @@ -150,8 +150,8 @@ button { background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, - inset 2px 3px 5px rgba(0, 0, 0, 0.3), - inset -2px -3px 5px rgba(255, 255, 255, 0.5); + inset 2px 3px 5px rgb(0 0 0 / 30%), + inset -2px -3px 5px rgb(255 255 255 / 50%); } button:focus, @@ -162,8 +162,8 @@ button:hover { button:active { box-shadow: inset 2px 2px 1px black, - inset 2px 3px 5px rgba(0, 0, 0, 0.3), - inset -2px -3px 5px rgba(255, 255, 255, 0.5); + inset 2px 3px 5px rgb(0 0 0 / 30%), + inset -2px -3px 5px rgb(255 255 255 / 50%); } ``` diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 9fbccac44ec96f6..f91143587549860 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -44,8 +44,8 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr background: linear-gradient( 105deg, - rgba(255, 255, 255, 0.2) 39%, - rgba(51, 56, 57, 1) 96% + rgb(255 255 255 / 20%) 39%, + rgb(51 56 57 / 100%) 96% ) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; diff --git a/files/en-us/learn/css/building_blocks/styling_tables/index.md b/files/en-us/learn/css/building_blocks/styling_tables/index.md index 66a81f2110cf64d..bac3665969385c7 100644 --- a/files/en-us/learn/css/building_blocks/styling_tables/index.md +++ b/files/en-us/learn/css/building_blocks/styling_tables/index.md @@ -221,11 +221,7 @@ tfoot { thead th, tfoot th, tfoot td { - background: linear-gradient( - to bottom, - rgba(0, 0, 0, 0.1), - rgba(0, 0, 0, 0.5) - ); + background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%)); border: 3px solid purple; } ``` diff --git a/files/en-us/learn/css/building_blocks/values_and_units/index.md b/files/en-us/learn/css/building_blocks/values_and_units/index.md index 2f8dc141acd05d6..e605c0ecf94656f 100644 --- a/files/en-us/learn/css/building_blocks/values_and_units/index.md +++ b/files/en-us/learn/css/building_blocks/values_and_units/index.md @@ -57,7 +57,7 @@ In the following example, we have set the color of our heading using a keyword, ```css h1 { color: black; - background-color: rgb(197, 93, 161); + background-color: rgb(197 93 161); } ``` @@ -383,7 +383,7 @@ These values are less intuitive than keywords for defining colors, but they are **Again, try changing the values to see how the colors vary.** -### RGB and RGBA values +### RGB values To create RGB values directly, the `rgb()` function takes three parameters representing **red**, **green**, and **blue** channel values of the colors, with an optional fourth value separated by a slash ('/') representing opacity, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 or a percent between 0% and 100% inclusive (but not a mixture of the two). diff --git a/files/en-us/learn/css/css_layout/floats/index.md b/files/en-us/learn/css/css_layout/floats/index.md index 7ad52a52a4b0b46..9c0a347c90352a0 100644 --- a/files/en-us/learn/css/css_layout/floats/index.md +++ b/files/en-us/learn/css/css_layout/floats/index.md @@ -95,7 +95,7 @@ body { width: 150px; height: 100px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -145,7 +145,7 @@ To float the box, add the {{cssxref("float")}} and {{cssxref("margin-right")}} p width: 150px; height: 100px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -166,7 +166,7 @@ Add a class of `special` to the first paragraph of text, the one immediately fol ```css .special { - background-color: rgb(148, 255, 172); + background-color: rgb(148 255 172); padding: 10px; color: purple; } @@ -223,7 +223,7 @@ body { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -293,12 +293,12 @@ body { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } .special { - background-color: rgb(148, 255, 172); + background-color: rgb(148 255 172); padding: 10px; color: purple; } @@ -341,7 +341,7 @@ In your CSS, add the following rule for the `.wrapper` class and then reload the ```css live-sample___the_problem .wrapper { - background-color: rgb(148, 255, 172); + background-color: rgb(148 255 172); padding: 10px; color: purple; } @@ -395,7 +395,7 @@ body { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; color: black; } @@ -411,7 +411,7 @@ To solve this problem is to use the value `flow-root` of the `display` property. ```css .wrapper { - background-color: rgb(148, 255, 172); + background-color: rgb(148 255 172); padding: 10px; color: purple; display: flow-root; @@ -467,7 +467,7 @@ body { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; color: black; } diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 9008f6bbd03ff91..8c868b92df57e77 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -85,8 +85,8 @@ body { .container > div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -142,8 +142,8 @@ body { .container > div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -195,8 +195,8 @@ body { .container > div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -264,8 +264,8 @@ body { .container > div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -329,8 +329,8 @@ body { .container > div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -423,8 +423,8 @@ header, footer { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } aside { @@ -525,8 +525,8 @@ header, footer { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } aside { @@ -663,8 +663,8 @@ header, footer { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } header { grid-area: header; @@ -700,7 +700,7 @@ footer { article { padding: 10px; - border: 2px solid rgb(79, 185, 227); + border: 2px solid rgb(79 185 227); border-radius: 5px; } ``` @@ -726,8 +726,8 @@ body { .container div { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } ``` @@ -818,8 +818,8 @@ header, footer { border-radius: 5px; padding: 10px; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); } aside { diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md index 7525d66960fa742..96f0c70d17cdcb6 100644 --- a/files/en-us/learn/css/css_layout/introduction/index.md +++ b/files/en-us/learn/css/css_layout/introduction/index.md @@ -103,7 +103,7 @@ However, if we add `display: flex` to the parent, the three items now arrange th } .wrapper > div { border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -136,7 +136,7 @@ As a simple example, we can add the {{cssxref("flex")}} property to all of our c } .wrapper > div { border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -178,7 +178,7 @@ Similar to flexbox, we enable Grid Layout with its specific display value — `d .wrapper > div { border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -216,7 +216,7 @@ Once you have a grid, you can explicitly place your items on it, rather than rel .wrapper > div { border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -285,8 +285,8 @@ p { } .box { - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; border-radius: 5px; } @@ -358,8 +358,8 @@ body { } p { - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; margin: 10px; border-radius: 5px; @@ -368,8 +368,8 @@ p { ```css hidden .positioned { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); } ``` @@ -408,8 +408,8 @@ body { } p { - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; margin: 10px; border-radius: 5px; @@ -419,8 +419,8 @@ p { ```css hidden .positioned { position: relative; - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); top: 30px; left: 30px; } @@ -459,8 +459,8 @@ body { } p { - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; margin: 10px; border-radius: 5px; @@ -469,8 +469,8 @@ p { ```css hidden .positioned { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); } ``` @@ -517,8 +517,8 @@ body { } .positioned { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); padding: 10px; margin: 10px; border-radius: 5px; @@ -586,8 +586,8 @@ body { } .positioned { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); padding: 10px; margin: 10px; border-radius: 5px; diff --git a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md index 88d3102c90952f1..aa5d87e47b1c993 100644 --- a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md @@ -208,7 +208,7 @@ Our next step is to create a rule for the class `.col`, floating it left, giving float: left; margin-left: 20px; width: 60px; - background: rgb(255, 150, 150); + background: rgb(255 150 150); } ``` @@ -327,7 +327,7 @@ Next, update the fourth CSS rule (with the `.col` selector) like so: float: left; margin-left: 2.08333333%; width: 6.25%; - background: rgb(255, 150, 150); + background: rgb(255 150 150); } ``` @@ -524,7 +524,7 @@ body { margin-bottom: 1em; width: 6.25%; flex: 1 1 auto; - background: rgb(255, 150, 150); + background: rgb(255 150 150); } ``` diff --git a/files/en-us/learn/css/css_layout/media_queries/index.md b/files/en-us/learn/css/css_layout/media_queries/index.md index 93fec6ea8b22d1e..ecbeca69288b755 100644 --- a/files/en-us/learn/css/css_layout/media_queries/index.md +++ b/files/en-us/learn/css/css_layout/media_queries/index.md @@ -239,8 +239,8 @@ aside ul { nav a:link, nav a:visited { - background-color: rgba(207, 232, 220, 0.2); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220 / 20%); + border: 2px solid rgb(79 185 227); text-decoration: none; display: block; padding: 10px; @@ -249,17 +249,17 @@ nav a:visited { } nav a:hover { - background-color: rgba(207, 232, 220, 0.7); + background-color: rgb(207 232 220 / 70%); } .related { - background-color: rgba(79, 185, 227, 0.3); - border: 1px solid rgb(79, 185, 227); + background-color: rgb(79 185 227 / 30%); + border: 1px solid rgb(79 185 227); padding: 10px; } .sidebar { - background-color: rgba(207, 232, 220, 0.5); + background-color: rgb(207 232 220 / 50%); padding: 10px; } diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md index 73884f55cde7d06..6a88e2717e9ec51 100644 --- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md @@ -161,7 +161,7 @@ Now add a rule between the columns with `column-rule`. In a similar way to the { .container { column-count: 3; column-gap: 20px; - column-rule: 4px dotted rgb(79, 185, 227); + column-rule: 4px dotted rgb(79 185 227); } ``` @@ -231,11 +231,11 @@ body { .container { column-count: 3; column-gap: 20px; - column-rule: 4px dotted rgb(79, 185, 227); + column-rule: 4px dotted rgb(79 185 227); } h2 { column-span: all; - background-color: rgb(79, 185, 227); + background-color: rgb(79 185 227); color: white; padding: 0.5em; } @@ -369,8 +369,8 @@ body { } .card { - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; margin: 0 0 1em 0; } @@ -385,8 +385,8 @@ To control this behavior, we can use properties from the [CSS Fragmentation](/en ```css .card { break-inside: avoid; - background-color: rgb(207, 232, 220); - border: 2px solid rgb(79, 185, 227); + background-color: rgb(207 232 220); + border: 2px solid rgb(79 185 227); padding: 10px; margin: 0 0 1em 0; } diff --git a/files/en-us/learn/css/css_layout/normal_flow/index.md b/files/en-us/learn/css/css_layout/normal_flow/index.md index 94cd87ad6a7c9b3..1a3299ccacbdb9b 100644 --- a/files/en-us/learn/css/css_layout/normal_flow/index.md +++ b/files/en-us/learn/css/css_layout/normal_flow/index.md @@ -89,8 +89,8 @@ body { } p { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); padding: 10px; margin: 10px; } diff --git a/files/en-us/learn/css/css_layout/positioning/index.md b/files/en-us/learn/css/css_layout/positioning/index.md index a32dae04bef22fb..267d717a654e168 100644 --- a/files/en-us/learn/css/css_layout/positioning/index.md +++ b/files/en-us/learn/css/css_layout/positioning/index.md @@ -553,8 +553,8 @@ body { } .positioned { - background: rgba(255, 84, 104, 0.3); - border: 2px solid rgb(255, 84, 104); + background: rgb(255 84 104 / 30%); + border: 2px solid rgb(255 84 104); padding: 10px; margin: 10px; border-radius: 5px; diff --git a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md index af58b253d213bea..278479239bacf04 100644 --- a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md @@ -71,7 +71,7 @@ In the example below, we have floated three `
                                                  `s so they display in a row. A } .wrapper { - background-color: rgb(79, 185, 227); + background-color: rgb(79 185 227); padding: 10px; max-width: 400px; display: grid; @@ -81,7 +81,7 @@ In the example below, we have floated three `
                                                  `s so they display in a row. A .item { float: left; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; } ``` @@ -121,7 +121,7 @@ In the floated layout, the percentage is calculated from the container — 33.33 } .wrapper { - background-color: rgb(79, 185, 227); + background-color: rgb(79 185 227); padding: 10px; max-width: 400px; display: grid; @@ -131,7 +131,7 @@ In the floated layout, the percentage is calculated from the container — 33.33 .item { float: left; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; width: 33.333%; } @@ -161,7 +161,7 @@ If we add a feature query to the above example, we can use it to set the widths } .wrapper { - background-color: rgb(79, 185, 227); + background-color: rgb(79 185 227); padding: 10px; max-width: 400px; display: grid; @@ -171,7 +171,7 @@ If we add a feature query to the above example, we can use it to set the widths .item { float: left; border-radius: 5px; - background-color: rgb(207, 232, 220); + background-color: rgb(207 232 220); padding: 1em; width: 33.333%; } diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md index 613e9ac0e753aed..15d018ef9e6ad54 100644 --- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md +++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md @@ -101,18 +101,18 @@ Okay, let's have fun with backgrounds: As you will notice, color gradients are considered to be images and can be manipulated as such */ - background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), - linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), - linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), - linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), - linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), - linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), - linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), - linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), - linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), - linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), - linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), - linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); + background-image: linear-gradient(175deg, rgb(0 0 0 / 0%) 95%, #8da389 95%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 95%, #8da389 95%), + linear-gradient(175deg, rgb(0 0 0 / 0%) 90%, #b4b07f 90%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 92%, #b4b07f 92%), + linear-gradient(175deg, rgb(0 0 0 / 0%) 85%, #c5a68e 85%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 89%, #c5a68e 89%), + linear-gradient(175deg, rgb(0 0 0 / 0%) 80%, #ba9499 80%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 86%, #ba9499 86%), + linear-gradient(175deg, rgb(0 0 0 / 0%) 75%, #9f8fa4 75%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 83%, #9f8fa4 83%), + linear-gradient(175deg, rgb(0 0 0 / 0%) 70%, #74a6ae 70%), + linear-gradient( 85deg, rgb(0 0 0 / 0%) 80%, #74a6ae 80%); } ``` diff --git a/files/en-us/learn/css/howto/make_box_transparent/index.md b/files/en-us/learn/css/howto/make_box_transparent/index.md index 998437c1d85de61..d92e30b99a1d0c5 100644 --- a/files/en-us/learn/css/howto/make_box_transparent/index.md +++ b/files/en-us/learn/css/howto/make_box_transparent/index.md @@ -16,7 +16,7 @@ Using a value of `0` would make the box completely transparent, and values betwe ## Changing the opacity of the background color only -In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a color value which has an alpha channel—such as [rgba](/en-US/docs/Web/CSS/color_value#rgb_color_model). As with `opacity`, a value of `1` for the alpha channel value makes the color fully opaque. Therefore `background-color: rgba(0,0,0,.5);` will set the background color to 50% opacity. +In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a [``](/en-US/docs/Web/CSS/color_value) value that has an alpha channel, such as `rgb()`. As with `opacity`, a value of `1` for the alpha channel value makes the color fully opaque. Therefore, `background-color: rgb(0 0 0 / 50%);` will set the background color to 50% opacity. Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box. diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md index ec53b076fcd534f..ea3e6728b61a8ac 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md @@ -68,7 +68,7 @@ This is the first example of code that explains [how to build a custom form widg border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -118,7 +118,7 @@ This is the first example of code that explains [how to build a custom form widg border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -204,7 +204,7 @@ This is the first example of code that explains [how to build a custom form widg border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -254,7 +254,7 @@ This is the first example of code that explains [how to build a custom form widg border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -340,7 +340,7 @@ This is the first example of code that explains [how to build a custom form widg border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -390,7 +390,7 @@ This is the first example of code that explains [how to build a custom form widg border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md index 0821f14dec6b103..a78cd60a5f19248 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md @@ -86,7 +86,7 @@ This is the second example that explain [how to build custom form widgets](/en-U border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -136,7 +136,7 @@ This is the second example that explain [how to build custom form widgets](/en-U border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md index 3b9e89387e59933..844236edc74737e 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md @@ -86,7 +86,7 @@ This is the third example that explain [how to build custom form widgets](/en-US border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -136,7 +136,7 @@ This is the third example that explain [how to build custom form widgets](/en-US border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md index e2d3bce9d4073d6..eeae3ad95bbac9d 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md @@ -86,7 +86,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -136,7 +136,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md index 0c552b6372b400f..cb0e19800771929 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md @@ -86,7 +86,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/ border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -136,7 +136,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/ border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md index 08b4d0760f38331..27555569022dbc2 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md @@ -189,7 +189,7 @@ So now that we have the basic functionality in place, the fun can start. The fol border: 0.2em solid #000; border-radius: 0.4em; - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* The first declaration is for browsers that do not support linear gradients. */ background: #f0f0f0; @@ -262,7 +262,7 @@ Next, let's style the list of options: border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); background: #f0f0f0; } ``` @@ -332,7 +332,7 @@ So here's the result with our three states ([check out the source code here](/en border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -382,7 +382,7 @@ So here's the result with our three states ([check out the source code here](/en border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -454,7 +454,7 @@ So here's the result with our three states ([check out the source code here](/en border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -504,7 +504,7 @@ So here's the result with our three states ([check out the source code here](/en border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -576,7 +576,7 @@ So here's the result with our three states ([check out the source code here](/en border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -626,7 +626,7 @@ So here's the result with our three states ([check out the source code here](/en border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -835,7 +835,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -885,7 +885,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -1132,7 +1132,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -1182,7 +1182,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -1453,7 +1453,7 @@ Check out the [source code here](/en-US/docs/Learn/Forms/How_to_build_custom_for border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -1503,7 +1503,7 @@ Check out the [source code here](/en-US/docs/Learn/Forms/How_to_build_custom_for border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -1778,7 +1778,7 @@ Check out the [full source code here](/en-US/docs/Learn/Forms/How_to_build_custo border: 0.2em solid #000; /* 2px */ border-radius: 0.4em; /* 4px */ - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */ + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */ background: #f0f0f0; background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); @@ -1828,7 +1828,7 @@ Check out the [full source code here](/en-US/docs/Learn/Forms/How_to_build_custo border-top-width: 0.1em; border-radius: 0 0 0.4em 0.4em; - box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4); + box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%); box-sizing: border-box; @@ -2042,7 +2042,7 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to .styledSelect:not(:focus-within) input:checked + label { border: 0.2em solid #000; border-radius: 0.4em; - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); } .styledSelect:not(:focus-within) input:checked + label::after { content: "▼"; @@ -2055,7 +2055,7 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to .styledSelect:focus-within { border: 0.2em solid #000; border-radius: 0.4em; - box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); + box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); } .styledSelect:focus-within input:checked + label { background-color: #333; diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md index 4ec51ce5ef53ea4..f14329e437988a9 100644 --- a/files/en-us/learn/forms/styling_web_forms/index.md +++ b/files/en-us/learn/forms/styling_web_forms/index.md @@ -309,7 +309,7 @@ When one of these fields gains focus, we highlight them with a light grey, trans ```css input:focus, textarea:focus { - background: rgba(0, 0, 0, 0.1); + background: rgb(0 0 0 / 10%); border-radius: 5px; } ``` diff --git a/files/en-us/learn/javascript/building_blocks/functions/index.md b/files/en-us/learn/javascript/building_blocks/functions/index.md index 926179c794166b9..dad46d2d39a38d6 100644 --- a/files/en-us/learn/javascript/building_blocks/functions/index.md +++ b/files/en-us/learn/javascript/building_blocks/functions/index.md @@ -89,7 +89,7 @@ function draw() { ctx.clearRect(0, 0, WIDTH, HEIGHT); for (let i = 0; i < 100; i++) { ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,0.5)"; + ctx.fillStyle = "rgb(255 0 0 / 50%)"; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); } diff --git a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md index bc1315116e11571..9b044505f10d119 100644 --- a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md @@ -101,8 +101,8 @@ Alternatively, you can add one event listener to the thumb bar. That just leaves our darken/lighten `