From 9ad94afb35bf16a6be881d39eb20b9c13aa5097e Mon Sep 17 00:00:00 2001 From: Gleb BUSHUKIN <58744878+NemoZon@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:13:47 +0100 Subject: [PATCH 01/59] add mention of property access on numeric literals (#37681) * add mention of numeric literals * fix: add no-lint & delete useless example * Apply suggestions from code review --------- Co-authored-by: Joshua Chen --- .../errors/identifier_after_number/index.md | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md b/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md index 611be8a22a681c1..26fe9e474635760 100644 --- a/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md +++ b/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md @@ -42,9 +42,6 @@ const 1life = "foo"; const foo = 1life; // SyntaxError: identifier starts immediately after numeric literal - -alert(1.foo); -// SyntaxError: identifier starts immediately after numeric literal ``` You will need to rename your variable to avoid the leading number. @@ -54,6 +51,26 @@ const life1 = "foo"; const foo = life1; ``` +In JavaScript, there is a syntactic peculiarity when calling properties or methods on numbers. If you want to call a method on an integer, you cannot immediately use a dot after the number because the dot is interpreted as the start of a decimal fraction, causing the parser to see the method's name as an identifier immediately after a number literal. To avoid this, you need to either wrap the number in parentheses or use a double dot, where the first dot is a decimal point for the number literal and the second dot is the property accessor. + +```js-nolint example-bad +alert(typeof 1.toString()) +// SyntaxError: identifier starts immediately after numeric literal +``` + +Correct ways to call methods on numbers: + +```js-nolint example-good +// Wrap the number in parentheses +alert(typeof (1).toString()); + +// Add an extra dot for the number literal +alert(typeof 2..toString()); + +// Use square brackets +alert(typeof 3["toString"]()); +``` + ## See also - [Lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar) From 77be0bd59aea58e15e4ab6d2c5d9c31a8e0f95f1 Mon Sep 17 00:00:00 2001 From: Gleb BUSHUKIN <58744878+NemoZon@users.noreply.github.com> Date: Thu, 16 Jan 2025 21:01:58 +0100 Subject: [PATCH 02/59] Delete unnecessary sentence (#37674) Update index.md --- .../security/practical_implementation_guides/cookies/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/security/practical_implementation_guides/cookies/index.md b/files/en-us/web/security/practical_implementation_guides/cookies/index.md index 26722eda74c9cc9..e7aa379cee4efa8 100644 --- a/files/en-us/web/security/practical_implementation_guides/cookies/index.md +++ b/files/en-us/web/security/practical_implementation_guides/cookies/index.md @@ -25,7 +25,7 @@ To minimize the scope for cookie vulnerabilities on your site, limit access to c - `HttpOnly` - : Cookies that don't require access from JavaScript should have the `HttpOnly` directive set to block access, such as from {{domxref("Document.cookie")}}. It is particularly important that session identifiers don't have JavaScript access, to help prevent attacks such as CSRF. - `Expires` and `Max-Age` - - : Cookies should expire as soon as they are no longer needed. Session identifiers in particular should expire as quickly as possible. `Expires` is preferred unless you need to support IE < 8, in which case use `Max-Age`. + - : Cookies should expire as soon as they are no longer needed. Session identifiers in particular should expire as quickly as possible. - `Expires`: Sets an absolute expiration date for a given cookie. - `Max-Age`: Sets a relative expiration date for a given cookie. > **Note:** `Expires` has been available for longer than `Max-Age`; however, `Max-Age` is less error-prone, and takes precedence when both are set. The rationale behind this is that when you set an `Expires` date and time, they're relative to the client on which the cookie is being set. If the server is set to a different time, this could cause errors. From d6528c3d7881662e6aaa77cd2a1a49e3af349088 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Thu, 16 Jan 2025 22:06:30 +0200 Subject: [PATCH 03/59] Fix outdated syntax and double intialized variable. (#37683) * Fix outdated syntax and double intialized variable. Fixed an outdated syntax and double initialization of the `request` variable, which leads to an error. * Fix a minor typo. --- files/en-us/web/api/request/credentials/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/request/credentials/index.md b/files/en-us/web/api/request/credentials/index.md index 0179093ad859c4a..170685b1f8e4dbe 100644 --- a/files/en-us/web/api/request/credentials/index.md +++ b/files/en-us/web/api/request/credentials/index.md @@ -31,7 +31,7 @@ In the following snippet, we create a new request using the {{domxref("Request.R ```js const request = new Request("flowers.jpg"); -const request = request.request; // returns "same-origin" by default +const credentials = request.credentials; // returns "same-origin" by default ``` ## Specifications From ab65140829d7c4df540fd859c0a97a78b3b1fd33 Mon Sep 17 00:00:00 2001 From: Stephen Mutheu Muya Date: Thu, 16 Jan 2025 23:11:17 +0300 Subject: [PATCH 04/59] fix: auxclick, click, contentmenu events updated (#37679) * auxclick, click, contentmenu events updated * Apply suggestions from code review --------- Co-authored-by: Joshua Chen --- files/en-us/web/api/element/auxclick_event/index.md | 2 +- files/en-us/web/api/element/click_event/index.md | 2 +- files/en-us/web/api/element/contextmenu_event/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/element/auxclick_event/index.md b/files/en-us/web/api/element/auxclick_event/index.md index 6664cdf78183e39..cea059f33c0a9f1 100644 --- a/files/en-us/web/api/element/auxclick_event/index.md +++ b/files/en-us/web/api/element/auxclick_event/index.md @@ -29,7 +29,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}. {{InheritanceDiagram("PointerEvent")}} > [!NOTE] -> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari. +> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information. ## Event properties diff --git a/files/en-us/web/api/element/click_event/index.md b/files/en-us/web/api/element/click_event/index.md index e1bdd209c5e687a..84dd872cd50adcb 100644 --- a/files/en-us/web/api/element/click_event/index.md +++ b/files/en-us/web/api/element/click_event/index.md @@ -37,7 +37,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}. {{InheritanceDiagram("PointerEvent")}} > [!NOTE] -> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari. +> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information. ## Event properties diff --git a/files/en-us/web/api/element/contextmenu_event/index.md b/files/en-us/web/api/element/contextmenu_event/index.md index 851c96190951549..b61ed03bd58bc08 100644 --- a/files/en-us/web/api/element/contextmenu_event/index.md +++ b/files/en-us/web/api/element/contextmenu_event/index.md @@ -34,7 +34,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}. {{InheritanceDiagram("PointerEvent")}} > [!NOTE] -> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari. +> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information. ## Event properties From c5806a7b25ce499217abe53e53f909b027d3734f Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Thu, 16 Jan 2025 22:43:43 +0200 Subject: [PATCH 05/59] Fix typo in 'justify-self' documentation: change 'an intrinsic sizes' to 'an intrinsic size' (#37684) Fix typo in 'justify-self' documentation: change 'an intrinsic sizes' to 'an intrinsic size' --- files/en-us/web/css/justify-self/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md index bff8949755cce3c..735151fd70670a0 100644 --- a/files/en-us/web/css/justify-self/index.md +++ b/files/en-us/web/css/justify-self/index.md @@ -77,7 +77,7 @@ This property can take one of three different forms: - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes. - In table cell layouts, this keyword has no meaning as this property is _ignored_. - In flexbox layouts, this keyword has no meaning as this property is _ignored._ - - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`. + - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic size where it behaves like `start`. - `start` - : The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis. From 6507fce619e492a688a1141b40e813a3ead194ee Mon Sep 17 00:00:00 2001 From: Anika Islam Neha <76821812+aneha15@users.noreply.github.com> Date: Fri, 17 Jan 2025 07:28:35 +0600 Subject: [PATCH 06/59] Fix typos (#37539) (#37671) --- .../aligning_items_in_a_flex_container/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index e462ae603d42677..83687c0cdee7a4f 100644 --- a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -190,7 +190,7 @@ You can try this out in the example below, which has a flex container with `flex ## Aligning content on the cross axis with the `align-content` property -So far, we have focused on aligning items or an individual items inside the area defined by a {{glossary("flex_container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**. +So far, we have focused on aligning items or individual items inside the area defined by a {{glossary("flex container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**. For `align-content` to have an effect, the cross axis dimension (the height in this case) of the flex container must be greater than needed to display the items. It then works on all the items as a set. The `align-content` values dictate what happens with the extra available space and the alignment of the entire set of items within it. @@ -307,7 +307,7 @@ In our initial example with `display: flex` on the container, the items display ![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.](align6.png) -The `baseline` values aren't relevant in this dimension. Otherwise, `justify-content` property accepts the same values as `align-content`. +The `baseline` values aren't relevant in this dimension. Otherwise, the `justify-content` property accepts the same values as `align-content`. - `justify-content: flex-start` - `justify-content: flex-end` @@ -514,7 +514,7 @@ In this live example, the flex items are arranged in a row with the basic flex v To create a gap between flex items, use the {{cssxref("gap")}}, {{cssxref("column-gap")}}, and {{cssxref("row-gap")}} properties. The {{cssxref("column-gap")}} property creates gaps between items in a row. The {{cssxref("row-gap")}} property creates gaps between flex lines when you have {{cssxref("flex-wrap")}} set to `wrap`. The {{cssxref("gap")}} property is a shorthand that sets both `row-gap` and `column-gap`. -The gap between flex items or between flex line depends on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines. +The gaps between flex items or flex lines depend on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines. ```html live-sample___gap
From 4030a3382d2f2ee9a2aa6232c1fbb5724a27cc8b Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 17 Jan 2025 09:30:11 +0800 Subject: [PATCH 07/59] Update `filter-function-list` to `filter-value-list` (#37633) * Update `filter-function-list` to `filter-value-list` * update --- files/en-us/web/css/backdrop-filter/index.md | 2 +- files/en-us/web/svg/attribute/filter/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/backdrop-filter/index.md b/files/en-us/web/css/backdrop-filter/index.md index 03b805456f8be22..7b13c3f7fface61 100644 --- a/files/en-us/web/css/backdrop-filter/index.md +++ b/files/en-us/web/css/backdrop-filter/index.md @@ -47,7 +47,7 @@ backdrop-filter: unset; - `none` - : No filter is applied to the backdrop. -- `` +- `` - : A space-separated list of {{cssxref("<filter-function>")}}s or an [SVG filter](/en-US/docs/Web/SVG/Element/filter) that will be applied to the backdrop. CSS ``s include {{CSSxRef("filter-function/blur", "blur()")}}, {{CSSxRef("filter-function/brightness", "brightness()")}}, {{CSSxRef("filter-function/contrast", "contrast()")}}, {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}}, {{CSSxRef("filter-function/grayscale", "grayscale()")}}, {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}}, {{CSSxRef("filter-function/invert", "invert()")}}, {{CSSxRef("filter-function/opacity", "opacity()")}}, {{CSSxRef("filter-function/saturate", "saturate()")}}, and {{CSSxRef("filter-function/sepia", "sepia()")}}. ## Formal definition diff --git a/files/en-us/web/svg/attribute/filter/index.md b/files/en-us/web/svg/attribute/filter/index.md index 5538eb7268da536..8611b53c68697bd 100644 --- a/files/en-us/web/svg/attribute/filter/index.md +++ b/files/en-us/web/svg/attribute/filter/index.md @@ -49,7 +49,7 @@ svg { title="Single bar: exactly one of the entities must be present" >| - <filter-function-list> + <filter-value-list> From a09c221ec70c550da9939d2d105defc1d75ec322 Mon Sep 17 00:00:00 2001 From: Jacob Cassidy Date: Fri, 17 Jan 2025 08:31:39 +0700 Subject: [PATCH 08/59] Fix displayed URL titles for Specifications section (#37541) Fix displayed URL title for specifications --- files/en-us/web/css/css_overflow/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_overflow/index.md b/files/en-us/web/css/css_overflow/index.md index 59a8120532db5b6..b94c2a392155219 100644 --- a/files/en-us/web/css/css_overflow/index.md +++ b/files/en-us/web/css/css_overflow/index.md @@ -3,8 +3,8 @@ title: CSS overflow slug: Web/CSS/CSS_overflow page-type: css-module spec-urls: - - https://drafts.csswg.org/css-overflow-3 - - https://drafts.csswg.org/css-overflow-4 + - https://drafts.csswg.org/css-overflow-3/ + - https://drafts.csswg.org/css-overflow-4/ --- {{CSSRef}} From 232dc9186a6d79d7e12b3000999ad026d63e995e Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Fri, 17 Jan 2025 10:58:03 +0800 Subject: [PATCH 09/59] fix: correct gfm syntax (#37688) --- .../http/headers/content-security-policy/index.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) 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 5236dfab2603318..3443265a5b127b2 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 @@ -207,7 +207,8 @@ If a directive contains a nonce and `unsafe-inline`, then the browser ignores `u See [Nonces](/en-US/docs/Web/HTTP/CSP#nonces) in the CSP guide for more usage information. -> [!NOTE] Nonce source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements. +> [!NOTE] +> Nonce source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements. ### '\-' @@ -230,7 +231,8 @@ If a directive contains a hash and `unsafe-inline`, then the browser ignores `un See [Hashes](/en-US/docs/Web/HTTP/CSP#hashes) in the CSP guide for more usage information. -> [!NOTE] Hash source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements. +> [!NOTE] +> Hash source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements. ### \ @@ -281,7 +283,8 @@ By default, if a CSP contains a `default-src` or a `script-src` directive, then The `unsafe-eval` keyword can be used to undo this protection, allowing dynamic evaluation of strings as JavaScript. -> [!WARNING] Developers should avoid `'unsafe-eval'`, because it defeats much of the purpose of having a CSP. +> [!WARNING] +> Developers should avoid `'unsafe-eval'`, because it defeats much of the purpose of having a CSP. See [`eval()` and similar APIs](/en-US/docs/Web/HTTP/CSP#eval_and_similar_apis) in the CSP guide for more usage information. @@ -306,7 +309,8 @@ Similarly, if a CSP contains `default-src` or a `style-src` directive, then inli The `unsafe-inline` keyword can be used to undo this protection, allowing all these forms to be loaded. -> [!WARNING] Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP. +> [!WARNING] +> Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP. See [Inline JavaScript](/en-US/docs/Web/HTTP/CSP#inline_javascript) in the CSP guide for more usage information. @@ -322,7 +326,8 @@ script-src 'unsafe-hashes' 'sha256-cd9827ad...' If the hash value matches the hash of an inline event handler attribute value or of a `style` attribute value, then the code will be allowed to execute. -> [!WARNING] The `'unsafe-hashes'` value is unsafe. +> [!WARNING] +> The `'unsafe-hashes'` value is unsafe. > > In particular, it enables an attack in which the content of the inline event handler attribute is injected into the document as an inline `