From 79f75809844204ce0dd5a1411095b7851711cdeb Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 2 Oct 2024 11:46:15 +0530 Subject: [PATCH 01/94] Synchronize with BCD v5.6.4 (#36084) Co-authored-by: OnkarRuikar --- files/en-us/web/api/scheduler/index.md | 2 +- files/en-us/web/api/scheduler/yield/index.md | 4 +++- files/en-us/web/manifest/serviceworker/index.md | 6 +++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/scheduler/index.md b/files/en-us/web/api/scheduler/index.md index 269acd6fe15ca6c..3a42660c43c8e70 100644 --- a/files/en-us/web/api/scheduler/index.md +++ b/files/en-us/web/api/scheduler/index.md @@ -19,7 +19,7 @@ None. - {{domxref('Scheduler.postTask()')}} - : Adds a task to the scheduler as a callback, optionally specifying a priority, delay, and/or a signal for aborting the task. -- {{domxref('Scheduler.yield()')}} +- {{domxref('Scheduler.yield()')}} {{experimental_inline}} - : Yields control of the main thread back to the browser, returning a promise that resolves to continue execution where it left off. ## Examples diff --git a/files/en-us/web/api/scheduler/yield/index.md b/files/en-us/web/api/scheduler/yield/index.md index 84f0d1c3a74194a..fcb17a8a9c257e9 100644 --- a/files/en-us/web/api/scheduler/yield/index.md +++ b/files/en-us/web/api/scheduler/yield/index.md @@ -3,10 +3,12 @@ title: "Scheduler: yield() method" short-title: yield() slug: Web/API/Scheduler/yield page-type: web-api-instance-method +status: + - experimental browser-compat: api.Scheduler.yield --- -{{APIRef('Prioritized Task Scheduling API')}}{{AvailableInWorkers}} +{{APIRef('Prioritized Task Scheduling API')}}{{AvailableInWorkers}}{{SeeCompatTable}} The **`yield()`** method of the {{domxref('Scheduler')}} interface is used for yielding to the [main thread](/en-US/docs/Glossary/Main_thread) during a task and continuing execution later, with the continuation scheduled as a prioritized task (see the [Prioritized Task Scheduling API](/en-US/docs/Web/API/Prioritized_Task_Scheduling_API) for more information). This allows long-running work to be broken up so the browser stays responsive. diff --git a/files/en-us/web/manifest/serviceworker/index.md b/files/en-us/web/manifest/serviceworker/index.md index 8dec48cb8c698d8..425554ce5f7053c 100644 --- a/files/en-us/web/manifest/serviceworker/index.md +++ b/files/en-us/web/manifest/serviceworker/index.md @@ -16,15 +16,15 @@ The `serviceworker` member specifies a serviceworker that is Just-In-Time (JIT)- `serviceworker` objects may contain the following values: -- `scope` {{experimental_inline}} +- `scope` {{experimental_inline}} {{non-standard_inline}} - : A string representing the service worker's registration scope. -- `src` {{experimental_inline}} +- `src` {{experimental_inline}} {{non-standard_inline}} - : A string representing the URL to download the service worker script from. -- `use_cache` {{experimental_inline}} +- `use_cache` {{experimental_inline}} {{non-standard_inline}} - : A boolean that sets how the HTTP cache is used for service worker script resources during updates. It provides equivalent functionality to certain values of the `updateViaCache` option provided when a service worker is registered via JavaScript using {{domxref("ServiceWorkerContainer.register()")}}. From 12f63e8509fb278b2de5d04e552287b465d60256 Mon Sep 17 00:00:00 2001 From: AshmitGupta <67188586+AshmitGupta@users.noreply.github.com> Date: Tue, 1 Oct 2024 23:20:52 -0700 Subject: [PATCH 02/94] Linked normalized diagonal for SVG attribute (#36023) * Linked normalized diagonal for SVG attribute * Update files/en-us/web/svg/attribute/r/index.md --------- Co-authored-by: Joshua Chen --- files/en-us/web/svg/attribute/r/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/attribute/r/index.md b/files/en-us/web/svg/attribute/r/index.md index 69c8a6ad099e95b..12dce78663a5a34 100644 --- a/files/en-us/web/svg/attribute/r/index.md +++ b/files/en-us/web/svg/attribute/r/index.md @@ -16,7 +16,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement("circle")}} - {{SVGElement("radialGradient")}} -When the value is set as a percentage, it refers to the normalized diagonal of the current SVG viewport. +Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as <width>2+<height>22. ## Example From ed9ebd794add41de1f2e759502b73e8650afe56b Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 2 Oct 2024 21:58:44 +0800 Subject: [PATCH 03/94] Fix links (#36158) * fix links * Update files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md --------- Co-authored-by: Joshua Chen --- .../package_management/index.md | 2 +- .../add-ons/webextensions/manifest.json/background/index.md | 2 +- .../add-ons/webextensions/your_second_webextension/index.md | 2 +- files/en-us/web/api/audiolistener/index.md | 2 +- files/en-us/web/api/htmlmediaelement/playbackrate/index.md | 2 +- files/en-us/web/api/performance/now/index.md | 6 +++--- files/en-us/web/api/webrtc_api/using_data_channels/index.md | 4 ++-- files/en-us/web/css/@page/index.md | 2 +- .../headers/content-security-policy/default-src/index.md | 2 +- files/en-us/web/media/formats/containers/index.md | 2 +- .../security/practical_implementation_guides/csp/index.md | 2 +- 11 files changed, 14 insertions(+), 14 deletions(-) diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md index 334012e5263c20c..9e82f830d71574b 100644 --- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md +++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md @@ -70,7 +70,7 @@ To see local dependencies really shine, all you need to do is try to download an For a package manager to work, it needs to know where to install packages from, and this comes in the form of a package registry. The registry is a central place where a package is published and thus can be installed from. npm, as well as being a package manager, is also the name of the most commonly-used package registry for JavaScript packages. The npm registry exists at [npmjs.com](https://www.npmjs.com/). -npm is not the only option. You could manage your own package registry — products like [Microsoft Azure](https://azure.microsoft.com/) allow you to create proxies to the npm registry (so you can override or lock certain packages), [GitHub also offers a package registry service](https://github.com/features/packages), and there will be likely more options appearing as time goes on. +npm is not the only option. You could manage your own package registry — products like [Microsoft Azure](https://azure.microsoft.com/) allow you to create proxies to the npm registry (so you can override or lock certain packages), [GitHub also offers a package registry service](https://docs.github.com/en/packages), and there will be likely more options appearing as time goes on. What is important is that you ensure you've chosen the best registry for you. Many projects will use npm, and we'll stick to this in our examples throughout the rest of the module. diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md index 01f97a9b0edeecd..be21cd7db44b541 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md @@ -167,7 +167,7 @@ Support for the `scripts`, `page`, and `service_worker` properties varies betwee - supports `background.scripts` (and `background.page`) in Manifest V2 extensions only. - before Chrome 121, Chrome refuses to load a Manifest V3 extension with `background.scripts` or `background.page` present. From Chrome 121, their presence in a Manifest V3 extension is ignored. - Firefox: - - `background.service_worker` is not supported (see [Firefox bug 1573659](https://bugzilla.mozilla.org/show_bug.cgi?id=1573659)). + - `background.service_worker` is not supported (see [Firefox bug 1573659](https://bugzil.la/1573659)). - supports `background.scripts` (or `background.page`) if `service_worker` is not specified or the service worker feature is disabled. Before Firefox 120, Firefox did not start the background page if `service_worker` was present (see [Firefox bug 1860304](https://bugzil.la/1860304)). From Firefox 121, the background page starts as expected, regardless of the presence of `service_worker`. - Safari: - supports `background.service_worker`. diff --git a/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md index 47e6b81a6ca41bd..c45d283787cf5bc 100644 --- a/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md @@ -112,7 +112,7 @@ If you choose to supply your own icon, It should be 48x48 pixels. You could also The toolbar button also needs an icon, and our manifest.json promised that we would have an icon for the toolbar at "icons/beasts-32.png". -Save an icon named "beasts-32.png" in the "icons" directory. You could use [the one from our example](https://raw.githubusercontent.com/mdn/webextensions-examples/main/beastify/icons/beasts-32.png), which is taken from the [IconBeast Lite icon set](http://www.iconbeast.com/free/) and used under the terms of its [license](http://www.iconbeast.com/faq/). +Save an icon named "beasts-32.png" in the "icons" directory. You could use [the one from our example](https://raw.githubusercontent.com/mdn/webextensions-examples/main/beastify/icons/beasts-32.png), which is taken from the [IconBeast Lite icon set](https://www.iconbeast.com/free/) and used under the terms of its [license](https://www.iconbeast.com/faq/). If you don't supply a popup, then a click event is dispatched to your extension when the user clicks the button. If you do supply a popup, the click event is not dispatched, but instead, the popup is opened. We want a popup, so let's create that next. diff --git a/files/en-us/web/api/audiolistener/index.md b/files/en-us/web/api/audiolistener/index.md index bc3da64acde989c..d66625856fc6253 100644 --- a/files/en-us/web/api/audiolistener/index.md +++ b/files/en-us/web/api/audiolistener/index.md @@ -45,7 +45,7 @@ It is important to note that there is only one listener per context and that it - : Sets the position of the listener. > [!NOTE] -> Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox (see [Firefox bug 1283029](https://bugzilla.mozilla.org/show_bug.cgi?id=1283029)). +> Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox (see [Firefox bug 1283029](https://bugzil.la/1283029)). ## Deprecated features diff --git a/files/en-us/web/api/htmlmediaelement/playbackrate/index.md b/files/en-us/web/api/htmlmediaelement/playbackrate/index.md index 1bb052c2a4b2d52..a5b6d9c3b3404b4 100644 --- a/files/en-us/web/api/htmlmediaelement/playbackrate/index.md +++ b/files/en-us/web/api/htmlmediaelement/playbackrate/index.md @@ -38,5 +38,5 @@ console.log(obj.playbackRate); // Expected Output: 1 ## See also - {{domxref("HTMLMediaElement")}}: Interface used to define the `HTMLMediaElement.playbackRate` property -- Browser bug reports to support negative `playbackRate` in [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1468019) and [Blink](https://issues.chromium.org/issues/40410591) (Chrome, etc.) +- Browser bug reports to support negative `playbackRate` in [Firefox](https://bugzil.la/1468019) and [Blink](https://crbug.com/40410591) (Chrome, etc.) - The Web Hypertext Application Technology Working Group (WHATWG) [issue to require support for negative `playbackRate`](https://github.com/whatwg/html/issues/3754) diff --git a/files/en-us/web/api/performance/now/index.md b/files/en-us/web/api/performance/now/index.md index f090bc5bf3c7e5e..5c76ae03ded60a5 100644 --- a/files/en-us/web/api/performance/now/index.md +++ b/files/en-us/web/api/performance/now/index.md @@ -56,9 +56,9 @@ currentTime = performance.timeOrigin + performance.now(); The specification (Level 2) requires that `performance.now()` should tick during sleep. It appears that only Firefox on Windows, and Chromiums on Windows keep ticking during sleep. Relevant browser bugs for other operating systems: -- Chrome/Chromium ([bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1206450)) -- Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1709767)) -- Safari/WebKit ([bug](https://bugs.webkit.org/show_bug.cgi?id=225610)) +- Chrome/Chromium ([bug](https://crbug.com/1206450)) +- Firefox ([bug](https://bugzil.la/1709767)) +- Safari/WebKit ([bug](https://webkit.org/b/225610)) More details can also be found in the specification issue [hr-time#115](https://github.com/w3c/hr-time/issues/115#issuecomment-1172985601). diff --git a/files/en-us/web/api/webrtc_api/using_data_channels/index.md b/files/en-us/web/api/webrtc_api/using_data_channels/index.md index f58c3129f57b975..bf72cc8b0f712b9 100644 --- a/files/en-us/web/api/webrtc_api/using_data_channels/index.md +++ b/files/en-us/web/api/webrtc_api/using_data_channels/index.md @@ -76,11 +76,11 @@ Currently, it's not practical to use `RTCDataChannel` for messages larger than 6 This eventually became a problem. Over time, various applications (including those implementing WebRTC) began to use SCTP to transmit larger and larger messages. Eventually it was realized that when the messages become too large, it's possible for the transmission of a large message to block all other data transfers on that data channel—including critical signaling messages. -This will become an issue when browsers properly support the current standard for supporting larger messages—the end-of-record (EOR) flag that indicates when a message is the last one in a series that should be treated as a single payload. This is implemented in Firefox 57, but is not yet implemented in Chrome (see [Chromium Bug 7774](https://bugs.chromium.org/p/webrtc/issues/detail?id=7774)). With EOR support in place, `RTCDataChannel` payloads can be much larger (officially up to 256 KiB, but Firefox's implementation caps them at a whopping 1 GiB). Even at 256 KiB, that's large enough to cause noticeable delays in handling urgent traffic. If you go even larger, the delays can become untenable unless you are certain of your operational conditions. +This will become an issue when browsers properly support the current standard for supporting larger messages—the end-of-record (EOR) flag that indicates when a message is the last one in a series that should be treated as a single payload. This is implemented in Firefox 57, but is not yet implemented in Chrome (see [Chromium Bug 7774](https://crbug.com/webrtc/7774)). With EOR support in place, `RTCDataChannel` payloads can be much larger (officially up to 256 KiB, but Firefox's implementation caps them at a whopping 1 GiB). Even at 256 KiB, that's large enough to cause noticeable delays in handling urgent traffic. If you go even larger, the delays can become untenable unless you are certain of your operational conditions. In order to resolve this issue, a new system of **stream schedulers** (usually referred to as the "SCTP ndata specification") has been designed to make it possible to interleave messages sent on different streams, including streams used to implement WebRTC data channels. This [proposal](https://datatracker.ietf.org/doc/html/draft-ietf-tsvwg-sctp-ndata) is still in IETF draft form, but once implemented, it will make it possible to send messages with essentially no size limitations, since the SCTP layer will automatically interleave the underlying sub-messages to ensure that every channel's data has the opportunity to get through. -Firefox support for ndata is in the process of being implemented; see [Firefox bug 1381145](https://bugzil.la/1381145) to track it becoming available for general use. The Chrome team is tracking their implementation of ndata support in [Chrome Bug 5696](https://bugs.chromium.org/p/webrtc/issues/detail?id=5696). +Firefox support for ndata is in the process of being implemented; see [Firefox bug 1381145](https://bugzil.la/1381145) to track it becoming available for general use. The Chrome team is tracking their implementation of ndata support in [Chrome Bug 5696](https://crbug.com/webrtc/5696). > [!NOTE] > Much of the information in this section is based in part on the blog post [Demystifying WebRTC's Data Channel Message Size Limitations](https://lgrahl.de/articles/demystifying-webrtc-dc-size-limit.html), written by Lennart Grahl. He goes into a bit more detail there, but as browsers have been updated since then some of it may be out-of-date. In addition, as time goes by, it will become more so, especially once EOR and ndata support are fully integrated in the major browsers. diff --git a/files/en-us/web/css/@page/index.md b/files/en-us/web/css/@page/index.md index 862b495d7cb2fbc..ec68465c6ad9347 100644 --- a/files/en-us/web/css/@page/index.md +++ b/files/en-us/web/css/@page/index.md @@ -408,6 +408,6 @@ Please refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) - The `@page` [`size`](/en-US/docs/Web/CSS/@page/size) descriptor - The {{Cssxref("page")}} property -- See the [\[META\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.) +- See the [\[META\] CSS Paged Media Module Level 3](https://bugzil.la/286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.) - [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media) module - [Paged.js: W3C paged media polyfill](https://pagedjs.org/documentation/1-the-big-picture/) diff --git a/files/en-us/web/http/headers/content-security-policy/default-src/index.md b/files/en-us/web/http/headers/content-security-policy/default-src/index.md index 05bdb34629ac257..904148b03c194e2 100644 --- a/files/en-us/web/http/headers/content-security-policy/default-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/default-src/index.md @@ -95,7 +95,7 @@ However, there is a problem here. If you are embedding SVG sprites defined in ex ``` -your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzilla.mozilla.org/show_bug.cgi?id=1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). +your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzil.la/1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). Alternatively, if the `default-src 'none'` policy is a hard requirement, you can include the SVG sprites inline in the HTML page: diff --git a/files/en-us/web/media/formats/containers/index.md b/files/en-us/web/media/formats/containers/index.md index 34083b2c507c85e..42dbd3155e1d949 100644 --- a/files/en-us/web/media/formats/containers/index.md +++ b/files/en-us/web/media/formats/containers/index.md @@ -660,7 +660,7 @@ You can also [add the `codecs` parameter](/en-US/docs/Web/Media/Formats/codecs_p > [!WARNING] -> Ogg Opus audio files longer than 12h 35m 39s are truncated and exhibit seeking issues when played on Firefox Linux 64 bit ([Firefox bug 1810378](https://bugzilla.mozilla.org/show_bug.cgi?id=1810378)). +> Ogg Opus audio files longer than 12h 35m 39s are truncated and exhibit seeking issues when played on Firefox Linux 64 bit ([Firefox bug 1810378](https://bugzil.la/1810378)). ### QuickTime diff --git a/files/en-us/web/security/practical_implementation_guides/csp/index.md b/files/en-us/web/security/practical_implementation_guides/csp/index.md index f5ff3de72626420..e35a58183a63f9c 100644 --- a/files/en-us/web/security/practical_implementation_guides/csp/index.md +++ b/files/en-us/web/security/practical_implementation_guides/csp/index.md @@ -65,7 +65,7 @@ Keep the following points in mind: ``` - your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzilla.mozilla.org/show_bug.cgi?id=1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). + your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzil.la/1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). Alternatively, if the `default-src 'none'` policy is a hard requirement, you can include the SVG sprites inline in the HTML page — see [CSP: default-src](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src#firefox_default-src_none_svg_sprite_blocking_issue) for an example. From 199b1ab9210af2da7306f2a034c70980c5b873b5 Mon Sep 17 00:00:00 2001 From: Ragul <67683723+ragul1697@users.noreply.github.com> Date: Wed, 2 Oct 2024 19:31:23 +0530 Subject: [PATCH 04/94] Remove text-align: justify-all (#36161) Update text-align index.md --- files/en-us/web/css/text-align/index.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/files/en-us/web/css/text-align/index.md b/files/en-us/web/css/text-align/index.md index 484e5a81ddd22a7..7f124ad384151e4 100644 --- a/files/en-us/web/css/text-align/index.md +++ b/files/en-us/web/css/text-align/index.md @@ -21,7 +21,6 @@ text-align: left; text-align: right; text-align: center; text-align: justify; -text-align: justify-all; text-align: match-parent; /* Block alignment values (Non-standard syntax) */ @@ -52,8 +51,6 @@ The `text-align` property is specified as a single keyword from the list below. - : The inline contents are centered within the line box. - `justify` - : The inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line. -- `justify-all` - - : Same as `justify`, but also forces the last line to be justified. - `match-parent` - : Similar to `inherit`, but the values `start` and `end` are calculated according to the parent's {{cssxref("direction")}} and are replaced by the appropriate `left` or `right` value. From 0a24354d9ac0cac0b9c6f47de27cbf758c9f32f4 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 2 Oct 2024 22:01:42 +0800 Subject: [PATCH 05/94] chore: remove the extra period and space (#36159) --- files/en-us/web/api/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/file/index.md b/files/en-us/web/api/file/index.md index 94bf2a11e850aaf..05a9f93cbcfa397 100644 --- a/files/en-us/web/api/file/index.md +++ b/files/en-us/web/api/file/index.md @@ -17,7 +17,7 @@ A `File` object is a specific kind of {{DOMxRef("Blob")}}, and can be used in an - {{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}} - {{DOMxRef("Window.createImageBitmap()")}} and {{DOMxRef("WorkerGlobalScope.createImageBitmap()")}} - the [`body`](/en-US/docs/Web/API/RequestInit#body) option to {{domxref("Window/fetch", "fetch()")}} -- {{DOMxRef("XMLHttpRequest.send()")}} . +- {{DOMxRef("XMLHttpRequest.send()")}} See [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications) for more information and examples. From 4bea2a2c058623339730f304ba40cba63ba381dd Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 2 Oct 2024 22:11:48 +0800 Subject: [PATCH 06/94] Update Specifications section for `InstallEvent` constructor (#36088) add --- files/en-us/web/api/installevent/installevent/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/installevent/installevent/index.md b/files/en-us/web/api/installevent/installevent/index.md index 49433a15d79c469..f045671dfe305ce 100644 --- a/files/en-us/web/api/installevent/installevent/index.md +++ b/files/en-us/web/api/installevent/installevent/index.md @@ -33,7 +33,7 @@ A new {{domxref("InstallEvent")}} object. ## Specifications -_This feature is no more on the standard track._ +{{Specifications}} ## Browser compatibility From 4889523eadd4e07969b4e43965d746a03764bfe9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 2 Oct 2024 14:34:46 +0000 Subject: [PATCH 07/94] Bump @mdn/yari from 2.64.0 to 2.64.1 (#36163) --- package.json | 2 +- yarn.lock | 72 ++++++++++++++++++++++++++-------------------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 8ef6989c6bab23e..d4396209be73131 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", "@caporal/core": "^2.0.7", - "@mdn/yari": "2.64.0", + "@mdn/yari": "2.64.1", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "async": "^3.2.6", diff --git a/yarn.lock b/yarn.lock index ade97353dac3a76..286d13ff53db392 100644 --- a/yarn.lock +++ b/yarn.lock @@ -913,15 +913,15 @@ resolved "https://registry.yarnpkg.com/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.7.tgz#555e80c33df520df068943e6b18ebc07f0e24d19" integrity sha512-IHkkypEjlIkBkx4mJ2//Xbzog9M/Lzne1Sl8db2cIHJ/5pe3NCqSLwSchmqzcUN+/WJr/U+V3tNAbWunk2xZcA== -"@mdn/browser-compat-data@^5.6.2": - version "5.6.3" - resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.3.tgz#34d3448ec09677edba539fbaff6433e2df5a1a34" - integrity sha512-HOTfnXR2GmEtpriwCa689EYySqfVAwhzjQ4PzY3K3QN1g9z7/o8yYUjXxAHvTuVa2qU7EjlXmuZ0I3xYOmG0yg== +"@mdn/browser-compat-data@^5.6.4": + version "5.6.4" + resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.4.tgz#8d29e089ddce23278a10c20760c7a93ad37e55f5" + integrity sha512-bOOF4GGzn0exmvNHpSWmTfOXB9beTpIFCm2KPY2UVoCdn1YVfr8heuHr1C++BYI9Tun8REgi5TNVdKbBs249CA== -"@mdn/yari@2.64.0": - version "2.64.0" - resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.64.0.tgz#5cbd4cf8fac1eff9b627ac9d2816318e535cf7e0" - integrity sha512-MWGfKAzQ9qggvMBH5Ob61GeiHQVUKOZ6tQObyjKhz7u0mbyNxwdk7dEXoA+FpO1/d883/+rs07zYwJ/pElHqCA== +"@mdn/yari@2.64.1": + version "2.64.1" + resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.64.1.tgz#623ab55e2b272537f426e4a4e377f993cb68b7b9" + integrity sha512-5vhbfMXX8eax18zeMbo/M7e9SO9k3D6+4Q6pV5vz1o3casDXGatxVjBg5JZNZ+YJitkSQolh1CyVgJBWP0oCSw== dependencies: "@caporal/core" "^2.0.7" "@codemirror/lang-css" "^6.3.0" @@ -932,13 +932,13 @@ "@fast-csv/parse" "^5.0.0" "@lit/react" "^1.0.5" "@mdn/bcd-utils-api" "^0.0.7" - "@mdn/browser-compat-data" "^5.6.2" + "@mdn/browser-compat-data" "^5.6.4" "@mozilla/glean" "5.0.3" "@sentry/node" "^8.32.0" - "@stripe/stripe-js" "^4.5.0" + "@stripe/stripe-js" "^4.6.0" "@use-it/interval" "^1.0.0" "@vscode/ripgrep" "^1.15.9" - "@webref/css" "^6.15.2" + "@webref/css" "^6.16.0" accept-language-parser "^1.5.0" async "^3.2.6" chalk "^5.3.0" @@ -955,7 +955,7 @@ dotenv "^16.4.5" ejs "^3.1.10" express "^4.21.0" - fdir "^6.3.0" + fdir "^6.4.0" feed "^4.2.2" file-type "^19.5.0" front-matter "^4.0.2" @@ -981,7 +981,7 @@ mdn-data "^2.11.1" open "^10.1.0" open-editor "^5.0.0" - openai "^4.63.0" + openai "^4.67.0" pg "^8.13.0" pgvector "^0.2.0" prism-svelte "^0.5.0" @@ -990,11 +990,11 @@ react-modal "^3.16.1" read-chunk "^5.0.0" rehype-format "^5.0.1" - rehype-parse "^9.0.0" + rehype-parse "^9.0.1" rehype-raw "^7.0.0" rehype-remark "^10.0.0" rehype-sanitize "^6.0.0" - rehype-stringify "^10.0.0" + rehype-stringify "^10.0.1" remark-gfm "^4.0.0" remark-parse "^11.0.0" remark-rehype "^11.1.1" @@ -1447,10 +1447,10 @@ dependencies: "@sinonjs/commons" "^3.0.0" -"@stripe/stripe-js@^4.5.0": - version "4.5.0" - resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.5.0.tgz#0beda9beefc05143ef6955d7bb7960064aecc53c" - integrity sha512-dMOzc58AOlsF20nYM/avzV8RFhO/vgYTY7ajLMH6mjlnZysnOHZxsECQvjEmL8Q/ukPwHkOnxSPW/QGCCnp7XA== +"@stripe/stripe-js@^4.6.0": + version "4.6.0" + resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.6.0.tgz#ad2c702d71360f3f9c22051b72a9e8e686451f4e" + integrity sha512-ZoK0dMFnVH0J5XUWGqsta8S8xm980qEwJKAIgZcLQxaSsbGRB9CsVvfOjwQFE1JC1q3rPwb/b+gQAmzIESnHnA== "@szmarczak/http-timer@^5.0.1": version "5.0.1" @@ -1747,10 +1747,10 @@ proxy-from-env "^1.1.0" yauzl "^2.9.2" -"@webref/css@^6.15.2": - version "6.15.2" - resolved "https://registry.yarnpkg.com/@webref/css/-/css-6.15.2.tgz#2ab55bad6977b2498565c285b9935958edb2e1f7" - integrity sha512-Y1UOqVPU4vVWi5DLEauYOZXGbaP8oJbZ0/SFKticz4e79uOsZFz8wuAPb0Ys6/2D5dJ2v6Gq6XFx0wC5LwSeMQ== +"@webref/css@^6.16.0": + version "6.16.0" + resolved "https://registry.yarnpkg.com/@webref/css/-/css-6.16.0.tgz#37ffbff3e942147431e2c2253c39aa64b7f0d94f" + integrity sha512-o2Qe3LvuR5Oyv4gnw3MQ/+XdOF72YQfKlUysL9SZLXAQyc1hsXO4wTdaayz6Z788UDo5yUxp0E9RwTmU/xqZ0Q== abort-controller@^3.0.0: version "3.0.0" @@ -3554,7 +3554,7 @@ fd-slicer@~1.1.0: dependencies: pend "~1.2.0" -fdir@^6.3.0, fdir@^6.4.0: +fdir@^6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.0.tgz#8e80ab4b18a2ac24beebf9d20d71e1bc2627dbae" integrity sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ== @@ -6526,10 +6526,10 @@ open@^10.1.0: is-inside-container "^1.0.0" is-wsl "^3.1.0" -openai@^4.63.0: - version "4.63.0" - resolved "https://registry.yarnpkg.com/openai/-/openai-4.63.0.tgz#cabe7223788157c96c818317cc361386807157f7" - integrity sha512-Y9V4KODbmrOpqiOmCDVnPfMxMqKLOx8Hwcdn/r8mePq4yv7FSXGnxCs8/jZKO7zCB/IVPWihpJXwJNAIOEiZ2g== +openai@^4.67.0: + version "4.67.0" + resolved "https://registry.yarnpkg.com/openai/-/openai-4.67.0.tgz#94f46fc2e98445fab8b70d62fc684a6b6680402e" + integrity sha512-jdsPSEdZbUNVtvEFE/eeL4FjKavyVMJJEdGMZk9vExglqUrblEcFxi3LK2WhskhrYKAU1MgJAI+dK9pDcA5z5w== dependencies: "@types/node" "^18.11.18" "@types/node-fetch" "^2.6.4" @@ -7216,10 +7216,10 @@ rehype-minify-whitespace@^6.0.0: hast-util-whitespace "^3.0.0" unist-util-is "^6.0.0" -rehype-parse@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-9.0.0.tgz#3949faeec6f466ec57774215661e0d75469195d9" - integrity sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw== +rehype-parse@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-9.0.1.tgz#9993bda129acc64c417a9d3654a7be38b2a94c20" + integrity sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag== dependencies: "@types/hast" "^3.0.0" hast-util-from-html "^2.0.0" @@ -7253,10 +7253,10 @@ rehype-sanitize@^6.0.0: "@types/hast" "^3.0.0" hast-util-sanitize "^5.0.0" -rehype-stringify@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-10.0.0.tgz#2031cf6fdd0355393706f0474ec794c75e5492f2" - integrity sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ== +rehype-stringify@^10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-10.0.1.tgz#2ec1ebc56c6aba07905d3b4470bdf0f684f30b75" + integrity sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA== dependencies: "@types/hast" "^3.0.0" hast-util-to-html "^9.0.0" From d27be65a297aa82a1eceb024be325b1385a498e5 Mon Sep 17 00:00:00 2001 From: Richard Lau Date: Wed, 2 Oct 2024 15:44:31 +0100 Subject: [PATCH 08/94] Fix Firefox version in 131 release notes (#36154) Refs: https://github.com/mdn/content/pull/36150 --- files/en-us/mozilla/firefox/releases/131/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/131/index.md b/files/en-us/mozilla/firefox/releases/131/index.md index 11b22fc0f00e3cd..56c86d9cea02db6 100644 --- a/files/en-us/mozilla/firefox/releases/131/index.md +++ b/files/en-us/mozilla/firefox/releases/131/index.md @@ -6,7 +6,7 @@ page-type: firefox-release-notes {{FirefoxSidebar}} -This article provides information about the changes in Firefox 131 that affect developers. Firefox 130 was released on [October 1, 2024](https://whattrainisitnow.com/release/?version=131). +This article provides information about the changes in Firefox 131 that affect developers. Firefox 131 was released on [October 1, 2024](https://whattrainisitnow.com/release/?version=131). ## Changes for web developers From 570e162fda8d1775feecb73198d9e12917b3e72c Mon Sep 17 00:00:00 2001 From: Ragul <67683723+ragul1697@users.noreply.github.com> Date: Wed, 2 Oct 2024 21:00:58 +0530 Subject: [PATCH 09/94] Remove obsolete displaySurface value (#36162) --- files/en-us/web/api/mediatracksettings/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/files/en-us/web/api/mediatracksettings/index.md b/files/en-us/web/api/mediatracksettings/index.md index 6d3b90ed8c1363c..757f8d7e479c2a7 100644 --- a/files/en-us/web/api/mediatracksettings/index.md +++ b/files/en-us/web/api/mediatracksettings/index.md @@ -94,8 +94,6 @@ Tracks containing video shared from a user's screen (regardless of whether the s - : A string which specifies the type of source the track contains; one of: - - `application` - - : The stream contains all of the windows of the application chosen by the user rendered into the one video track. - `browser` - : The stream contains the contents of a single browser tab selected by the user. - `monitor` From b69f6d3868968573e8f93b361fa266a5713563f6 Mon Sep 17 00:00:00 2001 From: Gagan Bhullar Date: Wed, 2 Oct 2024 11:13:30 -0600 Subject: [PATCH 10/94] incorrect description remove getFloatFrequencyData (#36164) incorrect description remove --- files/en-us/web/api/analysernode/getfloatfrequencydata/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md b/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md index cede74d1b2b7ffb..555a52d01e33350 100644 --- a/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md @@ -8,7 +8,7 @@ browser-compat: api.AnalyserNode.getFloatFrequencyData {{ APIRef("Web Audio API") }} -The **`getFloatFrequencyData()`** method of the {{domxref("AnalyserNode")}} Interface copies the current frequency data into a {{jsxref("Float32Array")}} array passed into it. Each array value is a _sample_, the magnitude of the signal at a particular time. +The **`getFloatFrequencyData()`** method of the {{domxref("AnalyserNode")}} Interface copies the current frequency data into a {{jsxref("Float32Array")}} array passed into it. Each item in the array represents the decibel value for a specific frequency. The frequencies are spread linearly from 0 to 1/2 of the sample rate. For example, for a `48000` Hz sample rate, the last item of the array will represent the decibel value for `24000` Hz. From 1c0dda60cb2b680a753264b538e2c46776ecd837 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 2 Oct 2024 13:31:02 -0400 Subject: [PATCH 11/94] Fix content issues (#36165) --- .../tools_and_setup/available_text_editors/index.md | 2 +- .../tools_and_setup/how_much_does_it_cost/index.md | 2 +- .../webextensions/api/notifications/onclosed/index.md | 2 +- files/en-us/web/api/htmloptionelement/label/index.md | 1 - files/en-us/web/api/htmloptionscollection/remove/index.md | 5 ++--- files/en-us/web/http/index.md | 2 +- 6 files changed, 6 insertions(+), 8 deletions(-) diff --git a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md index e126e9834669516..5706a492ca29c8d 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md @@ -246,7 +246,7 @@ Here are some popular editors: > - Official,Official, Unofficial { diff --git a/files/en-us/web/api/htmloptionelement/label/index.md b/files/en-us/web/api/htmloptionelement/label/index.md index 298cec2a27c9f56..48a5d127ed8a846 100644 --- a/files/en-us/web/api/htmloptionelement/label/index.md +++ b/files/en-us/web/api/htmloptionelement/label/index.md @@ -35,7 +35,6 @@ optionElement.label = "Updated label"; ## See also - {{domxref("HTMLOptionElement.value")}} -- {{domxref("HTMLOptionElement.label")}} - {{HTMLElement("select")}} - {{HTMLElement("datalist")}} - {{HTMLElement("optgroup")}} diff --git a/files/en-us/web/api/htmloptionscollection/remove/index.md b/files/en-us/web/api/htmloptionscollection/remove/index.md index 68f9a06327ccae2..15967772e9279c7 100644 --- a/files/en-us/web/api/htmloptionscollection/remove/index.md +++ b/files/en-us/web/api/htmloptionscollection/remove/index.md @@ -44,9 +44,8 @@ optionList.remove(0); // removes the first item ## See also -- {{DOMxRef("HTMLOptionsCollection.add")}} +- {{DOMxRef("HTMLOptionsCollection.add()")}} - {{DOMxRef("HTMLOptionsCollection.length")}} - {{DOMxRef("HTMLOptionsCollection.selectedIndex")}} -- {{domxref("HTMLOptionsCollection") }} -- {{domxref("HTMLOptionsCollection.remove()")}} +- {{domxref("HTMLOptionsCollection")}} - {{domxref("Element.remove")}} diff --git a/files/en-us/web/http/index.md b/files/en-us/web/http/index.md index 5b383c28dc2d2f1..a4b226900163107 100644 --- a/files/en-us/web/http/index.md +++ b/files/en-us/web/http/index.md @@ -47,7 +47,7 @@ Beginners are encouraged to start with the foundational guides before exploring - [MIME types](/en-US/docs/Web/HTTP/MIME_types) - : Since HTTP/1.0, different types of content can be transmitted. This article explains how this is accomplished using the {{HTTPHeader("Content-Type")}} header and the MIME standard. - A shortlist of common types used by web developers can be found in [Common MIME types](Web/HTTP/MIME_types/Common_types). + A shortlist of common types used by web developers can be found in [Common MIME types](/en-US/docs/Web/HTTP/MIME_types/Common_types). - [Compression in HTTP](/en-US/docs/Web/HTTP/Compression) - : Browsers and servers compress their messages before sending them over the network to reduce the amount of data that needs to be transmitted, improving transfer speed and bandwidth utilization. - [HTTP caching](/en-US/docs/Web/HTTP/Caching) From 4d01b5ffbaac2c8dd568e6382e4aaca66af7f66d Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 2 Oct 2024 13:58:52 -0400 Subject: [PATCH 12/94] docs(manifest): Improvements to `background_color` page (#36085) * update background_color update background_color * update theme_color * minor edit --- .../web/manifest/background_color/index.md | 71 +++++++++++++++++-- files/en-us/web/manifest/theme_color/index.md | 17 +++-- 2 files changed, 77 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/manifest/background_color/index.md b/files/en-us/web/manifest/background_color/index.md index 573ba05871541b5..ce4e4c0863c9e53 100644 --- a/files/en-us/web/manifest/background_color/index.md +++ b/files/en-us/web/manifest/background_color/index.md @@ -7,19 +7,74 @@ browser-compat: html.manifest.background_color {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} -The `background_color` member defines a placeholder background color for the application page to display before its stylesheet is loaded. +The `background_color` manifest member is used to specify an initial background color for your web application. +This color appears in the application window before your application's stylesheets have loaded. -This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded. +## Syntax -Therefore `background_color` should match the {{cssxref("background-color")}} CSS property in the site's stylesheet for a smooth transition between launching the web application and loading the site's content. +```json-nolint +/* Using named color */ +"background_color": "aliceblue" + +/* Using hexadecimal value */ +"background_color": "#f0fbff + +/* Using RGB value */ +"background_color": "rgb(240 248 255)" +``` + +### Values + +- `background_color` + + - : A string that specifies a valid [color value](/en-US/docs/Web/CSS/color_value). + +## Description + +The `background_color` member serves the following purposes: + +- Provides a smooth visual transition from the app's initial launch to its fully loaded state. +- Improves user experience while the app files are loading over the network or being accessed from storage media. +- Contributes to the appearance of the splash screen in some browsers and operating systems when an installed progressive web app (PWA) is launched. + +It is recommended that the color value you specify for the `background_color` manifest member matches the {{cssxref("background-color")}} property value in your app's stylesheet. +This will ensure visual consistency between the initial display (including the splash screen, where applicable) and the fully loaded application. +By aligning these colors, you can create a more polished and seamless experience for your users. + +After an app has loaded, the `background-color` in the stylesheet takes precedence. +The manifest's `background_color` is used only as a temporary measure during the initial loading phase and for generating splash screens in some environments. > [!NOTE] -> The `background_color` member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the {{cssxref("background-color")}} CSS property when the progressive web app stylesheet is available. +> Browsers may override the `background_color` manifest value to support any [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query defined in your app's CSS. ## Examples +### Setting a consistent background color for your app + +Imagine you're building a weather app, and the background color in your app's stylesheet is set as shown below: + +```css +body { + background-color: #87ceeb; +} +``` + +To ensure your users see a consistent background color from launch to full load of your app, you would set the same background color in your app's manifest file like so: + ```json -"background_color": "red" +{ + "name": "WeatherPro", + "display": "standalone", + "background_color": "#87ceeb", + "theme_color": "#4682b4", + "icons": [ + { + "src": "icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] +} ``` ## Specifications @@ -29,3 +84,9 @@ Therefore `background_color` should match the {{cssxref("background-color")}} CS ## Browser compatibility {{Compat}} + +## See also + +- [`display`](/en-US/docs/Web/Manifest/display) manifest member +- [`theme_color`](/en-US/docs/Web/Manifest/theme_color) manifest member +- [Customize your app's theme and background colors](/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors) when building PWAs diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index d749fe4ee22454d..48abb4dde986c0a 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -7,25 +7,28 @@ browser-compat: html.manifest.theme_color {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} -The `theme_color` member specifies the default color for your web application's user interface. +The `theme_color` member is used to specify the default color for your web application's user interface. This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen. -This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. - ## Syntax ```json-nolint -/* Valid color value */ +/* Valid named color */ "theme_color": "rebeccapurple" -"theme_color": "#4285f4" + +/* Using hexadecimal value */ +"theme_color": "#42b5f4" + +/* Using RGB value */ +"theme_color": "rgb(66 133 244)" ``` ### Values - `theme_color` - - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). + - : A string that specifies a valid [color value](/en-US/docs/Web/CSS/color_value). > [!NOTE] > Browsers may ignore the alpha component of the color based on the context. @@ -35,6 +38,7 @@ This color application can provide a more native app-like experience for your we ## Description While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas. +This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. Choose a `theme_color` that aligns with your app's brand guidelines, as this can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied. @@ -120,3 +124,4 @@ body { - [`display`](/en-US/docs/Web/Manifest/display) manifest member - [`background_color`](/en-US/docs/Web/Manifest/background_color) manifest member - [`scope`](/en-US/docs/Web/Manifest/scope) manifest member +- [Customize your app's theme and background colors](/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors) when building PWAs From 288fb73a50817abfd794eec9454b3c062b5d48ca Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 2 Oct 2024 17:43:12 -0400 Subject: [PATCH 13/94] Fix DL (#36086) * Fix DL * Update index.md --- .../intl/numberformat/numberformat/index.md | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.md b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.md index 3c9c85c560f90f1..d3ea989419323d2 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.md @@ -96,21 +96,13 @@ The following properties are also supported by {{jsxref("Intl.PluralRules")}}. - `minimumIntegerDigits` - : The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`; the default is `1`. - `minimumFractionDigits` - - : The minimum number of fraction digits to use. Possible values are from `0` to `100`; the default for plain number and percent formatting is `0`; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (2 if the list doesn't provide that information). + - : The minimum number of fraction digits to use. Possible values are from `0` to `100`; the default for plain number and percent formatting is `0`; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (2 if the list doesn't provide that information). See [SignificantDigits/FractionDigits default values](#significantdigitsfractiondigits_default_values) for when this default gets applied. - `maximumFractionDigits` - - : The maximum number of fraction digits to use. Possible values are from `0` to `100`; the default for plain number formatting is the larger of `minimumFractionDigits` and `3`; the default for currency formatting is the larger of `minimumFractionDigits` and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (2 if the list doesn't provide that information); the default for percent formatting is the larger of `minimumFractionDigits` and 0. + - : The maximum number of fraction digits to use. Possible values are from `0` to `100`; the default for plain number formatting is the larger of `minimumFractionDigits` and `3`; the default for currency formatting is the larger of `minimumFractionDigits` and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (2 if the list doesn't provide that information); the default for percent formatting is the larger of `minimumFractionDigits` and 0. See [SignificantDigits/FractionDigits default values](#significantdigitsfractiondigits_default_values) for when this default gets applied. - `minimumSignificantDigits` - - : The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. + - : The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. See [SignificantDigits/FractionDigits default values](#significantdigitsfractiondigits_default_values) for when this default gets applied. - `maximumSignificantDigits` - - : The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. - -For the four options above (the `FractionDigits` and `SignificantDigits` options), we mentioned their defaults; however, these defaults are _not unconditionally applied_. They are only applied when the property is actually going to be used, which depends on the [`roundingPriority`](#roundingpriority) and [`notation`](#notation) settings. Specifically: - -- If `roundingPriority` is not `"auto"`, then all four options apply. -- If `roundingPriority` is `"auto"` and at least one `SignificantDigits` option is set, then the `SignificantDigits` options apply and the `FractionDigits` options are ignored. -- If `roundingPriority` is `"auto"`, and either at least one `FractionDigits` option is set or `notation` is not `"compact"`, then the `FractionDigits` options apply and the `SignificantDigits` options are ignored. -- If `roundingPriority` is `"auto"`, `notation` is `"compact"`, and none of the four options are set, then they are set to `{ minimumFractionDigits: 0, maximumFractionDigits: 0, minimumSignificantDigits: 1, maximumSignificantDigits: 2 }`, regardless of the defaults mentioned above, and `roundingPriority` is set to `"morePrecision"`. - + - : The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. See [SignificantDigits/FractionDigits default values](#significantdigitsfractiondigits_default_values) for when this default gets applied. - `roundingPriority` - : Specify how rounding conflicts will be resolved if both "FractionDigits" ([`minimumFractionDigits`](#minimumfractiondigits)/[`maximumFractionDigits`](#maximumfractiondigits)) and "SignificantDigits" ([`minimumSignificantDigits`](#minimumsignificantdigits)/[`maximumSignificantDigits`](#maximumsignificantdigits)) are specified. @@ -164,6 +156,15 @@ For the four options above (the `FractionDigits` and `SignificantDigits` options - `"stripIfInteger"` - : Remove the fraction digits _if_ they are all zero. This is the same as `"auto"` if any of the fraction digits is non-zero. +##### SignificantDigits/FractionDigits default values + +For the four options above (the `FractionDigits` and `SignificantDigits` options), we mentioned their defaults; however, these defaults are _not unconditionally applied_. They are only applied when the property is actually going to be used, which depends on the [`roundingPriority`](#roundingpriority) and [`notation`](#notation) settings. Specifically: + +- If `roundingPriority` is not `"auto"`, then all four options apply. +- If `roundingPriority` is `"auto"` and at least one `SignificantDigits` option is set, then the `SignificantDigits` options apply and the `FractionDigits` options are ignored. +- If `roundingPriority` is `"auto"`, and either at least one `FractionDigits` option is set or `notation` is not `"compact"`, then the `FractionDigits` options apply and the `SignificantDigits` options are ignored. +- If `roundingPriority` is `"auto"`, `notation` is `"compact"`, and none of the four options are set, then they are set to `{ minimumFractionDigits: 0, maximumFractionDigits: 0, minimumSignificantDigits: 1, maximumSignificantDigits: 2 }`, regardless of the defaults mentioned above, and `roundingPriority` is set to `"morePrecision"`. + #### Other options - `notation` From a0835f752a97d1c4d738639f562db9d8e7551a1e Mon Sep 17 00:00:00 2001 From: Daniel Jacobs Date: Wed, 2 Oct 2024 19:07:50 -0400 Subject: [PATCH 14/94] Add new declarativeNetRequest RuleConditions (#35649) * Add new declarativeNetRequest RuleConditions * Make suggested changes to page about declarativeNetRequest HeaderInfo --- .../declarativenetrequest/headerinfo/index.md | 68 +++++++++++++++++++ .../rulecondition/index.md | 4 ++ 2 files changed, 72 insertions(+) create mode 100644 files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/headerinfo/index.md diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/headerinfo/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/headerinfo/index.md new file mode 100644 index 000000000000000..e00e70cace372cd --- /dev/null +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/headerinfo/index.md @@ -0,0 +1,68 @@ +--- +title: declarativeNetRequest.HeaderInfo +slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/HeaderInfo +page-type: webextension-api-type +browser-compat: + - webextensions.api.declarativeNetRequest.RuleCondition.responseHeaders + - webextensions.api.declarativeNetRequest.RuleCondition.excludedResponseHeaders +--- + +{{AddonSidebar}} + +The response header to match for the request, declared in the {{WebExtAPIRef("declarativeNetRequest.RuleCondition", "rule.condition")}}`.excludedResponseHeaders` array or {{WebExtAPIRef("declarativeNetRequest.RuleCondition", "rule.condition")}}`.responseHeaders` array. If specified, the array must be non-empty. + +When used in the condition responseHeaders, the rule matches if the request matches this response header condition. When used in the condition excludedResponseHeaders, the rule does not match if the request matches this response header condition. + +Each object describes one header to match or exclude. To check multiple headers, multiple objects can be specified in these arrays, or across multiple rules. + +> [!NOTE] Matching by headers is a relatively new feature. Make sure to feature-detect its availability before relying on it. While some browsers ignore the complete rule when an unrecognized condition is present, Chrome 121 until 127 applied the whole rule while ignoring the `responseHeaders` condition. This could result in matching more requests than intended, see [Chromium issue 347186592](https://issues.chromium.org/issues/347186592). + +## Type + +Values of this type are objects. They contain these properties: + +- `header` + - : A `string`. The name of the header. This condition matches on the name only if both values and excludedValues are not specified. +- `values` {{optional_inline}} + - : An array of `string`. If specified, this condition matches if the header's value matches at least one pattern in this list. This supports case-insensitive header value matching plus the following constructs: + - `'*'` : Matches any number of characters. + - `'?'` : Matches zero or one character(s). + - `'*'` and `'?'` can be escaped with a backslash, e.g. `'\*'` and `'\?'`. +- `excludedValues` {{optional_inline}} + - : An array of `string`. If specified, this condition is not matched if the header exists but its value contains at least one element in this list. This uses the same glob pattern syntax as `values`. If `values` and `excludedValues` are both matched, then `excludedValues` takes precedence. + +{{WebExtExamples("h2")}} + +## Browser compatibility + +{{Compat}} + + diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md index 44b738992f06a82..3d0a334da13959f 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md @@ -42,6 +42,10 @@ Values of this type are objects. They contain these properties: - : An array of {{WebExtAPIRef("declarativeNetRequest.ResourceType")}}. List of resource types that the rule matches with. An empty list is not allowed. This must be specified for `"allowAllRequests"` rules and may only include the `"sub_frame"` and `"main_frame"` resource types. - `excludedResourceTypes` {{optional_inline}} - : An array of {{WebExtAPIRef("declarativeNetRequest.ResourceType")}}. List of resource types that the rule does not match on. Only one of [`resourceTypes`](#resourcetypes) and `excludedResourceTypes` should be specified. If neither of them is specified, all resource types except `"main_frame"` are blocked. +- `responseHeaders` {{optional_inline}} + - : An array of {{WebExtAPIRef("declarativeNetRequest.HeaderInfo")}}. The rule matches if the request matches any response header condition in this list (if specified). +- `excludedResponseHeaders` {{optional_inline}} + - : An array of {{WebExtAPIRef("declarativeNetRequest.HeaderInfo")}}. The rule does not match if the request matches any response header condition in this list (if specified). If both `excludedResponseHeaders` and `responseHeaders` are specified, then the `excludedResponseHeaders` property takes precedence. - `tabIds` {{optional_inline}} - : An array of `number`. List of {{WebExtAPIRef("tabs.Tab")}}.`id` that the rule should match. An ID of {{WebExtAPIRef("tabs.TAB_ID_NONE")}} matches requests that don't originate from a tab. An empty list is not allowed. Only supported for session-scoped rules. - `excludedTabIds` {{optional_inline}} From 0a0661cb9a59f853d9cc97e9f3821e707993fa77 Mon Sep 17 00:00:00 2001 From: togamid <54776413+togamid@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:25:27 +0200 Subject: [PATCH 15/94] Fix descrition of the response of the client_metadata_endpoint (#36080) Fix descrition of content of the response of the client_metadata_endpoint According to https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API/IDP_integration#the_client_metadata_endpoint and https://developers.google.com/privacy-sandbox/cookies/fedcm-developer-guide , the the_client_metadata_endpoint returns links to information about the RP and not the IdP --- files/en-us/web/api/fedcm_api/rp_sign-in/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md index bb25fba174bb8e7..e29a37f328502e3 100644 --- a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md +++ b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md @@ -82,7 +82,7 @@ The flow is as follows: 5. The IdP responds with the account information requested from the `accounts_endpoint`. This is an array of all accounts associated with the user's IdP cookies for any RPs associated with the IdP. -6. {{optional_inline}} If included in the IdP config file, the browser makes an uncredentialed request to the [`client_metadata_endpoint`](/en-US/docs/Web/API/FedCM_API/IDP_integration#the_client_metadata_endpoint) for the location of the IdP terms of service and privacy policy pages. This is a `GET` request sent with the `clientId` passed into the `get()` call as a parameter, without cookies. +6. {{optional_inline}} If included in the IdP config file, the browser makes an uncredentialed request to the [`client_metadata_endpoint`](/en-US/docs/Web/API/FedCM_API/IDP_integration#the_client_metadata_endpoint) for the location of the RP terms of service and privacy policy pages. This is a `GET` request sent with the `clientId` passed into the `get()` call as a parameter, without cookies. 7. {{optional_inline}} The IdP responds with the URLs requested from the `client_metadata_endpoint`. From 6753e2b76ca411e526b1950eaa43272cfca682dc Mon Sep 17 00:00:00 2001 From: Ragul <67683723+ragul1697@users.noreply.github.com> Date: Thu, 3 Oct 2024 20:38:34 +0530 Subject: [PATCH 16/94] Fix hasFeature() return value (#36176) --- files/en-us/web/api/domimplementation/hasfeature/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/domimplementation/hasfeature/index.md b/files/en-us/web/api/domimplementation/hasfeature/index.md index 55dc4f04ac9c0a6..6c0b48e7cbf361a 100644 --- a/files/en-us/web/api/domimplementation/hasfeature/index.md +++ b/files/en-us/web/api/domimplementation/hasfeature/index.md @@ -35,7 +35,7 @@ hasFeature(feature, version) ### Return value -None ({{jsxref("undefined")}}). +A boolean value of `true`. ## Specifications From c64af85d9c01249890fbc70d7b9dbcf5f7043a2b Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 3 Oct 2024 14:24:19 -0400 Subject: [PATCH 17/94] Explain OES_standard_derivatives functions (#35710) * Explain OES_standard_derivatives functions * Update index.md --------- Co-authored-by: wbamberg --- .../web/api/oes_standard_derivatives/index.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/oes_standard_derivatives/index.md b/files/en-us/web/api/oes_standard_derivatives/index.md index 06e563fbff0243e..789ec99693d7778 100644 --- a/files/en-us/web/api/oes_standard_derivatives/index.md +++ b/files/en-us/web/api/oes_standard_derivatives/index.md @@ -27,11 +27,20 @@ This extension exposes one new constant, which can be used in the {{domxref("Web The following new functions can be used in GLSL shader code, if this extension is enabled: ```cpp -genType dFdx(genType) -genType dFdy(genType) -genType fwidth(genType) +genType dFdx(genType p) +genType dFdy(genType p) +genType fwidth(genType p) ``` +- `dFdx()` + - : Returns the derivative in `x` using local differencing for the input argument `p`. +- `dFdy()` + - : Returns the derivative in `y` using local differencing for the input argument `p`. +- `fwidth()` + - : Returns the sum of the absolute derivative in `x` and `y` using local differencing for the input argument `p`. That is, `abs(dFdx(p)) + abs(dFdy(p))`. + +`dFdx()` and `dFdy()` are commonly used to estimate the filter width used to anti-alias procedural textures. + ## Examples Enabling the extensions: From b6752fdac6d0418f8ad6e074c4c6b94c69c7ec38 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 3 Oct 2024 16:27:10 -0700 Subject: [PATCH 18/94] @media: add name of data types (#36171) * @media: add name of data types * Update index.md * Apply suggestions from code review Co-authored-by: Chris Mills --------- Co-authored-by: Chris Mills --- files/en-us/web/css/@media/index.md | 32 +++++++++++------------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md index 6bd039dc80fe07f..96d82292f6f65d4 100644 --- a/files/en-us/web/css/@media/index.md +++ b/files/en-us/web/css/@media/index.md @@ -40,9 +40,11 @@ For a discussion of media query syntax, please see [Using media queries](/en-US/ ## Description +A media query's `` includes [``s](#media_types), [`s`](#media_features), and [logical operators](#logical_operators). + ### Media types -_Media types_ describe the general category of a device. +A _``_ describes the general category of a device. Except when using the `only` logical operator, the media type is optional and the `all` type is implied. - `all` @@ -57,30 +59,25 @@ Except when using the `only` logical operator, the media type is optional and th ### Media features -_Media features_ describe specific characteristics of the {{glossary("user agent")}}, output device, or environment. -Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses. +A _``_ describes specific characteristics of the {{glossary("user agent")}}, output device, or environment. +Media feature expressions test for their presence, value, or range of values, and are entirely optional. Each media feature expression must be surrounded by parentheses. - {{cssxref("@media/any-hover", "any-hover")}} - : Does any available input mechanism allow the user to hover over elements? - Added in Media Queries Level 4. - {{cssxref("@media/any-pointer", "any-pointer")}} - : Is any available input mechanism a pointing device, and if so, how accurate is it? - Added in Media Queries Level 4. - {{cssxref("@media/aspect-ratio", "aspect-ratio")}} - - : Width-to-height {{glossary("aspect ratio")}} of the viewport + - : Width-to-height {{glossary("aspect ratio")}} of the viewport. - {{cssxref("@media/color", "color")}} - - : Number of bits per color component of the output device, or zero if the device isn't color + - : Number of bits per color component of the output device, or zero if the device isn't color. - {{cssxref("@media/color-gamut", "color-gamut")}} - : Approximate range of colors that are supported by the user agent and output device. - Added in Media Queries Level 4. - {{cssxref("@media/color-index", "color-index")}} - - : Number of entries in the output device's color lookup table, or zero if the device does not use such a table + - : Number of entries in the output device's color lookup table, or zero if the device does not use such a table. - {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} - - : Width-to-height aspect ratio of the output device. - Deprecated in Media Queries Level 4. + - : Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/device-height", "device-height")}} - - : Height of the rendering surface of the output device. - Deprecated in Media Queries Level 4. + - : Height of the rendering surface of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/device-width", "device-width")}} - : Width of the rendering surface of the output device. Deprecated in Media Queries Level 4. - {{cssxref("@media/display-mode", "display-mode")}} @@ -97,7 +94,6 @@ Media feature expressions test for their presence or value, and are entirely opt - : Height of the viewport. - {{cssxref("@media/hover", "hover")}} - : Does the primary input mechanism allow the user to hover over elements? - Added in Media Queries Level 4. - {{cssxref("@media/inverted-colors", "inverted-colors")}} - : Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5. @@ -107,13 +103,10 @@ Media feature expressions test for their presence or value, and are entirely opt - : Orientation of the viewport. - {{cssxref("@media/overflow-block", "overflow-block")}} - : How does the output device handle content that overflows the viewport along the block axis? - Added in Media Queries Level 4. - {{cssxref("@media/overflow-inline", "overflow-inline")}} - : Can content that overflows the viewport along the inline axis be scrolled? - Added in Media Queries Level 4. - {{cssxref("@media/pointer", "pointer")}} - : Is the primary input mechanism a pointing device, and if so, how accurate is it? - Added in Media Queries Level 4. - {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} - : Detect if the user prefers a light or dark color scheme. Added in Media Queries Level 5. @@ -138,7 +131,6 @@ Media feature expressions test for their presence or value, and are entirely opt - : Detects the shape of the device to distinguish rectangular and round displays. - {{cssxref("@media/update", "update")}} - : How frequently the output device can modify the appearance of content. - Added in Media Queries Level 4. - {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}} - : Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5. - {{cssxref("@media/width", "width")}} @@ -228,7 +220,7 @@ Because of this potential, a browser may opt to fudge the returned values in som } ``` -Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: +The range syntax allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: ```css @media (height > 600px) { @@ -258,6 +250,6 @@ For more examples, please see [Using media queries](/en-US/docs/Web/CSS/CSS_medi - [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) -- In JavaScript, `@media` can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}. +- {{domxref("CSSMediaRule")}} interface - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features) - [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features) From e1d2d6a3880d47638de6b5a54b58df92826ec58e Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 4 Oct 2024 08:34:17 +0800 Subject: [PATCH 19/94] Add {{AvailableInWorkers}} for Compute Pressure API (#36180) add --- files/en-us/web/api/pressureobserver/disconnect/index.md | 2 +- .../en-us/web/api/pressureobserver/knownsources_static/index.md | 2 +- files/en-us/web/api/pressureobserver/observe/index.md | 2 +- files/en-us/web/api/pressureobserver/pressureobserver/index.md | 2 +- files/en-us/web/api/pressureobserver/takerecords/index.md | 2 +- files/en-us/web/api/pressureobserver/unobserve/index.md | 2 +- files/en-us/web/api/pressurerecord/source/index.md | 2 +- files/en-us/web/api/pressurerecord/state/index.md | 2 +- files/en-us/web/api/pressurerecord/time/index.md | 2 +- files/en-us/web/api/pressurerecord/tojson/index.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/api/pressureobserver/disconnect/index.md b/files/en-us/web/api/pressureobserver/disconnect/index.md index c0dfa74521cf1c9..47e1bf79d3bb0d2 100644 --- a/files/en-us/web/api/pressureobserver/disconnect/index.md +++ b/files/en-us/web/api/pressureobserver/disconnect/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.disconnect --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`disconnect()`** method of the {{domxref('PressureObserver')}} interface stops the pressure observer callback from receiving pressure records from all sources. diff --git a/files/en-us/web/api/pressureobserver/knownsources_static/index.md b/files/en-us/web/api/pressureobserver/knownsources_static/index.md index 611ace579f0b723..6a923b5922803de 100644 --- a/files/en-us/web/api/pressureobserver/knownsources_static/index.md +++ b/files/en-us/web/api/pressureobserver/knownsources_static/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.knownSources_static --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The static **`knownSources`** read-only property of the {{domxref("PressureObserver")}} interface returns an array of the {{domxref("PressureRecord.source","source")}} values supported by the user agent in alphabetical order. diff --git a/files/en-us/web/api/pressureobserver/observe/index.md b/files/en-us/web/api/pressureobserver/observe/index.md index 974cdfe70df3d90..1bc90cce2b310ee 100644 --- a/files/en-us/web/api/pressureobserver/observe/index.md +++ b/files/en-us/web/api/pressureobserver/observe/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.observe --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`observe()`** method of the {{domxref("PressureObserver")}} interface tells the pressure observer to start observing pressure changes. After this method is called, the observer will call its callback function when a pressure record for the specified `source` is observed. diff --git a/files/en-us/web/api/pressureobserver/pressureobserver/index.md b/files/en-us/web/api/pressureobserver/pressureobserver/index.md index db0c76fabae464d..913973144ed6af2 100644 --- a/files/en-us/web/api/pressureobserver/pressureobserver/index.md +++ b/files/en-us/web/api/pressureobserver/pressureobserver/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.PressureObserver --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`PressureObserver()`** constructor creates a new {{domxref("PressureObserver")}} object to watch for changes to pressure changes of system resources such as the CPU. diff --git a/files/en-us/web/api/pressureobserver/takerecords/index.md b/files/en-us/web/api/pressureobserver/takerecords/index.md index 936974f881f3dd0..17a025e90df0550 100644 --- a/files/en-us/web/api/pressureobserver/takerecords/index.md +++ b/files/en-us/web/api/pressureobserver/takerecords/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.takeRecords --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`takeRecords()`** method of the {{domxref('PressureObserver')}} interface returns the current list of pressure records stored in the pressure observer, emptying it out. diff --git a/files/en-us/web/api/pressureobserver/unobserve/index.md b/files/en-us/web/api/pressureobserver/unobserve/index.md index 4377f17ecac250f..625226a262be381 100644 --- a/files/en-us/web/api/pressureobserver/unobserve/index.md +++ b/files/en-us/web/api/pressureobserver/unobserve/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureObserver.unobserve --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`unobserve()`** method of the {{domxref('PressureObserver')}} interface stops the pressure observer callback from receiving pressure records from the specified source. diff --git a/files/en-us/web/api/pressurerecord/source/index.md b/files/en-us/web/api/pressurerecord/source/index.md index f9bcb5d97532a5b..2086da7da28b0a5 100644 --- a/files/en-us/web/api/pressurerecord/source/index.md +++ b/files/en-us/web/api/pressurerecord/source/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureRecord.source --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The read-only **`source`** property is a string indicating the origin source from which the record is coming. diff --git a/files/en-us/web/api/pressurerecord/state/index.md b/files/en-us/web/api/pressurerecord/state/index.md index 5050f8a16a04a84..5b8a3e798a9eca9 100644 --- a/files/en-us/web/api/pressurerecord/state/index.md +++ b/files/en-us/web/api/pressurerecord/state/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureRecord.state --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The read-only **`state`** property is a string indicating the pressure state recorded. diff --git a/files/en-us/web/api/pressurerecord/time/index.md b/files/en-us/web/api/pressurerecord/time/index.md index 998a2b27bda4e3a..16a11e181d1dec8 100644 --- a/files/en-us/web/api/pressurerecord/time/index.md +++ b/files/en-us/web/api/pressurerecord/time/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureRecord.time --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The read-only **`time`** property returns the {{domxref("DOMHighResTimeStamp","timestamp", "", "no-code")}} recorded for a {{domxref("PressureRecord")}}. It corresponds to the time the data was obtained from the system relative to the [time origin of the global object](/en-US/docs/Web/API/Performance/timeOrigin) in which the {{domxref("PressureObserver")}} generated the notification. diff --git a/files/en-us/web/api/pressurerecord/tojson/index.md b/files/en-us/web/api/pressurerecord/tojson/index.md index 7be708ca6e56e74..b21db72bfd4c622 100644 --- a/files/en-us/web/api/pressurerecord/tojson/index.md +++ b/files/en-us/web/api/pressurerecord/tojson/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.PressureRecord.toJSON --- -{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{securecontext_header}} +{{APIRef("Compute Pressure API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_worker_except_service")}}{{securecontext_header}} The **`toJSON()`** method is a {{Glossary("Serialization","serializer")}}; it returns a JSON representation of the {{domxref("PressureRecord")}} object. From be48127d1f16af543287cbc54a9d4c6834ce1e30 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Thu, 3 Oct 2024 17:38:50 -0700 Subject: [PATCH 20/94] Correct CSP source values (#35947) * Correct headers syntax descriptions * Correct headers syntax descriptions, the rest * Update some links * Update form-action * Reformat fetch directive syntax * Give a clue about what source expressions are like * Mention 'none' in source values page * clarify --- .../content_security_policy/index.md | 2 +- .../content-security-policy/base-uri/index.md | 20 +++++--- .../child-src/index.md | 16 +++--- .../connect-src/index.md | 30 +++++------ .../default-src/index.md | 16 +++--- .../content-security-policy/font-src/index.md | 16 +++--- .../form-action/index.md | 20 +++++--- .../frame-src/index.md | 16 +++--- .../content-security-policy/img-src/index.md | 16 +++--- .../headers/content-security-policy/index.md | 2 +- .../manifest-src/index.md | 16 +++--- .../media-src/index.md | 16 +++--- .../object-src/index.md | 16 +++--- .../prefetch-src/index.md | 16 +++--- .../script-src-attr/index.md | 22 ++++---- .../script-src-elem/index.md | 22 ++++---- .../script-src/index.md | 16 +++--- .../content-security-policy/sources/index.md | 50 ++++--------------- .../style-src-attr/index.md | 22 ++++---- .../style-src-elem/index.md | 22 ++++---- .../style-src/index.md | 16 +++--- .../worker-src/index.md | 16 +++--- 22 files changed, 211 insertions(+), 193 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md index 04b5a7f7716ac45..ea17687c2c766f3 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md @@ -65,7 +65,7 @@ In Manifest V2, a source for a script directive is considered secure if it meets - Remote sources must not use wildcards for any domains in the [public suffix list](https://publicsuffix.org/list/) (so `*.co.uk` and `*.blogspot.com` are not allowed, although `*.foo.blogspot.com` is permitted). - All sources must specify a host. - The only permitted schemes for sources are `blob:`, `filesystem:`, `moz-extension:`, `https:`, and `wss:`. -- The only permitted [keywords](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src#sources) are: `'none'`, `'self'`, `'unsafe-eval'`, and `'wasm-unsafe-eval'`. +- The only permitted [keywords](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources) are: `'none'`, `'self'`, `'unsafe-eval'`, and `'wasm-unsafe-eval'`. ## object-src directive diff --git a/files/en-us/web/http/headers/content-security-policy/base-uri/index.md b/files/en-us/web/http/headers/content-security-policy/base-uri/index.md index 9f8d49f0cc45307..4ed60863edfd126 100644 --- a/files/en-us/web/http/headers/content-security-policy/base-uri/index.md +++ b/files/en-us/web/http/headers/content-security-policy/base-uri/index.md @@ -28,16 +28,24 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} **`base-uri`** directive rest ## Syntax -One or more _sources_ can be allowed for the base-uri policy: - ```http -Content-Security-Policy: base-uri ; -Content-Security-Policy: base-uri ; +Content-Security-Policy: base-uri 'none'; +Content-Security-Policy: base-uri ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No base URI may be set using a `` element. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. A `` element may set a base URI if its value matches any of the given source expressions. + + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). However, only the following subset of those values apply to `base-uri`: -This directive uses the same [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources) syntax for arguments as other CSP directives. However, only values that match URLs make sense for `base-uri`, including ``, ``, `'self'`, and `'none'`. + - `` + - `` + - the keyword value `'self'`. ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/child-src/index.md b/files/en-us/web/http/headers/content-security-policy/child-src/index.md index cf3aa4c68c2b5ac..447a5c6640071cc 100644 --- a/files/en-us/web/http/headers/content-security-policy/child-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/child-src/index.md @@ -35,18 +35,20 @@ network errors by the user agent. ## Syntax -One or more sources can be allowed for the `child-src` policy: - ```http -Content-Security-Policy: child-src ; -Content-Security-Policy: child-src ; +Content-Security-Policy: child-src 'none'; +Content-Security-Policy: child-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/connect-src/index.md b/files/en-us/web/http/headers/content-security-policy/connect-src/index.md index 490b20280ed6620..fee392fdafeb62f 100644 --- a/files/en-us/web/http/headers/content-security-policy/connect-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/connect-src/index.md @@ -9,14 +9,14 @@ browser-compat: http.headers.Content-Security-Policy.connect-src The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`connect-src`** directive restricts the URLs which can be -loaded using script interfaces. The APIs that are restricted are: +loaded using script interfaces. The following APIs are controlled by this directive: -- {{HTMLElement("a")}} [`ping`](/en-US/docs/Web/HTML/Element/a#ping), -- {{domxref("Window/fetch", "fetch()")}}, -- {{domxref("XMLHttpRequest")}}, -- {{domxref("WebSocket")}}, -- {{domxref("EventSource")}}, and -- {{domxref("Navigator.sendBeacon()")}}. +- The [`ping`](/en-US/docs/Web/HTML/Element/a#ping) attribute in {{htmlelement("a")}} elements +- {{domxref("Window/fetch", "fetch()")}} +- {{domxref("XMLHttpRequest")}} +- {{domxref("WebSocket")}} +- {{domxref("EventSource")}} +- {{domxref("Navigator.sendBeacon()")}} > **Note:** `connect-src 'self'` does not resolve to websocket > schemes in all browsers, more info in this [issue](https://github.com/w3c/webappsec-csp/issues/7). @@ -43,18 +43,20 @@ loaded using script interfaces. The APIs that are restricted are: ## Syntax -One or more sources can be allowed for the connect-src policy: - ```http -Content-Security-Policy: connect-src ; -Content-Security-Policy: connect-src ; +Content-Security-Policy: connect-src 'none'; +Content-Security-Policy: connect-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/default-src/index.md b/files/en-us/web/http/headers/content-security-policy/default-src/index.md index 904148b03c194e2..611d782fa9cf09d 100644 --- a/files/en-us/web/http/headers/content-security-policy/default-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/default-src/index.md @@ -41,18 +41,20 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`default-src`** direc ## Syntax -One or more sources can be allowed for the `default-src` policy: - ```http -Content-Security-Policy: default-src ; -Content-Security-Policy: default-src ; +Content-Security-Policy: default-src 'none'; +Content-Security-Policy: default-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/font-src/index.md b/files/en-us/web/http/headers/content-security-policy/font-src/index.md index 003da75983b93db..9cd7ea7d0e3e208 100644 --- a/files/en-us/web/http/headers/content-security-policy/font-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/font-src/index.md @@ -33,18 +33,20 @@ valid sources for fonts loaded using {{cssxref("@font-face")}}. ## Syntax -One or more sources can be allowed for the `font-src` policy: - ```http -Content-Security-Policy: font-src ; -Content-Security-Policy: font-src ; +Content-Security-Policy: font-src 'none'; +Content-Security-Policy: font-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/form-action/index.md b/files/en-us/web/http/headers/content-security-policy/form-action/index.md index 569c38ff3660174..053c4024e0398ef 100644 --- a/files/en-us/web/http/headers/content-security-policy/form-action/index.md +++ b/files/en-us/web/http/headers/content-security-policy/form-action/index.md @@ -31,18 +31,24 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`form-action`** direc ## Syntax -One or more sources can be set for the `form-action` policy: - ```http -Content-Security-Policy: form-action ; -Content-Security-Policy: form-action ; +Content-Security-Policy: form-action 'none'; +Content-Security-Policy: form-action ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No form submissions may be made. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. Form submissions may be made to URLs that match any of the given source expressions. -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). However, only the following subset of those values apply to `form-action`: -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + - `` + - `` + - the keyword value `'self'`. ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/frame-src/index.md b/files/en-us/web/http/headers/content-security-policy/frame-src/index.md index b7ee20794ec3dec..1e8fa9b6a800751 100644 --- a/files/en-us/web/http/headers/content-security-policy/frame-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/frame-src/index.md @@ -38,18 +38,20 @@ browsing contexts loading using elements such as {{HTMLElement("frame")}} and ## Syntax -One or more sources can be allowed for the `frame-src` policy: - ```http -Content-Security-Policy: frame-src ; -Content-Security-Policy: frame-src ; +Content-Security-Policy: frame-src 'none'; +Content-Security-Policy: frame-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/img-src/index.md b/files/en-us/web/http/headers/content-security-policy/img-src/index.md index 7865c59b4bbc7f2..42e6437d95ec196 100644 --- a/files/en-us/web/http/headers/content-security-policy/img-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/img-src/index.md @@ -31,18 +31,20 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} **`img-src`** directive speci ## Syntax -One or more sources can be allowed for the `img-src` policy: - ```http -Content-Security-Policy: img-src ; -Content-Security-Policy: img-src ; +Content-Security-Policy: img-src 'none'; +Content-Security-Policy: img-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/index.md b/files/en-us/web/http/headers/content-security-policy/index.md index 017e9d58a1a5d31..7cd06db251a332b 100644 --- a/files/en-us/web/http/headers/content-security-policy/index.md +++ b/files/en-us/web/http/headers/content-security-policy/index.md @@ -170,7 +170,7 @@ Reporting directives control the destination URL for CSP violation reports in `C ## Values An overview of the allowed values are listed below. -For detailed reference see [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources) and the documentation for individual directives. +For detailed reference see [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources) and the documentation for individual directives. ### Keyword values diff --git a/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md b/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md index 8c7d36511cb53dd..72af54796138b92 100644 --- a/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md @@ -34,18 +34,20 @@ to the resource. ## Syntax -One or more sources can be allowed for the `manifest-src` policy: - ```http -Content-Security-Policy: manifest-src ; -Content-Security-Policy: manifest-src ; +Content-Security-Policy: manifest-src 'none'; +Content-Security-Policy: manifest-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/media-src/index.md b/files/en-us/web/http/headers/content-security-policy/media-src/index.md index 77a8a810482766e..0284b6a7572b682 100644 --- a/files/en-us/web/http/headers/content-security-policy/media-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/media-src/index.md @@ -33,18 +33,20 @@ media using the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements. ## Syntax -One or more sources can be allowed for the `media-src` policy: - ```http -Content-Security-Policy: media-src ; -Content-Security-Policy: media-src ; +Content-Security-Policy: media-src 'none'; +Content-Security-Policy: media-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/object-src/index.md b/files/en-us/web/http/headers/content-security-policy/object-src/index.md index 7cbec9a06abc998..cde774a2726a58c 100644 --- a/files/en-us/web/http/headers/content-security-policy/object-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/object-src/index.md @@ -40,18 +40,20 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} ## Syntax -One or more sources can be allowed for the `object-src` policy: - ```http -Content-Security-Policy: object-src ; -Content-Security-Policy: object-src ; +Content-Security-Policy: object-src 'none'; +Content-Security-Policy: object-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md b/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md index 5c1021c1fb40fe9..4645a99d4682025 100644 --- a/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md @@ -36,18 +36,20 @@ be prefetched or prerendered. ## Syntax -One or more sources can be allowed for the `prefetch-src` policy: - ```http -Content-Security-Policy: prefetch-src ; -Content-Security-Policy: prefetch-src ; +Content-Security-Policy: prefetch-src 'none'; +Content-Security-Policy: prefetch-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Example diff --git a/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md b/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md index 5483e0867beafd7..e4a8022319eda8e 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md @@ -35,13 +35,21 @@ It does not apply to other JavaScript sources that can trigger script execution, ## Syntax -One or more sources can be allowed for the `script-src-attr` policy: - ```http -Content-Security-Policy: script-src-attr ; -Content-Security-Policy: script-src-attr ; +Content-Security-Policy: script-src-attr 'none'; +Content-Security-Policy: script-src-attr ; ``` +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. + + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). + `script-src-attr` can be used in conjunction with {{CSP("script-src")}}, and will override that directive for checks on inline handlers: ```http @@ -49,12 +57,6 @@ Content-Security-Policy: script-src ; Content-Security-Policy: script-src-attr ; ``` -### Sources - -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). - -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). - ## Examples ### Violation case diff --git a/files/en-us/web/http/headers/content-security-policy/script-src-elem/index.md b/files/en-us/web/http/headers/content-security-policy/script-src-elem/index.md index f36573ebb0f7467..21a411157bb4b08 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src-elem/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src-elem/index.md @@ -35,13 +35,21 @@ It does not apply to other JavaScript sources that can trigger script execution, ## Syntax -One or more sources can be allowed for the `script-src-elem` policy: - ```http -Content-Security-Policy: script-src-elem ; -Content-Security-Policy: script-src-elem ; +Content-Security-Policy: script-src-elem 'none'; +Content-Security-Policy: script-src-elem ; ``` +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. + + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). + `script-src-elem` can be used in conjunction with {{CSP("script-src")}}: ```http @@ -49,12 +57,6 @@ Content-Security-Policy: script-src ; Content-Security-Policy: script-src-elem ; ``` -### Sources - -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). - -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). - ## Examples ### Violation case diff --git a/files/en-us/web/http/headers/content-security-policy/script-src/index.md b/files/en-us/web/http/headers/content-security-policy/script-src/index.md index 6ab5dd782daa439..9a4d1675dba9d91 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src/index.md @@ -31,18 +31,20 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src`** direct ## Syntax -One or more sources can be allowed for the `script-src` policy: - ```http -Content-Security-Policy: script-src ; -Content-Security-Policy: script-src ; +Content-Security-Policy: script-src 'none'; +Content-Security-Policy: script-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/sources/index.md b/files/en-us/web/http/headers/content-security-policy/sources/index.md index 8debb1d4dfe551f..718568028210b53 100644 --- a/files/en-us/web/http/headers/content-security-policy/sources/index.md +++ b/files/en-us/web/http/headers/content-security-policy/sources/index.md @@ -7,8 +7,15 @@ spec-urls: https://w3c.github.io/webappsec-csp/#framework-directive-source-list {{HTTPSidebar}} -HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) header directives that specify a `` from which resources may be loaded can use any one of the values listed below. -Relevant directives include the {{Glossary("fetch directive", "fetch directives")}}, along with others [listed below](#relevant_directives). +HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) [fetch directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directives) may take as a value a space-separated list of _source expressions_. Each source expression can be any of the values listed below. + +As well as fetch directives, some other CSP directives may take as a value a space-separated list of source expressions, each of which may be a subset of the values listed below, namely: one of ``, ``, or the keyword `'self'`. These other directives are: + +- {{CSP("base-uri")}} +- {{CSP("form-action")}} +- {{CSP("frame-ancestors")}} + +Directives that accept a list of source expressions may instead be given the single value `'none'`, indicating that no resources of the given type may be loaded (or, in the case of non-fetch directives, that the associated feature is not allowed). ## Sources @@ -64,12 +71,9 @@ Relevant directives include the {{Glossary("fetch directive", "fetch directives" - `'unsafe-inline'` - : Allows the use of inline resources, such as inline {{HTMLElement("script")}} elements, [`javascript:` URLs](/en-US/docs/Web/URI/Schemes/javascript), inline event handlers, and inline {{HTMLElement("style")}} elements. The single quotes are required. -- `'none'` - - : Refers to the empty set; that is, no URLs match. - The single quotes are required. - `'nonce-'` - - : An allowlist for specific inline scripts using a cryptographic nonce (number used once). + - : An allowlist for specific scripts using a cryptographic nonce (number used once). The server must generate a unique nonce value each time it transmits a policy. It is critical to provide an unguessable nonce, as bypassing a resource's policy is otherwise trivial. See [unsafe inline script](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script) for an example. @@ -96,37 +100,3 @@ Relevant directives include the {{Glossary("fetch directive", "fetch directives" ## Specifications {{Specifications}} - -## Relevant directives - -Directives for which the above sources apply include: - -- {{Glossary("fetch directive", "Fetch directives")}}: - - - {{CSP("default-src")}} - - {{CSP("child-src")}} - - {{CSP("connect-src")}} - - {{CSP("font-src")}} - - {{CSP("frame-src")}} - - {{CSP("img-src")}} - - {{CSP("manifest-src")}} - - {{CSP("media-src")}} - - {{CSP("object-src")}} - - {{CSP("prefetch-src")}} - - {{CSP("script-src")}} - - {{CSP("script-src-elem")}} - - {{CSP("script-src-attr")}} - - {{CSP("style-src")}} - - {{CSP("style-src-elem")}} - - {{CSP("style-src-attr")}} - - {{CSP("worker-src")}} - -- {{Glossary("Document directive", "Document directives")}}: - - - {{CSP("base-uri")}} - - {{CSP("sandbox")}} - -- {{Glossary("Navigation directive", "Navigation directives")}}: - - - {{CSP("form-action")}} - - {{CSP("frame-ancestors")}} diff --git a/files/en-us/web/http/headers/content-security-policy/style-src-attr/index.md b/files/en-us/web/http/headers/content-security-policy/style-src-attr/index.md index cbccae9bafb8c7a..1aa6165afa0d101 100644 --- a/files/en-us/web/http/headers/content-security-policy/style-src-attr/index.md +++ b/files/en-us/web/http/headers/content-security-policy/style-src-attr/index.md @@ -36,13 +36,21 @@ These are set using {{CSP("style-src-elem")}} (and valid sources for all styles ## Syntax -One or more sources can be allowed for the `style-src-attr` policy: - ```http -Content-Security-Policy: style-src-attr ; -Content-Security-Policy: style-src-attr ; +Content-Security-Policy: style-src-attr 'none'; +Content-Security-Policy: style-src-attr ; ``` +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. + + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). + `style-src-attr` can be used in conjunction with {{CSP("style-src")}}: ```http @@ -50,12 +58,6 @@ Content-Security-Policy: style-src ; Content-Security-Policy: style-src-attr ; ``` -### Sources - -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). - -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). - ## Examples ### Violation cases diff --git a/files/en-us/web/http/headers/content-security-policy/style-src-elem/index.md b/files/en-us/web/http/headers/content-security-policy/style-src-elem/index.md index 44e0e8302556f72..0538d75a361b782 100644 --- a/files/en-us/web/http/headers/content-security-policy/style-src-elem/index.md +++ b/files/en-us/web/http/headers/content-security-policy/style-src-elem/index.md @@ -35,13 +35,21 @@ The directive does not set valid sources for inline style attributes; these are ## Syntax -One or more sources can be allowed for the `style-src-elem` policy: - ```http -Content-Security-Policy: style-src-elem ; -Content-Security-Policy: style-src-elem ; +Content-Security-Policy: style-src-elem 'none'; +Content-Security-Policy: style-src-elem ; ``` +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` + + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. + + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). + `style-src-elem` can be used in conjunction with {{CSP("style-src")}}: ```http @@ -49,12 +57,6 @@ Content-Security-Policy: style-src ; Content-Security-Policy: style-src-elem ; ``` -### Sources - -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). - -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). - ## Examples ### Violation cases diff --git a/files/en-us/web/http/headers/content-security-policy/style-src/index.md b/files/en-us/web/http/headers/content-security-policy/style-src/index.md index 7a8ce96758f07ad..d044c4b58e27cb6 100644 --- a/files/en-us/web/http/headers/content-security-policy/style-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/style-src/index.md @@ -31,18 +31,20 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`style-src`** directi ## Syntax -One or more sources can be allowed for the `style-src` policy: - ```http -Content-Security-Policy: style-src ; -Content-Security-Policy: style-src ; +Content-Security-Policy: style-src 'none'; +Content-Security-Policy: style-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples diff --git a/files/en-us/web/http/headers/content-security-policy/worker-src/index.md b/files/en-us/web/http/headers/content-security-policy/worker-src/index.md index c17e54c02775704..df3aa70b3cd0451 100644 --- a/files/en-us/web/http/headers/content-security-policy/worker-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/worker-src/index.md @@ -39,18 +39,20 @@ scripts. ## Syntax -One or more sources can be allowed for the `worker-src` policy: - ```http -Content-Security-Policy: worker-src ; -Content-Security-Policy: worker-src ; +Content-Security-Policy: worker-src 'none'; +Content-Security-Policy: worker-src ; ``` -### Sources +This directive may have one of the following values: + +- `'none'` + - : No resources of this type may be loaded. The single quotes are mandatory. +- `` -`` can be any one of the values listed in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). + - : A space-separated list of _source expression_ values. Resources of this type may be loaded if they match any of the given source expressions. -Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a [number of other directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)). + Source expressions are specified as keyword values or URL patterns: the syntax for each source expression is given in [CSP Source Values](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources). ## Examples From 110f8c92671e410dce810906b49b5befbf32092f Mon Sep 17 00:00:00 2001 From: Yash Ghelani Date: Fri, 4 Oct 2024 08:41:44 +0530 Subject: [PATCH 21/94] Fix grammatical / phrasing error (#36130) * Fix grammatical / phrasing error * Update files/en-us/web/performance/how_browsers_work/index.md --------- Co-authored-by: Hamish Willee --- files/en-us/web/performance/how_browsers_work/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/performance/how_browsers_work/index.md b/files/en-us/web/performance/how_browsers_work/index.md index 2ad5a1b52a04bd7..b149e7c6b64c482 100644 --- a/files/en-us/web/performance/how_browsers_work/index.md +++ b/files/en-us/web/performance/how_browsers_work/index.md @@ -139,7 +139,8 @@ As with HTML, the browser needs to convert the received CSS rules into something The CSSOM tree includes styles from the user agent style sheet. The browser begins with the most general rule applicable to a node and recursively refines the computed styles by applying more specific rules. In other words, it cascades the property values. -Building the CSSOM is very, very fast and is not displayed in a unique color in current developer tools. Rather, the "Recalculate Style" in developer tools shows the total time it takes to parse CSS, construct the CSSOM tree, and recursively calculate computed styles. In terms of web performance optimization, there are lower hanging fruit, as the total time to create the CSSOM is generally less than the time it takes for one DNS lookup. +Building the CSSOM is very, very fast, and this build time information is not displayed in the developer tools. +Rather, the "Recalculate Style" in developer tools shows the total time it takes to parse CSS, construct the CSSOM tree, and recursively calculate computed styles. In terms of web performance, there are many better ways to invest optimization effort, as the total time to create the CSSOM is generally less than the time it takes for one DNS lookup. ### Other processes From b795bc99fc5c5d8a96c1b202a12750404085c28a Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:37:27 +0800 Subject: [PATCH 22/94] Fix globals, part 16: `clearInterval()` & `setInterval()` (#36042) * move * update content * update content * sync redirects * update * Apply suggestions from code review Co-authored-by: wbamberg * Update files/en-us/web/api/workerglobalscope/setinterval/index.md --------- Co-authored-by: wbamberg --- files/en-us/_redirects.txt | 40 ++-- files/en-us/_wikihistory.json | 178 +++++++++--------- files/en-us/games/anatomy/index.md | 2 +- .../finishing_up/index.md | 2 +- .../move_the_ball/index.md | 2 +- .../accessibility/wai-aria_basics/index.md | 2 +- .../video_and_audio_apis/index.md | 2 +- .../learn/performance/javascript/index.md | 2 +- .../add-ons/webextensions/api/alarms/index.md | 2 +- .../webextensions/content_scripts/index.md | 2 +- .../mozilla/firefox/releases/13/index.md | 2 +- .../en-us/mozilla/firefox/releases/5/index.md | 4 +- .../releases/5/updating_add-ons/index.md | 2 +- .../mozilla/firefox/releases/50/index.md | 2 +- .../mozilla/firefox/releases/51/index.md | 2 +- .../mozilla/firefox/releases/55/index.md | 2 +- .../mozilla/firefox/releases/56/index.md | 2 +- .../tutorial/basic_animations/index.md | 6 +- .../canvas_api/tutorial/basic_usage/index.md | 2 +- .../tutorial/optimizing_canvas/index.md | 2 +- files/en-us/web/api/clearinterval/index.md | 56 ------ files/en-us/web/api/cleartimeout/index.md | 12 +- .../microtask_guide/in_depth/index.md | 8 +- .../api/html_dom_api/microtask_guide/index.md | 2 +- .../timing_element_visibility/index.md | 4 +- .../api/rtcicecandidatestats/deleted/index.md | 2 +- .../api/rtcpeerconnection/getstats/index.md | 2 +- files/en-us/web/api/settimeout/index.md | 15 +- .../using_readable_streams/index.md | 2 +- .../using_the_web_animations_api/index.md | 20 +- .../index.md | 4 +- files/en-us/web/api/web_workers_api/index.md | 4 +- .../using_web_workers/index.md | 12 +- .../web/api/window/clearinterval/index.md | 53 ++++++ files/en-us/web/api/window/index.md | 6 +- .../api/window/requestidlecallback/index.md | 4 +- .../web/api/{ => window}/setinterval/index.md | 24 ++- .../api/window_management_api/using/index.md | 2 +- .../workerglobalscope/clearinterval/index.md | 53 ++++++ .../en-us/web/api/workerglobalscope/index.md | 6 +- .../workerglobalscope/setinterval/index.md | 72 +++++++ .../script-src/index.md | 4 +- .../javascript_technologies_overview/index.md | 12 +- files/en-us/web/media/autoplay_guide/index.md | 4 +- .../index.md | 2 +- .../web/performance/fundamentals/index.md | 4 +- 46 files changed, 379 insertions(+), 270 deletions(-) delete mode 100644 files/en-us/web/api/clearinterval/index.md create mode 100644 files/en-us/web/api/window/clearinterval/index.md rename files/en-us/web/api/{ => window}/setinterval/index.md (91%) create mode 100644 files/en-us/web/api/workerglobalscope/clearinterval/index.md create mode 100644 files/en-us/web/api/workerglobalscope/setinterval/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 8a60d1f294ea6e4..10e0a9330aafca0 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -1213,7 +1213,7 @@ /en-US/docs/DOM/DOM_Reference/event /en-US/docs/Web/API/Event /en-US/docs/DOM/DOM_Reference/style /en-US/docs/Web/API/HTMLStyleElement /en-US/docs/DOM/DOM_Reference/window /en-US/docs/Web/API/Window -/en-US/docs/DOM/DOM_Reference/window/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM/DOM_Reference/window/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM/DOM_event_handlers /en-US/docs/Web/Events/Event_handlers /en-US/docs/DOM/DOM_event_reference /en-US/docs/Web/Events /en-US/docs/DOM/DOM_event_reference/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event @@ -2082,7 +2082,7 @@ /en-US/docs/DOM/window.cancelAnimationFrame /en-US/docs/Web/API/Window/cancelAnimationFrame /en-US/docs/DOM/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/DOM/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/DOM/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/DOM/window.close /en-US/docs/Web/API/Window/close /en-US/docs/DOM/window.closed /en-US/docs/Web/API/Window/closed @@ -2229,7 +2229,7 @@ /en-US/docs/DOM/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/DOM/window.self /en-US/docs/Web/API/Window/self /en-US/docs/DOM/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/DOM/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/DOM/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/DOM/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/DOM/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/DOM/window.sidebar /en-US/docs/Web/API/Window/external @@ -2542,7 +2542,7 @@ /en-US/docs/DOM:window.blur /en-US/docs/Web/API/Window/blur /en-US/docs/DOM:window.btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/DOM:window.captureEvents /en-US/docs/Web/API/Window/captureEvents -/en-US/docs/DOM:window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM:window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM:window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/DOM:window.close /en-US/docs/Web/API/Window/close /en-US/docs/DOM:window.closed /en-US/docs/Web/API/Window/closed @@ -2651,7 +2651,7 @@ /en-US/docs/DOM:window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/DOM:window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/DOM:window.self /en-US/docs/Web/API/Window/self -/en-US/docs/DOM:window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/DOM:window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/DOM:window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/DOM:window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/DOM:window.sidebar /en-US/docs/Web/API/Window/external @@ -3253,7 +3253,7 @@ /en-US/docs/Document_Object_Model_(DOM)/window.URL.revokeObjectURL /en-US/docs/Web/API/URL/revokeObjectURL_static /en-US/docs/Document_Object_Model_(DOM)/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/Document_Object_Model_(DOM)/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/Document_Object_Model_(DOM)/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Document_Object_Model_(DOM)/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Document_Object_Model_(DOM)/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Document_Object_Model_(DOM)/window.close /en-US/docs/Web/API/Window/close /en-US/docs/Document_Object_Model_(DOM)/window.closed /en-US/docs/Web/API/Window/closed @@ -3370,7 +3370,7 @@ /en-US/docs/Document_Object_Model_(DOM)/window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/Document_Object_Model_(DOM)/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/Document_Object_Model_(DOM)/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/Document_Object_Model_(DOM)/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Document_Object_Model_(DOM)/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Document_Object_Model_(DOM)/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Document_Object_Model_(DOM)/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/Document_Object_Model_(DOM)/window.sidebar /en-US/docs/Web/API/Window/external @@ -10148,7 +10148,6 @@ /en-US/docs/Web/API/Window/animationend_event /en-US/docs/Web/API/Element/animationend_event /en-US/docs/Web/API/Window/animationiteration_event /en-US/docs/Web/API/Element/animationiteration_event /en-US/docs/Web/API/Window/animationstart_event /en-US/docs/Web/API/Element/animationstart_event -/en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/Window/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/Window/content /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/convertPointFromNodeToPage /en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage @@ -10213,7 +10212,6 @@ /en-US/docs/Web/API/Window/removeEventListener /en-US/docs/Web/API/EventTarget/removeEventListener /en-US/docs/Web/API/Window/resolveLocalFileSystemURL /en-US/docs/Web/API/File_and_Directory_Entries_API#resolvelocalfilesystemurl() /en-US/docs/Web/API/Window/restore /en-US/docs/Web/API/Window/moveTo -/en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/setInterval /en-US/docs/Web/API/Window/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/Window/sidebar /en-US/docs/Web/API/Window/external /en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages /en-US/docs/Web/OpenSearch @@ -10254,7 +10252,7 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob /en-US/docs/Web/API/Window/atob /en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches /en-US/docs/Web/API/Window/caches -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap /en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated @@ -10264,19 +10262,19 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /en-US/docs/Web/API/Window/queueMicrotask /en-US/docs/Web/API/WindowOrWorkerGlobalScope/rejectionhandled_event /en-US/docs/Web/API/Window/rejectionhandled_event -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/WindowOrWorkerGlobalScope/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/WindowOrWorkerGlobalScope/unhandledrejection_event /en-US/docs/Web/API/Window/unhandledrejection_event /en-US/docs/Web/API/WindowSessionStorage /en-US/docs/Web/API/Window/sessionStorage /en-US/docs/Web/API/WindowSessionStorage.sessionStorage /en-US/docs/Web/API/Window/sessionStorage -/en-US/docs/Web/API/WindowTimers.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowTimers.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowTimers.clearTimeout /en-US/docs/Web/API/clearTimeout -/en-US/docs/Web/API/WindowTimers.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowTimers.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowTimers.setTimeout /en-US/docs/Web/API/setTimeout -/en-US/docs/Web/API/WindowTimers/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowTimers/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowTimers/clearTimeout /en-US/docs/Web/API/clearTimeout -/en-US/docs/Web/API/WindowTimers/setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowTimers/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowTimers/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/Worker.Worker /en-US/docs/Web/API/Worker/Worker /en-US/docs/Web/API/Worker.Worker() /en-US/docs/Web/API/Worker/Worker @@ -10305,7 +10303,6 @@ /en-US/docs/Web/API/WorkerGlobalScope.performance /en-US/docs/Web/API/WorkerGlobalScope/performance /en-US/docs/Web/API/WorkerGlobalScope.self /en-US/docs/Web/API/WorkerGlobalScope/self /en-US/docs/Web/API/WorkerGlobalScope/WorkerGlobalScope.caches /en-US/docs/Web/API/WorkerGlobalScope/caches -/en-US/docs/Web/API/WorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/WorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WorkerGlobalScope/close /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close /en-US/docs/Web/API/WorkerGlobalScope/console /en-US/docs/Web/API/console @@ -10315,7 +10312,6 @@ /en-US/docs/Web/API/WorkerGlobalScope/onoffline /en-US/docs/Web/API/WorkerGlobalScope/offline_event /en-US/docs/Web/API/WorkerGlobalScope/ononline /en-US/docs/Web/API/WorkerGlobalScope/online_event /en-US/docs/Web/API/WorkerGlobalScope/requestFileSystemSync /en-US/docs/Web/API/File_and_Directory_Entries_API -/en-US/docs/Web/API/WorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval /en-US/docs/Web/API/WorkerGlobalScope/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/WorkerLocation.hash /en-US/docs/Web/API/WorkerLocation/hash /en-US/docs/Web/API/WorkerNavigator/taintEnabled /en-US/docs/Web/API/Navigator/taintEnabled @@ -10404,6 +10400,7 @@ /en-US/docs/Web/API/atob /en-US/docs/Web/API/Window/atob /en-US/docs/Web/API/btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/Web/API/caches /en-US/docs/Web/API/Window/caches +/en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/console.assert /en-US/docs/Web/API/console/assert_static /en-US/docs/Web/API/console.dir /en-US/docs/Web/API/console/dir_static /en-US/docs/Web/API/console.error /en-US/docs/Web/API/console/error_static @@ -10746,6 +10743,7 @@ /en-US/docs/Web/API/scheduler_property /en-US/docs/Web/API/Window/scheduler /en-US/docs/Web/API/select.type /en-US/docs/Web/API/HTMLSelectElement/type /en-US/docs/Web/API/sessionStorage /en-US/docs/Web/API/Window/sessionStorage +/en-US/docs/Web/API/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/style.media /en-US/docs/Web/API/HTMLStyleElement/media /en-US/docs/Web/API/style.type /en-US/docs/Web/API/HTMLStyleElement/type @@ -10789,7 +10787,7 @@ /en-US/docs/Web/API/window.cancelAnimationFrame /en-US/docs/Web/API/Window/cancelAnimationFrame /en-US/docs/Web/API/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/Web/API/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/Web/API/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/window.close /en-US/docs/Web/API/Window/close /en-US/docs/Web/API/window.closed /en-US/docs/Web/API/Window/closed @@ -10938,7 +10936,7 @@ /en-US/docs/Web/API/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/Web/API/window.self /en-US/docs/Web/API/Window/self /en-US/docs/Web/API/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/Web/API/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/Web/API/window.sidebar /en-US/docs/Web/API/Window/external @@ -13770,7 +13768,7 @@ /en-US/docs/web/api/DOMPoint/fromPoint /en-US/docs/Web/API/DOMPoint/fromPoint_static /en-US/docs/width /en-US/docs/Web/CSS/width /en-US/docs/window.captureEvents /en-US/docs/Web/API/Window/captureEvents -/en-US/docs/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/window.close /en-US/docs/Web/API/Window/close /en-US/docs/window.closed /en-US/docs/Web/API/Window/closed @@ -13813,7 +13811,7 @@ /en-US/docs/window.scrollX /en-US/docs/Web/API/Window/scrollX /en-US/docs/window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/window.scrollbars /en-US/docs/Web/API/Window/scrollbars -/en-US/docs/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/window.sidebar /en-US/docs/Web/API/Window/external /en-US/docs/window.sizeToContent /en-US/docs/Web/API/Window/sizeToContent diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index ef80cfaacde39eb..eaeaead2509401c 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -66504,6 +66504,30 @@ "McGurk" ] }, + "Web/API/Window/clearInterval": { + "modified": "2020-10-15T21:11:20.211Z", + "contributors": [ + "mileskrell", + "fscholz", + "erikadoyle", + "chrisdavidmills", + "Sheppy", + "cvrebert", + "dyagmin", + "teoli", + "Mats.Palmgren", + "ethertank", + "ziyunfei", + "fusionchess", + "qfel13", + "Nickolay", + "Taken", + "Mgjbot", + "BenoitL", + "Maian", + "JesseW" + ] + }, "Web/API/Window/close": { "modified": "2020-10-15T21:06:33.895Z", "contributors": [ @@ -68856,6 +68880,71 @@ "McGurk" ] }, + "Web/API/Window/setInterval": { + "modified": "2020-12-09T23:19:41.310Z", + "contributors": [ + "uzair-ashraf", + "SpartaSixZero", + "albedoa", + "xgqfrms", + "ankit.sangwan1999", + "Soul", + "yuedou", + "mfuji09", + "Sheppy", + "a18wheeler", + "jabcreations", + "severo", + "GusGold", + "fscholz", + "leolavaur", + "livthomas", + "chrisdavidmills", + "Anto_Rich", + "telunc", + "erikadoyle", + "nmve", + "kdex", + "teatimesoft", + "fusionchess", + "mathiasvr", + "mikemsq", + "michals", + "Jorge.villalobos", + "maybe", + "rolfedh", + "bmwolfington", + "dreamweiver", + "Sebastianz", + "dyagmin", + "jeff_mangus", + "teoli", + "kertof", + "DDERRSS", + "jonathansampson", + "iamanupmenon", + "ethertank", + "m_gol", + "dancrumb", + "brunoais", + "BrianDiPalma", + "McGurk", + "wooptoo", + "jjoemb", + "Jesse", + "HarrisonM", + "ehynds", + "Nickolay", + "aeon", + "Ceth", + "1212jtraceur", + "Mgjbot", + "Jabez", + "BenoitL", + "Dria", + "JesseW" + ] + }, "Web/API/Window/showDirectoryPicker": { "modified": "2020-12-12T15:32:04.243Z", "contributors": ["Rumyra"] @@ -70977,30 +71066,6 @@ "modified": "2019-03-23T23:49:50.843Z", "contributors": ["SphinxKnight", "teoli", "Mgjbot", "Sebuls", "JdeValk"] }, - "Web/API/clearInterval": { - "modified": "2020-10-15T21:11:20.211Z", - "contributors": [ - "mileskrell", - "fscholz", - "erikadoyle", - "chrisdavidmills", - "Sheppy", - "cvrebert", - "dyagmin", - "teoli", - "Mats.Palmgren", - "ethertank", - "ziyunfei", - "fusionchess", - "qfel13", - "Nickolay", - "Taken", - "Mgjbot", - "BenoitL", - "Maian", - "JesseW" - ] - }, "Web/API/clearTimeout": { "modified": "2020-10-15T21:09:05.105Z", "contributors": [ @@ -71528,71 +71593,6 @@ "myakura" ] }, - "Web/API/setInterval": { - "modified": "2020-12-09T23:19:41.310Z", - "contributors": [ - "uzair-ashraf", - "SpartaSixZero", - "albedoa", - "xgqfrms", - "ankit.sangwan1999", - "Soul", - "yuedou", - "mfuji09", - "Sheppy", - "a18wheeler", - "jabcreations", - "severo", - "GusGold", - "fscholz", - "leolavaur", - "livthomas", - "chrisdavidmills", - "Anto_Rich", - "telunc", - "erikadoyle", - "nmve", - "kdex", - "teatimesoft", - "fusionchess", - "mathiasvr", - "mikemsq", - "michals", - "Jorge.villalobos", - "maybe", - "rolfedh", - "bmwolfington", - "dreamweiver", - "Sebastianz", - "dyagmin", - "jeff_mangus", - "teoli", - "kertof", - "DDERRSS", - "jonathansampson", - "iamanupmenon", - "ethertank", - "m_gol", - "dancrumb", - "brunoais", - "BrianDiPalma", - "McGurk", - "wooptoo", - "jjoemb", - "Jesse", - "HarrisonM", - "ehynds", - "Nickolay", - "aeon", - "Ceth", - "1212jtraceur", - "Mgjbot", - "Jabez", - "BenoitL", - "Dria", - "JesseW" - ] - }, "Web/API/setTimeout": { "modified": "2020-10-15T21:06:28.845Z", "contributors": [ diff --git a/files/en-us/games/anatomy/index.md b/files/en-us/games/anatomy/index.md index fa81f0c08ad0240..c158ce2026c269b 100644 --- a/files/en-us/games/anatomy/index.md +++ b/files/en-us/games/anatomy/index.md @@ -214,7 +214,7 @@ Other methods of tackling the problem exist. One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards: -- Draw on `requestAnimationFrame` and update on a {{ domxref("setInterval()") }} or {{ domxref("setTimeout()") }}. +- Draw on `requestAnimationFrame()` and update on a {{domxref("Window.setInterval", "setInterval()")}} or {{domxref("setTimeout()")}}. - This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.) diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index ac89b7750016d0a..784579b62e6c891 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -67,7 +67,7 @@ drawLives(); ## Improving rendering with requestAnimationFrame() -Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("setInterval()")}}. Replace the following line: +Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("Window.setInterval", "setInterval()")}}. Replace the following line: ```js interval = setInterval(draw, 10); diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 39bd8f562782367..ba224eac8fdfd62 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -15,7 +15,7 @@ You already know how to draw a ball from working through the previous article, s ## Defining a drawing loop To keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. You can run a function over and over again using a JavaScript timing function. -Later on in the tutorial, we'll see how {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("setInterval()")}} at first to create some looping logic. +Later on in the tutorial, we'll see how {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("Window.setInterval", "setInterval()")}} at first to create some looping logic. Delete all the JavaScript you currently have inside your HTML file except for the first two lines, and add the following below them. The `draw()` function will be executed within `setInterval` every 10 milliseconds: diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 687278818773c96..c8307f478b91fe1 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -220,7 +220,7 @@ Let's look at a quick example — see [`aria-no-live.html`](https://github.com/m ``` -Our JavaScript uses the {{domxref("Window/fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a [`setInterval()`](/en-US/docs/Web/API/setInterval) loop that loads a new random quote into the quote box every 10 seconds: +Our JavaScript uses the {{domxref("Window.fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds: ```js const intervalID = setInterval(showQuote, 10000); diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index 35858ddb8bfbd4d..3cb670ea41af9c4 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -351,7 +351,7 @@ There are many ways that you can implement rewind and fast-forward functionality 1. We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the `rwd` button after pressing the `fwd` button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at once, the player would break. 2. We use an `if` statement to check whether the `active` class has been set on the `rwd` button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the `classList.contains()` method to check whether the list contains the `active` class. This returns a boolean `true`/`false` result. 3. If `active` has been set on the `rwd` button, we remove it using `classList.remove()`, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally. - 4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("setInterval()")}} running, you have to call {{domxref("clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function). + 4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("Window.setInterval", "setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("Window.setInterval", "setInterval()")}} running, you have to call {{domxref("Window.clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function). 3. Finally, we need to define the `windBackward()` and `windForward()` functions invoked in the `setInterval()` calls. Add the following below your two previous functions: diff --git a/files/en-us/learn/performance/javascript/index.md b/files/en-us/learn/performance/javascript/index.md index c28c3e747f30bf3..a1a75e32b9d4ab5 100644 --- a/files/en-us/learn/performance/javascript/index.md +++ b/files/en-us/learn/performance/javascript/index.md @@ -232,7 +232,7 @@ The most obvious piece of animation advice is to use less animations — cut out For essential DOM animations, you are advised to use [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) where possible, rather than JavaScript animations (the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) provides a way to directly hook into CSS animations using JavaScript). Using the browser to directly perform DOM animations rather than manipulating inline styles using JavaScript is much faster and more efficient. See also [CSS performance optimization > Handling animations](/en-US/docs/Learn/Performance/CSS#handling_animations). -For animations that can't be handled in JavaScript, for example, animating an HTML {{htmlelement("canvas")}}, you are advised to use {{domxref("Window.requestAnimationFrame()")}} rather than older options such as {{domxref("setInterval()")}}. The `requestAnimationFrame()` method is specially designed for handling animation frames efficiently and consistently, for a smooth user experience. The basic pattern looks like this: +For animations that can't be handled in JavaScript, for example, animating an HTML {{htmlelement("canvas")}}, you are advised to use {{domxref("Window.requestAnimationFrame()")}} rather than older options such as {{domxref("Window.setInterval()")}}. The `requestAnimationFrame()` method is specially designed for handling animation frames efficiently and consistently, for a smooth user experience. The basic pattern looks like this: ```js function loop() { diff --git a/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md b/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md index 06cf1dec01e25c7..944cca413d6146e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md @@ -7,7 +7,7 @@ browser-compat: webextensions.api.alarms {{AddonSidebar}} -Schedule code to run at a specific time in the future. This is like [`setTimeout()`](/en-US/docs/Web/API/setTimeout) and [`setInterval()`](/en-US/docs/Web/API/setInterval), except that those functions don't work with background pages that are loaded on demand. +Schedule code to run at a specific time in the future. This is like [`setTimeout()`](/en-US/docs/Web/API/setTimeout), {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, except that those functions don't work with background pages that are loaded on demand. Alarms do not persist across browser sessions. They are created globally across all contexts of a single extension. E.g. alarm created in background script will fire [`onAlarm`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm) event in background script, options page, popup page and extension tabs (and vice versa). Alarms API is not available in [Content scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#webextension_apis). diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md index b8e7ffac1eb3f10..8fed9e86fe0e622 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md @@ -561,7 +561,7 @@ In page script, window.x: 1 In page script, window.y: undefined ``` -The same applies to [`setTimeout()`](/en-US/docs/Web/API/setTimeout), [`setInterval()`](/en-US/docs/Web/API/setInterval), and [`Function()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function). +The same applies to [`setTimeout()`](/en-US/docs/Web/API/setTimeout), {{domxref("Window.setInterval", "setInterval()")}}, and [`Function()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function). > [!WARNING] > Be very careful when running code in the context of the page! diff --git a/files/en-us/mozilla/firefox/releases/13/index.md b/files/en-us/mozilla/firefox/releases/13/index.md index aaa664d0b95e97d..79e76f5dfeb12cc 100644 --- a/files/en-us/mozilla/firefox/releases/13/index.md +++ b/files/en-us/mozilla/firefox/releases/13/index.md @@ -32,7 +32,7 @@ Firefox 13 was shipped on June 5, 2012. This page summarizes the changes in Fire ### DOM - The {{domxref("Node.cloneNode()")}} method's `deep` argument is now optional, as specified in DOM4. -- The {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} methods no longer pass an additional "lateness" argument to the callback routine. +- The {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} methods no longer pass an additional "lateness" argument to the callback routine. - The {{domxref("Blob","Blob.mozSlice()")}} method has been unprefixed. - Support for the {{domxref("Blob")}} constructor has been added. - Support for `globalStorage` has been removed. diff --git a/files/en-us/mozilla/firefox/releases/5/index.md b/files/en-us/mozilla/firefox/releases/5/index.md index 09317ea6d9015be..40c3f91bda8a400 100644 --- a/files/en-us/mozilla/firefox/releases/5/index.md +++ b/files/en-us/mozilla/firefox/releases/5/index.md @@ -41,9 +41,9 @@ Firefox 5, based on Gecko 5.0, was released on June 21, 2011. This article provi ### DOM -- The {{ domxref("selection") }} object's [`modify()`](/en-US/docs/Web/API/Selection/modify) method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation. +- The {{ domxref("selection") }} object's {{domxref("Selection.modify", "modify()")}} method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation. - The {{ domxref("setTimeout()") }} method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to). -- Similarly, the {{ domxref("setInterval()") }} method now clamps to no more than one interval per second in inactive tabs. +- Similarly, the {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} method now clamps to no more than one interval per second in inactive tabs. - [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) now [supports the `loadend` event](/en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#detecting_any_load_end_condition) for progress listeners. This is sent after any transfer is finished (that is, after the `abort`, `error`, or `load` event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer. - The {{ domxref("Blob") }} and, by extension, the {{ domxref("File") }} objects' `slice()` method has been removed and replaced with a new, proposed syntax that makes it more consistent with [`Array.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`String.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) methods in JavaScript. This method is named `mozSlice()` for now. - The value of {{ domxref("Navigator.language") }} is now determined by looking at the value of the `Accept-Language` [HTTP header](/en-US/docs/Web/HTTP/Headers). diff --git a/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md b/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md index 2d0502d588cc02e..69d5cf6fcab182b 100644 --- a/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md +++ b/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md @@ -29,7 +29,7 @@ In the past, the {{ domxref("Navigator.language", "window.navigator.language") } ## DOM changes -The behaviors of {{ domxref("setTimeout()") }} and {{ domxref("setInterval()") }} have changed; the minimum allowed time has changed, and [varies depending on the situation](/en-US/docs/Web/API/setTimeout#minimum_delay_and_timeout_nesting). In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at). +The behaviors of {{ domxref("setTimeout()") }}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} have changed; the minimum allowed time has changed, and [varies depending on the situation](/en-US/docs/Web/API/setTimeout#minimum_delay_and_timeout_nesting). In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at). ## JavaScript changes diff --git a/files/en-us/mozilla/firefox/releases/50/index.md b/files/en-us/mozilla/firefox/releases/50/index.md index 43ffd5af2b4f525..02e2fe2b6699f43 100644 --- a/files/en-us/mozilla/firefox/releases/50/index.md +++ b/files/en-us/mozilla/firefox/releases/50/index.md @@ -113,7 +113,7 @@ Firefox 50 was released on November 15, 2016. This article lists key changes tha - The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source. - The interface {{domxref("IIRFilterNode")}}, which implements a general [infinite impulse response](https://en.wikipedia.org/wiki/Infinite_impulse_response) (IIR) filter, has been implemented. -- Throttling in background tabs of timers created by {{domxref("setInterval()")}} and {{domxref("setTimeout()")}} no longer occurs if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ([Firefox bug 1181073](https://bugzil.la/1181073)). +- Throttling in background tabs of timers created by {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, and {{domxref("setTimeout()")}} no longer occurs if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ([Firefox bug 1181073](https://bugzil.la/1181073)). ### Audio/Video diff --git a/files/en-us/mozilla/firefox/releases/51/index.md b/files/en-us/mozilla/firefox/releases/51/index.md index ef45d4d13a7c408..59cda96455fce2f 100644 --- a/files/en-us/mozilla/firefox/releases/51/index.md +++ b/files/en-us/mozilla/firefox/releases/51/index.md @@ -112,7 +112,7 @@ Firefox 51 was released on January 24, 2017. This article lists key changes that - Added FLAC support ([FLAC codec](https://xiph.org/flac/index.html)) in both FLAC and Ogg containers ([Firefox bug 1195723](https://bugzil.la/1195723)). Supported FLAC MIME types are: `audio/flac` and `audio/x-flac`. For FLAC in Ogg, supported MIME types are: `audio/ogg; codecs=flac`, and `video/ogg; codecs=flac`. - Added support for FLAC in MP4 (both with and without MSE) ([Firefox bug 1303888](https://bugzil.la/1303888)). -- Throttling in background tabs of timers created by {{domxref("setInterval()")}} and {{domxref("setTimeout()")}} was changed in Firefox 50 to no longer occur if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. However, this didn't resolve all scenarios in which timing-sensitive audio playback (such as music players generating individual notes using timers) could fail to work properly. For that reason, Firefox 51 no longer throttles background tabs which have an {{domxref("AudioContext")}}, even if it's not currently playing sound. +- Throttling in background tabs of timers created by {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, and {{domxref("setTimeout()")}} was changed in Firefox 50 to no longer occur if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. However, this didn't resolve all scenarios in which timing-sensitive audio playback (such as music players generating individual notes using timers) could fail to work properly. For that reason, Firefox 51 no longer throttles background tabs which have an {{domxref("AudioContext")}}, even if it's not currently playing sound. ### DOM diff --git a/files/en-us/mozilla/firefox/releases/55/index.md b/files/en-us/mozilla/firefox/releases/55/index.md index 477e75256790342..8bbc9548d70450d 100644 --- a/files/en-us/mozilla/firefox/releases/55/index.md +++ b/files/en-us/mozilla/firefox/releases/55/index.md @@ -87,7 +87,7 @@ Firefox 55 was released on August 8, 2017. This article lists key changes that a #### Workers - Workers and shared workers can now be created with an identifying `name` property. See the {{domxref("Worker.Worker", "Worker()")}} and {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructors, and the {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}} interfaces. ([Firefox bug 1364297](https://bugzil.la/1364297)). -- {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} are now subject to minimum interval throttling for tracking scripts in background tabs — see [Throttling of tracking timeout scripts](/en-US/docs/Web/API/setTimeout#throttling_of_tracking_timeout_scripts) ([Firefox bug 1355311](https://bugzil.la/1355311)). +- {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} are now subject to minimum interval throttling for tracking scripts in background tabs — see [Throttling of tracking timeout scripts](/en-US/docs/Web/API/setTimeout#throttling_of_tracking_timeout_scripts) ([Firefox bug 1355311](https://bugzil.la/1355311)). #### Service Workers/Push diff --git a/files/en-us/mozilla/firefox/releases/56/index.md b/files/en-us/mozilla/firefox/releases/56/index.md index 54cb1ded705b783..108f7c94631daa6 100644 --- a/files/en-us/mozilla/firefox/releases/56/index.md +++ b/files/en-us/mozilla/firefox/releases/56/index.md @@ -44,7 +44,7 @@ _No changes._ - The {{domxref("Gamepad.displayId")}} property has been implemented ([Firefox bug 1375816](https://bugzil.la/1375816)). - The {{domxref("PerformanceTiming.secureConnectionStart")}} property has been implemented ([Firefox bug 772589](https://bugzil.la/772589)). - Firefox used to accept `iso-2022-jp-2` sequences silently when an `iso-2022-jp` {{domxref("TextDecoder.TextDecoder","TextDecoder()")}} was instantiated, however this has now been removed to simplify the API, as no other browsers support it and no pages seem to use it. ([Firefox bug 715833](https://bugzil.la/715833)). -- The 4ms clamping behavior of {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} has been updated to be more in line with other browsers, as described in [Timeouts throttled to >=4ms](/en-US/docs/Web/API/setTimeout#timeouts_throttled_to_%3e4ms) ([Firefox bug 1378586](https://bugzil.la/1378586)). +- The 4ms clamping behavior of {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} has been updated to be more in line with other browsers, as described in [Timeouts throttled to >=4ms](/en-US/docs/Web/API/setTimeout#timeouts_throttled_to_%3e4ms) ([Firefox bug 1378586](https://bugzil.la/1378586)). - The [Page Visibility API's](/en-US/docs/Web/API/Page_Visibility_API) {{domxref("Document.visibilitychange_event", "onvisibilitychange")}} handler has been added ([Firefox bug 1333912](https://bugzil.la/1333912)). - The {{domxref("Window.showModalDialog()")}} method has been removed ([Firefox bug 981796](https://bugzil.la/981796)). - The implementation of the {{domxref("HTMLFormElement.action")}}, {{domxref("HTMLInputElement.formAction")}}, and {{domxref("HTMLButtonElement.formAction")}} properties has been updated so that they return the correct form submission URL, as per spec ([Firefox bug 1366361](https://bugzil.la/1366361)). diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md index 0c9dbe4285aad34..89a441e3211fc00 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md @@ -31,13 +31,13 @@ That means we need a way to execute our drawing functions over a period of time. ### Scheduled updates -First there's the {{domxref("setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("window.requestAnimationFrame()")}} functions, which can be used to call a specific function over a set period of time. +First there's the {{domxref("Window.setInterval", "setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} functions, which can be used to call a specific function over a set period of time. -- {{domxref("setInterval()")}} +- {{domxref("Window.setInterval", "setInterval()")}} - : Starts repeatedly executing the function specified by `function` every `delay` milliseconds. - {{domxref("setTimeout()")}} - : Executes the function specified by `function` in `delay` milliseconds. -- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} +- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} - : Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. If you don't want any user interaction you can use the `setInterval()` function, which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use `setTimeout()`. By setting listeners using {{domxref("EventTarget/addEventListener", "addEventListener()")}}, we catch any user interaction and execute our animation functions. diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md index 7e483dcab44db8d..ee59a5d5ebb6de2 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md @@ -111,7 +111,7 @@ Here is a minimalistic template, which we'll be using as a starting point for la ``` -The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by listening for the {{domxref("Window/load_event", "load")}} event on the document. This function, or one like it, could also be called using {{domxref("setTimeout()")}}, {{domxref("setInterval()")}}, or any other event handler, as long as the page has been loaded first. +The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by listening for the {{domxref("Window/load_event", "load")}} event on the document. This function, or one like it, could also be called using {{domxref("setTimeout()")}}, {{domxref("Window.setInterval", "setInterval()")}}, or any other event handler, as long as the page has been loaded first. Here is how a template would look in action. As shown here, it is initially blank. diff --git a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md index ca9fbb4d20775cd..e9c0b4857320a88 100644 --- a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -130,7 +130,7 @@ canvas.style.height = `${rect.height}px`; - Avoid the {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} property whenever possible. - Avoid [text rendering](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) whenever possible. - Try different ways to clear the canvas ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. resizing the canvas). -- With animations, use {{domxref("window.requestAnimationFrame()")}} instead of {{domxref("setInterval()")}}. +- With animations, use {{domxref("Window.requestAnimationFrame()")}} instead of {{domxref("Window.setInterval", "setInterval()")}}. - Be careful with heavy physics libraries. ## See also diff --git a/files/en-us/web/api/clearinterval/index.md b/files/en-us/web/api/clearinterval/index.md deleted file mode 100644 index 49bbec137def72b..000000000000000 --- a/files/en-us/web/api/clearinterval/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: clearInterval() global function -short-title: clearInterval() -slug: Web/API/clearInterval -page-type: web-api-global-function -browser-compat: api.clearInterval ---- - -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} - -The global **`clearInterval()`** method cancels a timed, repeating action which -was previously established by a call to {{domxref("setInterval", "setInterval()")}}. -If the parameter provided does not identify a previously established action, -this method does nothing. - -## Syntax - -```js-nolint -clearInterval(intervalID) -``` - -### Parameters - -- `intervalID` - - : The identifier of the repeated action you want to cancel. This ID was returned by - the corresponding call to `setInterval()`. - -It's worth noting that the pool of IDs used by -{{domxref("setInterval", "setInterval()")}} and -{{domxref("setTimeout()")}} are shared, which -means you can technically use `clearInterval()` and -{{domxref("clearTimeout", "clearTimeout()")}} interchangeably. -However, for clarity, you should avoid doing so. - -### Return value - -None ({{jsxref("undefined")}}). - -## Examples - -See the [`setInterval()` examples](/en-US/docs/Web/API/setInterval#examples). - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/cleartimeout/index.md b/files/en-us/web/api/cleartimeout/index.md index 342b6ba232bc56a..f42d466887e48a2 100644 --- a/files/en-us/web/api/cleartimeout/index.md +++ b/files/en-us/web/api/cleartimeout/index.md @@ -26,12 +26,7 @@ clearTimeout(timeoutID) - : The identifier of the timeout you want to cancel. This ID was returned by the corresponding call to `setTimeout()`. -It's worth noting that the pool of IDs used by -{{domxref("setTimeout()")}} and -{{domxref("setInterval()")}} are shared, which -means you can technically use `clearTimeout()` and -{{domxref("clearInterval", "clearInterval()")}} -interchangeably. However, for clarity, you should avoid doing so. +It's worth noting that the pool of IDs used by {{domxref("setTimeout()")}} and {{domxref("Window.setInterval", "setInterval()")}} are shared, which means you can technically use `clearTimeout()` and {{domxref("Window.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so. ### Return value @@ -87,6 +82,5 @@ exception is thrown. ## See also - {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("clearInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md index a864c9342db66ae..f32392e1bd21e6e 100644 --- a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md +++ b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md @@ -12,7 +12,7 @@ JavaScript is an inherently single-threaded language. It was designed in an era As time passed, of course, we know that computers have evolved into powerful multi-core systems, and JavaScript has become one of the most prolifically-used languages in the computing world. A vast number of the most popular applications are based at least in part on JavaScript code. To support this, it was necessary to find ways to allow for projects to escape the limitations of a single-threaded language. -Starting with the addition of timeouts and intervals as part of the Web API ({{domxref("setTimeout()")}} and {{domxref("setInterval()")}}), the JavaScript environment provided by Web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. To understand where {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} comes into play here, it's helpful to understand how the JavaScript runtime operates when scheduling and running code. +Starting with the addition of timeouts and intervals as part of the Web API ({{domxref("setTimeout()")}} and {{domxref("Window.setInterval", "setInterval()")}}), the JavaScript environment provided by Web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. To understand where {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} comes into play here, it's helpful to understand how the JavaScript runtime operates when scheduling and running code. ## JavaScript execution contexts @@ -105,7 +105,7 @@ There are three types of event loop: - Worker event loop - : A worker event loop is one which drives a worker; this includes all forms of workers, including basic [web workers](/en-US/docs/Web/API/Web_Workers_API), [shared workers](/en-US/docs/Web/API/SharedWorker), and [service workers](/en-US/docs/Web/API/Service_Worker_API). Workers are kept in one or more agents that are separate from the "main" code; the browser may use a single event loop for all of the workers of a given type or may use multiple event loops to handle them. - Worklet event loop - - : A [worklet](/en-US/docs/Web/API/Worklet) event loop is the event loop used to drive agents which run the code for the worklets for a given agent. This includes worklets of type {{domxref("Worklet")}} and {{domxref("AudioWorklet")}}. + - : A {{domxref("Worklet", "worklet", "", 1)}} event loop is the event loop used to drive agents which run the code for the worklets for a given agent. This includes worklets of type {{domxref("Worklet")}} and {{domxref("AudioWorklet")}}. Several windows loaded from the same {{Glossary("origin")}} may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with the processor, one after another. Keep in mind that in web parlance, the word "window" actually means "browser-level container that web content runs within," including an actual window, a tab, or a frame. @@ -119,7 +119,7 @@ The specifics may vary from browser to browser, depending on how they're impleme #### Tasks vs. microtasks -A **task** is anything scheduled to be run by the standard mechanisms such as initially starting to execute a script, asynchronously dispatching an event, and so forth. Other than by using events, you can enqueue a task by using {{domxref("setTimeout()")}} or {{domxref("setInterval()")}}. +A **task** is anything scheduled to be run by the standard mechanisms such as initially starting to execute a script, asynchronously dispatching an event, and so forth. Other than by using events, you can enqueue a task by using {{domxref("setTimeout()")}} or {{domxref("Window.setInterval", "setInterval()")}}. The difference between the task queue and the microtask queue is simple but very important: @@ -136,7 +136,7 @@ When multiple programs and multiple code objects within those programs start to The use of [web workers](/en-US/docs/Web/API/Web_Workers_API), which allow the main script to run other scripts in new threads, help to alleviate this problem. A well-designed website or app uses workers to perform any complex or lengthy operations, leaving the main thread to do as little work as possible beyond updating, laying out, and rendering the web page. -This is further alleviated by using [asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous) techniques such as [promises](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to allow the main code to continue to run while waiting for the results of a request. However, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. +This is further alleviated by using [asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous) techniques such as {{jsxref("Global_Objects/Promise", "promises", "", 1)}} to allow the main code to continue to run while waiting for the results of a request. However, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. Microtasks are another solution to this problem, providing a finer degree of access by making it possible to schedule code to run before the next iteration of the event loop begins, instead of having to wait until the next one. diff --git a/files/en-us/web/api/html_dom_api/microtask_guide/index.md b/files/en-us/web/api/html_dom_api/microtask_guide/index.md index 636d2be2ee4d99a..7c796c12640512a 100644 --- a/files/en-us/web/api/html_dom_api/microtask_guide/index.md +++ b/files/en-us/web/api/html_dom_api/microtask_guide/index.md @@ -24,7 +24,7 @@ For example, tasks get added to the task queue when: - A new JavaScript program or subprogram is executed (such as from a console, or by running the code in a {{HTMLElement("script")}} element) directly. - The user clicks an element. A task is then created and executes all event callbacks. -- A timeout or interval created with {{domxref("setTimeout()")}} or {{domxref("setInterval()")}} is reached, causing the corresponding callback to be added to the task queue. +- A timeout or interval created with {{domxref("setTimeout()")}} or {{domxref("Window.setInterval", "setInterval()")}} is reached, causing the corresponding callback to be added to the task queue. The event loop driving your code handles these tasks one after another, in the order in which they were enqueued. The oldest runnable task in the task queue will be executed during a single iteration of the event loop. After that, microtasks will be executed until the microtask queue is empty, and then the browser may choose to update rendering. Then the browser moves on to the next iteration of event loop. diff --git a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md index 24b153be706a54c..cf7c4fb265ad092 100644 --- a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md +++ b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md @@ -219,7 +219,7 @@ These are used as follows: - `adObserver` - : Will hold our {{domxref("IntersectionObserver")}} used to track the intersection between the ads and the `
` element's bounds. - `refreshIntervalID` - - : Used to store the interval ID returned by {{domxref("setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content. + - : Used to store the interval ID returned by {{domxref("Window.setInterval", "setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content. #### Setting up @@ -320,7 +320,7 @@ If the ad has transitioned to the not-intersecting state, we remove the ad from #### Handling periodic actions -Our interval handler, `handleRefreshInterval()`, is called about once per second courtesy of the call to {{domxref("setInterval()")}} made in the `startup()` function [described above](#setting_up). Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad. +Our interval handler, `handleRefreshInterval()`, is called about once per second courtesy of the call to {{domxref("Window.setInterval", "setInterval()")}} made in the `startup()` function [described above](#setting_up). Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad. ```js function handleRefreshInterval() { diff --git a/files/en-us/web/api/rtcicecandidatestats/deleted/index.md b/files/en-us/web/api/rtcicecandidatestats/deleted/index.md index 14001e60bd28748..17ae33caa156f19 100644 --- a/files/en-us/web/api/rtcicecandidatestats/deleted/index.md +++ b/files/en-us/web/api/rtcicecandidatestats/deleted/index.md @@ -35,7 +35,7 @@ value is `true`. ## Examples -In this example, {{domxref("setInterval()")}} +In this example, {{domxref("Window.setInterval", "setInterval()")}} is used to set up a function that runs periodically to display the latest statistics for candidates. Only candidates which have not been deleted are included in the output. diff --git a/files/en-us/web/api/rtcpeerconnection/getstats/index.md b/files/en-us/web/api/rtcpeerconnection/getstats/index.md index 202e414aefd2590..0f2e1d61c9d4787 100644 --- a/files/en-us/web/api/rtcpeerconnection/getstats/index.md +++ b/files/en-us/web/api/rtcpeerconnection/getstats/index.md @@ -53,7 +53,7 @@ This method does not throw exceptions; instead, it rejects the returned promise ## Examples This example creates a periodic function using -{{domxref("setInterval()")}} that collects +{{domxref("Window.setInterval", "setInterval()")}} that collects statistics for an {{domxref("RTCPeerConnection")}} every second, generating an HTML-formatted report and inserting it into a specific element in the DOM. diff --git a/files/en-us/web/api/settimeout/index.md b/files/en-us/web/api/settimeout/index.md index 33b974e39119f1a..dba8d0a52d56c7c 100644 --- a/files/en-us/web/api/settimeout/index.md +++ b/files/en-us/web/api/settimeout/index.md @@ -61,11 +61,9 @@ a worker) while the timer is still active. However, different objects use separa ## Description -Timeouts are cancelled using -{{domxref("clearTimeout()")}}. +Timeouts are cancelled using {{domxref("clearTimeout()")}}. -To call a function repeatedly (e.g., every _N_ milliseconds), consider using -{{domxref("setInterval()")}}. +To call a function repeatedly (e.g., every _N_ milliseconds), consider using {{domxref("Window.setInterval", "setInterval()")}}. ### Non-number delay values are silently coerced into numbers @@ -462,8 +460,7 @@ See also the [`clearTimeout()` example](/en-US/docs/Web/API/clearTimeout#example ## See also - [Polyfill of `setTimeout` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("clearTimeout")}} -- {{domxref("setInterval()")}} -- {{domxref("Window.requestAnimationFrame")}} -- {{domxref("Window.queueMicrotask()")}} -- {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("Window.queueMicrotask()")}} and {{domxref("WorkerGlobalScope.queueMicrotask()")}} diff --git a/files/en-us/web/api/streams_api/using_readable_streams/index.md b/files/en-us/web/api/streams_api/using_readable_streams/index.md index 845a4c5822cfdf1..2ed3af55ca25711 100644 --- a/files/en-us/web/api/streams_api/using_readable_streams/index.md +++ b/files/en-us/web/api/streams_api/using_readable_streams/index.md @@ -516,7 +516,7 @@ But a custom stream is still a `ReadableStream` instance, meaning you can attach > [!NOTE] > In order to consume a stream using {{domxref("FetchEvent.respondWith()")}}, the enqueued stream contents must be of type {{jsxref("Uint8Array")}}; for example, encoded using {{domxref("TextEncoder")}}. -The custom stream constructor has a `start()` method that uses a {{domxref("setInterval()")}} call to generate a random string every second. {{domxref("ReadableStreamDefaultController.enqueue()")}} is then used to enqueue it into the stream. When the button is pressed, the interval is cancelled, and a function called `readStream()` is invoked to read the data back out of the stream again. We also close the stream, as we've stopped enqueuing chunks to it. +The custom stream constructor has a `start()` method that uses a {{domxref("Window.setInterval", "setInterval()")}} call to generate a random string every second. {{domxref("ReadableStreamDefaultController.enqueue()")}} is then used to enqueue it into the stream. When the button is pressed, the interval is cancelled, and a function called `readStream()` is invoked to read the data back out of the stream again. We also close the stream, as we've stopped enqueuing chunks to it. ```js let interval; diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md index ac48da4881e2e88..b647bfd4cacfc7d 100644 --- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md +++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md @@ -46,7 +46,7 @@ Notice that the background moves, Alice spins, and her color changes at an offse } ``` -This changes Alice's color and her transform's rotation over 3 seconds at a constant (linear) rate and loops infinitely. In the [@keyframes](/en-US/docs/Web/CSS/@keyframes) block we can see that 30% of the way through each loop (about .9 seconds in), Alice's color changes from black to a deep burgundy then back again by the end of the loop. +This changes Alice's color and her transform's rotation over 3 seconds at a constant (linear) rate and loops infinitely. In the {{cssxref("@keyframes")}} block we can see that 30% of the way through each loop (about .9 seconds in), Alice's color changes from black to a deep burgundy then back again by the end of the loop. ### Moving it to JavaScript @@ -54,7 +54,7 @@ Now let's try creating the same animation with the Web Animations API. #### Representing keyframes -The first thing we need is to create a [Keyframe Object](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) corresponding to our CSS [@keyframes](/en-US/docs/Web/CSS/@keyframes) block: +The first thing we need is to create a [Keyframe Object](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) corresponding to our CSS {{cssxref("@keyframes")}} block: ```js const aliceTumbling = [ @@ -89,7 +89,7 @@ You'll notice a few differences here from how equivalent values are represented - The other thing you'll notice is that it's `iterations`, not `iteration-count`. > [!NOTE] -> There are a number of small differences between the terminology used in CSS Animations and the terminology used in Web Animations. For instance, Web Animations doesn't use the string `"infinite"`, but instead uses the JavaScript keyword `Infinity`. And instead of `timing-function` we use `easing`. We aren't listing an `easing` value here because, unlike CSS Animations where the default [animation-timing-function](/en-US/docs/Web/CSS/animation-timing-function) is `ease`, in the Web Animations API the default easing is `linear` — which is what we want here. +> There are a number of small differences between the terminology used in CSS Animations and the terminology used in Web Animations. For instance, Web Animations doesn't use the string `"infinite"`, but instead uses the JavaScript keyword `Infinity`. And instead of `timing-function` we use `easing`. We aren't listing an `easing` value here because, unlike CSS Animations where the default {{cssxref("animation-timing-function")}} is `ease`, in the Web Animations API the default easing is `linear` — which is what we want here. #### Bring the pieces together @@ -257,11 +257,11 @@ Animations are removed when all of the following are true: The first four conditions ensure that, without intervention by JavaScript code, the animation's effect will never change or end. The last condition ensures that the animation will never actually affect the style of any element: it has been entirely replaced. -When the animation is automatically removed, the animation's {{domxref("animation/remove_event", "remove")}} event fires. +When the animation is automatically removed, the animation's {{domxref("Animation/remove_event", "remove")}} event fires. To prevent the browser from automatically removing animations, call the animation's {{domxref("Animation.persist", "persist()")}} method. -The animation's {{domxref("animation.replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise. +The animation's {{domxref("Animation.replaceState", "replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise. ## Getting information out of animations @@ -319,7 +319,7 @@ But while working on this animation, we might change Alice's duration a lot. Wou aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2; ``` -`effect` lets us access the animation's keyframes and timing properties — `aliceChange.effect.getComputedTiming()` points to Alice's timing object — this contains her [`duration`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect). We can divide her duration in half to get the midpoint for her animation's timeline, setting her to be normal height. Now we can reverse and play her animation in either direction to make her grow smaller or larger! +`effect` lets us access the animation's keyframes and timing properties — `aliceChange.effect.getComputedTiming()` points to Alice's timing object — this contains her {{domxref("KeyframeEffect.KeyframeEffect", "duration")}}. We can divide her duration in half to get the midpoint for her animation's timeline, setting her to be normal height. Now we can reverse and play her animation in either direction to make her grow smaller or larger! And we can do the same thing when setting the cake and bottle durations: @@ -335,7 +335,7 @@ drinking.pause(); Now all three animations are linked to just one duration, which we can change easily from one place. -We can also use the Web Animations API to figure out the animation's current time. The game ends when you run out of cake to eat or empty the bottle. Which vignette players are presented with depends on how far along Alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. We can figure out whether she's on the large end or small end of her animation by getting her animation's [`currentTime`](/en-US/docs/Web/API/Animation/currentTime) and dividing it by her `activeDuration`: +We can also use the Web Animations API to figure out the animation's current time. The game ends when you run out of cake to eat or empty the bottle. Which vignette players are presented with depends on how far along Alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. We can figure out whether she's on the large end or small end of her animation by getting her animation's {{domxref("Animation.currentTime", "currentTime")}} and dividing it by her `activeDuration`: ```js const endGame = () => { @@ -366,8 +366,8 @@ const endGame = () => { CSS Animations and Transitions have their own event listeners, and these are also possible with the Web Animations API: -- [`onfinish`](/en-US/docs/Web/API/Animation/finish_event) is the event handler for the `finish` event and can be triggered manually with [`finish()`](/en-US/docs/Web/API/Animation/finish). -- [`oncancel`](/en-US/docs/Web/API/Animation/cancel_event) is the event handler for the `cancel` event and can be triggers with [`cancel()`](/en-US/docs/Web/API/Animation/cancel). +- {{domxref("Animation/finish_event", "onfinish")}} is the event handler for the `finish` event and can be triggered manually with {{domxref("Animation/finish", "finish()")}}. +- {{domxref("Animation/cancel_event", "oncancel")}} is the event handler for the `cancel` event and can be triggers with {{domxref("Animation.cancel", "cancel()")}}. Here we set the callbacks for the cake, bottle, and Alice to fire the `endGame` function: @@ -380,7 +380,7 @@ drinking.onfinish = endGame; aliceChange.onfinish = endGame; ``` -Better still, the Web Animations API also provides a [`finished`](/en-US/docs/Web/API/Animation/finished) promise that will resolve when the animation finishes, or reject if it is canceled. +Better still, the Web Animations API also provides a {{domxref("Animation.finished", "finished")}} promise that will resolve when the animation finishes, or reject if it is canceled. ## Conclusion diff --git a/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index e951c114a0875e0..f95265b72c161a3 100644 --- a/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -20,14 +20,14 @@ Some of the functions (a subset) that are common to all workers and to the main - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} - {{domxref("clearTimeout()")}} - {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} - {{domxref("WorkerGlobalScope.reportError()", "reportError()")}} -- {{domxref("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} (dedicated workers only) diff --git a/files/en-us/web/api/web_workers_api/index.md b/files/en-us/web/api/web_workers_api/index.md index ac5ba1998f6d990..de1d5ad28b2c917 100644 --- a/files/en-us/web/api/web_workers_api/index.md +++ b/files/en-us/web/api/web_workers_api/index.md @@ -44,14 +44,14 @@ Some of the functions (a subset) that are common to all workers and to the main - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} - {{domxref("clearTimeout()")}} - {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} - {{domxref("WorkerGlobalScope.reportError()", "reportError()")}} -- {{domxref("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} (dedicated workers only) diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md index 1692737287bc6bc..de669f1a8511dc1 100644 --- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md +++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md @@ -825,14 +825,14 @@ To learn how to debug web workers, see the documentation for each browser's Java You can use most standard JavaScript features inside a web worker, including: - {{domxref("Navigator")}} -- {{domxref("WorkerGlobalScope/fetch", "fetch()")}} +- {{domxref("WorkerGlobalScope.fetch", "fetch()")}} - {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}} -- {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} +- {{domxref("setTimeout()")}} and {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} The main thing you _can't_ do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then doing the changes in event handler. > [!NOTE] -> You can test whether a method is available to workers using the site: . For example, if you enter [EventSource](/en-US/docs/Web/API/EventSource) into the site on Firefox 84 you'll see that this is not supported in service workers, but is in dedicated and shared workers. +> You can test whether a method is available to workers using the site: . For example, if you enter {{domxref("EventSource")}} into the site on Firefox 84 you'll see that this is not supported in service workers, but is in dedicated and shared workers. > [!NOTE] > For a complete list of functions available to workers, see [Functions and interfaces available to workers](/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers). @@ -843,7 +843,7 @@ The main thing you _can't_ do in a Worker is directly affect the parent page. Th ## See also -- [`Worker`](/en-US/docs/Web/API/Worker) interface -- [`SharedWorker`](/en-US/docs/Web/API/SharedWorker) interface +- {{domxref("Worker")}} interface +- {{domxref("SharedWorker")}} interface - [Functions available to workers](/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) -- [`OffscreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) interface +- {{domxref("OffscreenCanvas")}} interface diff --git a/files/en-us/web/api/window/clearinterval/index.md b/files/en-us/web/api/window/clearinterval/index.md new file mode 100644 index 000000000000000..5287e9ca522a557 --- /dev/null +++ b/files/en-us/web/api/window/clearinterval/index.md @@ -0,0 +1,53 @@ +--- +title: "Window: clearInterval() method" +short-title: clearInterval() +slug: Web/API/Window/clearInterval +page-type: web-api-instance-method +browser-compat: api.clearInterval +--- + +{{APIRef("HTML DOM")}} + +The **`clearInterval()`** method of the {{domxref("Window")}} interface cancels a timed, repeating action which was previously established by a call to {{domxref("Window.setInterval", "setInterval()")}}. If the parameter provided does not identify a previously established action, this method does nothing. + +## Syntax + +```js-nolint +clearInterval(intervalID) +``` + +### Parameters + +- `intervalID` + - : The identifier of the repeated action you want to cancel. This ID was returned by + the corresponding call to `setInterval()`. + +It's worth noting that the pool of IDs used by +{{domxref("Window.setInterval", "setInterval()")}} and +{{domxref("setTimeout()")}} are shared, which +means you can technically use `clearInterval()` and +{{domxref("Window.clearInterval", "clearInterval()")}} interchangeably. +However, for clarity, you should avoid doing so. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md index 1356930751616af..2e003705bfdfb05 100644 --- a/files/en-us/web/api/window/index.md +++ b/files/en-us/web/api/window/index.md @@ -177,8 +177,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}. - {{domxref("Window.cancelIdleCallback()")}} - : Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}. -- {{domxref("clearInterval", "Window.clearInterval()")}} - - : Cancels the repeated execution set using {{domxref("setInterval()")}}. +- {{domxref("Window.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("Window.setInterval()")}}. - {{domxref("clearTimeout()", "Window.clearTimeout()")}} - : Cancels the delayed execution set using {{domxref("setTimeout()")}}. - {{domxref("Window.close()")}} @@ -241,7 +241,7 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Scrolls the current document by the specified number of pages. - {{domxref("Window.scrollTo()")}} - : Scrolls to a particular set of coordinates in the document. -- {{domxref("setInterval", "Window.setInterval()")}} +- {{domxref("Window.setInterval()")}} - : Schedules a function to execute every time a given number of milliseconds elapses. - {{domxref("setTimeout()", "Window.setTimeout()")}} - : Schedules a function to execute in a given amount of time. diff --git a/files/en-us/web/api/window/requestidlecallback/index.md b/files/en-us/web/api/window/requestidlecallback/index.md index 2519655ce62e55f..c49a0176eb77520 100644 --- a/files/en-us/web/api/window/requestidlecallback/index.md +++ b/files/en-us/web/api/window/requestidlecallback/index.md @@ -68,5 +68,5 @@ in the article [Cooperative Scheduling of Background Tasks API](/en-US/docs/Web/ - {{domxref("window.cancelIdleCallback()")}} - {{domxref("IdleDeadline")}} - {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("window.requestAnimationFrame")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/setinterval/index.md b/files/en-us/web/api/window/setinterval/index.md similarity index 91% rename from files/en-us/web/api/setinterval/index.md rename to files/en-us/web/api/window/setinterval/index.md index 67eda06f525cd03..96f2aa2bbaf3a40 100644 --- a/files/en-us/web/api/setinterval/index.md +++ b/files/en-us/web/api/window/setinterval/index.md @@ -1,16 +1,16 @@ --- -title: setInterval() global function +title: "Window: setInterval() method" short-title: setInterval() -slug: Web/API/setInterval -page-type: web-api-global-function +slug: Web/API/Window/setInterval +page-type: web-api-instance-method browser-compat: api.setInterval --- -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} +{{APIRef("HTML DOM")}} -The **`setInterval()`** method, offered on the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. +The **`setInterval()`** method of the {{domxref("Window")}} interface repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. -This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("clearInterval", "clearInterval()")}}. +This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("Window.clearInterval", "clearInterval()")}}. ## Syntax @@ -40,7 +40,7 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN) ### Return value -The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("clearInterval()")}} to cancel the interval. +The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("Window.clearInterval", "clearInterval()")}} to cancel the interval. It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code. @@ -124,8 +124,6 @@ document.getElementById("stop").addEventListener("click", stopTextColor); {{EmbedLiveSample("Example_2:_Alternating_two_colors")}} -See also: [`clearInterval()`](/en-US/docs/Web/API/clearInterval). - ## The "this" problem When you pass a method to `setInterval()` or any other function, it is invoked with the wrong [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this) value. @@ -174,7 +172,7 @@ If you need to support IE, use the [`Function.prototype.bind()`](/en-US/docs/Web The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using -{{domxref("clearInterval()")}}. +{{domxref("Window.clearInterval", "clearInterval()")}}. If you wish to have your function called _once_ after the specified delay, use {{domxref("setTimeout()")}}. @@ -235,6 +233,6 @@ interval has completed before recursing. - [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) - {{domxref("setTimeout()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("clearInterval()")}} -- {{domxref("window.requestAnimationFrame()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/window_management_api/using/index.md b/files/en-us/web/api/window_management_api/using/index.md index 89a185936d246c2..3a84ad84646d207 100644 --- a/files/en-us/web/api/window_management_api/using/index.md +++ b/files/en-us/web/api/window_management_api/using/index.md @@ -124,7 +124,7 @@ function checkWindowClose() { ``` > [!NOTE] -> In our experiments, the {{domxref("setInterval()")}} polling method shown above seemed to work best for detecting window closure in the case of multiple windows. Using events such as {{domxref("Window.beforeunload_event", "beforeunload")}}, {{domxref("Window.pagehide_event", "pagehide")}}, or {{domxref("Document.visibilitychange_event", "visibilitychange")}} proved unreliable because, when opening multiple windows at the same time, the rapid shift in focus/visibility seemed to fire the handler function prematurely. +> In our experiments, the {{domxref("Window.setInterval", "setInterval()")}} polling method shown above seemed to work best for detecting window closure in the case of multiple windows. Using events such as {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/pagehide_event", "pagehide")}}, or {{domxref("Document/visibilitychange_event", "visibilitychange")}} proved unreliable because, when opening multiple windows at the same time, the rapid shift in focus/visibility seemed to fire the handler function prematurely. > [!NOTE] > One concern with the above example is that it uses constant values to represent the size of the Chrome window UI portions in the calculations — `WINDOW_CHROME_X` and `WINDOW_CHROME_Y` — to get the window size calculations correct. To create precisely-sized windows on other future implementations of the API, you'd need to keep a small library of browser chrome sizes, and employ browser detection to discover which browser is rendering your app and choose the correct size for calculations. Or you can rely on less precise window sizes. diff --git a/files/en-us/web/api/workerglobalscope/clearinterval/index.md b/files/en-us/web/api/workerglobalscope/clearinterval/index.md new file mode 100644 index 000000000000000..f7271a79d1d3136 --- /dev/null +++ b/files/en-us/web/api/workerglobalscope/clearinterval/index.md @@ -0,0 +1,53 @@ +--- +title: "WorkerGlobalScope: clearInterval() method" +short-title: clearInterval() +slug: Web/API/WorkerGlobalScope/clearInterval +page-type: web-api-instance-method +browser-compat: api.clearInterval +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +The **`clearInterval()`** method of the {{domxref("WorkerGlobalScope")}} interface cancels a timed, repeating action which was previously established by a call to {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}}. If the parameter provided does not identify a previously established action, this method does nothing. + +## Syntax + +```js-nolint +clearInterval(intervalID) +``` + +### Parameters + +- `intervalID` + - : The identifier of the repeated action you want to cancel. This ID was returned by + the corresponding call to `setInterval()`. + +It's worth noting that the pool of IDs used by +{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} and +{{domxref("setTimeout()")}} are shared, which +means you can technically use `clearInterval()` and +{{domxref("clearTimeout", "clearTimeout()")}} interchangeably. +However, for clarity, you should avoid doing so. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/workerglobalscope/index.md b/files/en-us/web/api/workerglobalscope/index.md index 16fad76cf77033a..830d0c3d7eced76 100644 --- a/files/en-us/web/api/workerglobalscope/index.md +++ b/files/en-us/web/api/workerglobalscope/index.md @@ -54,8 +54,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Decodes a string of data which has been encoded using base-64 encoding. - {{domxref("WorkerGlobalScope.btoa()")}} - : Creates a base-64 encoded {{Glossary("ASCII")}} string from a string of binary data. -- {{domxref("clearInterval()", "WorkerGlobalScope.clearInterval()")}} - - : Cancels the repeated execution set using {{domxref("setInterval()")}}. +- {{domxref("WorkerGlobalScope.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("WorkerGlobalScope.setInterval()")}}. - {{domxref("clearTimeout()", "WorkerGlobalScope.clearTimeout()")}} - : Cancels the delayed execution set using {{domxref("setTimeout()")}}. - {{domxref("WorkerGlobalScope.createImageBitmap()")}} @@ -68,7 +68,7 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: `importScripts('foo.js', 'bar.js');`. - {{domxref("WorkerGlobalScope.queueMicrotask()")}} - : Queues a microtask to be executed at a safe time prior to control returning to the browser's event loop. -- {{domxref("setInterval()", "WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} - : Schedules a function to execute every time a given number of milliseconds elapses. - {{domxref("setTimeout()", "WorkerGlobalScope.setTimeout()")}} - : Schedules a function to execute in a given amount of time. diff --git a/files/en-us/web/api/workerglobalscope/setinterval/index.md b/files/en-us/web/api/workerglobalscope/setinterval/index.md new file mode 100644 index 000000000000000..ab0e6dd8cd1dcce --- /dev/null +++ b/files/en-us/web/api/workerglobalscope/setinterval/index.md @@ -0,0 +1,72 @@ +--- +title: "WorkerGlobalScope: setInterval() method" +short-title: setInterval() +slug: Web/API/WorkerGlobalScope/setInterval +page-type: web-api-instance-method +browser-compat: api.setInterval +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +The **`setInterval()`** method of the {{domxref("WorkerGlobalScope")}} interface repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. + +This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}}. + +This method is also available in window contexts: for a detailed description of `setInterval()`, see the {{domxref("Window.setInterval()")}} page. + +## Syntax + +```js-nolint +setInterval(code) +setInterval(code, delay) + +setInterval(func) +setInterval(func, delay) +setInterval(func, delay, arg1) +setInterval(func, delay, arg1, arg2) +setInterval(func, delay, arg1, arg2, /* …, */ argN) +``` + +### Parameters + +- `func` + - : A {{jsxref("function")}} to be executed every `delay` milliseconds. The first execution happens after `delay` milliseconds. +- `code` + - : An optional syntax allows you to include a string instead of a function, which is compiled and executed every `delay` milliseconds. + This syntax is _not recommended_ for the same reasons that make using {{jsxref("Global_Objects/eval", "eval()")}} a security risk. +- `delay` {{optional_inline}} + - : The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. Defaults to 0 if not specified. + See [Delay restrictions](#delay_restrictions) below for details on the permitted range of `delay` values. +- `arg1`, …, `argN` {{optional_inline}} + - : Additional arguments which are passed through to the function specified by _func_ once the timer expires. + +### Return value + +The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} to cancel the interval. + +It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout", "clearTimeout()")}} can technically be used interchangeably. +For clarity, however, you should try to always match them to avoid confusion when maintaining your code. + +> [!NOTE] +> The `delay` argument is converted to a signed 32-bit integer. +> This effectively limits `delay` to 2147483647 ms, roughly 24.8 days, since it's specified as a signed integer in the IDL. + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("setTimeout()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/en-us/web/http/headers/content-security-policy/script-src/index.md b/files/en-us/web/http/headers/content-security-policy/script-src/index.md index 9a4d1675dba9d91..b9bc82709d8fced 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src/index.md @@ -221,8 +221,8 @@ If a page has a CSP header and `'unsafe-eval'` isn't specified with the `script- - When passing a string literal like to methods like: `setTimeout("alert(\"Hello World!\");", 500);` - {{domxref("setTimeout()")}} - - {{domxref("setInterval()")}} - - {{domxref("window.setImmediate")}} + - {{domxref("Window.setInterval", "setInterval()")}} + - {{domxref("Window.setImmediate", "setImmediate()")}} - `window.execScript()` {{non-standard_inline}} (IE < 11 only) diff --git a/files/en-us/web/javascript/javascript_technologies_overview/index.md b/files/en-us/web/javascript/javascript_technologies_overview/index.md index 02e53d65a6169c0..a191e523cc1bf4c 100644 --- a/files/en-us/web/javascript/javascript_technologies_overview/index.md +++ b/files/en-us/web/javascript/javascript_technologies_overview/index.md @@ -67,7 +67,7 @@ The [WebIDL specification](https://webidl.spec.whatwg.org/) provides the glue be The Document Object Model (DOM) is a cross-platform, **language-independent convention** for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the **DOM tree** may be addressed and manipulated by using methods on the objects. The [W3C](/en-US/docs/Glossary/W3C) standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find: -- The document structure, a tree model, and the DOM Event architecture in [DOM core](https://dom.spec.whatwg.org/): [`Node`](/en-US/docs/Web/API/Node), [`Element`](/en-US/docs/Web/API/Element), [`DocumentFragment`](/en-US/docs/Web/API/DocumentFragment), [`Document`](/en-US/docs/Web/API/Document), [`DOMImplementation`](/en-US/docs/Web/API/DOMImplementation), [`Event`](/en-US/docs/Web/API/Event), [`EventTarget`](/en-US/docs/Web/API/EventTarget), … +- The document structure, a tree model, and the DOM Event architecture in [DOM core](https://dom.spec.whatwg.org/): {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, … - A less rigorous definition of the DOM Event Architecture, as well as specific events in [DOM events](https://w3c.github.io/uievents/). - Other things such as [DOM Traversal](https://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html) and [DOM Range](https://dom.spec.whatwg.org/#ranges). @@ -75,15 +75,15 @@ From the ECMAScript point of view, objects defined in the DOM specification are ### HTML DOM -[HTML](https://html.spec.whatwg.org/multipage/), the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the _meaning_ of elements. The HTML DOM includes such things as the `className` property on HTML elements, or APIs such as [`document.body`](/en-US/docs/Web/API/Document/body). +[HTML](https://html.spec.whatwg.org/multipage/), the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the _meaning_ of elements. The HTML DOM includes such things as the `className` property on HTML elements, or APIs such as {{domxref("Document.body")}}. -The HTML specification also defines restrictions on documents; for example, it requires all children of a [`