From 65d28af884e3d49e2798aae45f433bd672ca9896 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Thu, 11 Dec 2025 12:31:45 +0100 Subject: [PATCH 1/4] chore(deps): set packageManager field (#42343) * chore(deps): bump node from v22 to v24 * chore(deps): move packageManager field next to engines --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 9e0175225c24af0..6ffee4f27fb6d20 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "type": "git", "url": "git+https://github.com/mdn/content.git" }, + "packageManager": "npm@11.6.2", "engines": { "node": ">=24" }, From 0563b7d83916b234fa637483211889e573df9440 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 11 Dec 2025 17:39:51 +0530 Subject: [PATCH 2/4] Synchronize with BCD v7.2.0 (#42344) Co-authored-by: OnkarRuikar --- files/en-us/web/api/interestevent/index.md | 4 ++-- .../web/api/navigationhistoryentry/dispose_event/index.md | 4 +--- files/en-us/web/api/navigationhistoryentry/index.md | 2 +- files/en-us/web/api/navigationprecommitcontroller/index.md | 6 ++---- .../web/api/navigationprecommitcontroller/redirect/index.md | 4 +--- 5 files changed, 7 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/api/interestevent/index.md b/files/en-us/web/api/interestevent/index.md index 8504dbbc10d5071..0477c873fdc5bea 100644 --- a/files/en-us/web/api/interestevent/index.md +++ b/files/en-us/web/api/interestevent/index.md @@ -18,14 +18,14 @@ This is the event object for the {{domxref("HTMLElement.interest_event", "intere ## Constructor -- {{DOMxRef("InterestEvent.InterestEvent", "InterestEvent()")}} {{experimental_inline}} +- {{DOMxRef("InterestEvent.InterestEvent", "InterestEvent()")}} {{experimental_inline}} {{non-standard_inline}} - : Creates an `InterestEvent` object. ## Instance properties _This interface inherits properties from its parent, {{DOMxRef("Event")}}._ -- {{DOMxRef("InterestEvent.source")}} {{ReadOnlyInline}} {{experimental_inline}} +- {{DOMxRef("InterestEvent.source")}} {{ReadOnlyInline}} {{experimental_inline}} {{non-standard_inline}} - : An {{domxref("Element")}} object instance that represents the interest invoker element on which interest was shown or lost to fire the event. ## Examples diff --git a/files/en-us/web/api/navigationhistoryentry/dispose_event/index.md b/files/en-us/web/api/navigationhistoryentry/dispose_event/index.md index 16f030ea60aaf49..5e07658d5df7ee9 100644 --- a/files/en-us/web/api/navigationhistoryentry/dispose_event/index.md +++ b/files/en-us/web/api/navigationhistoryentry/dispose_event/index.md @@ -3,12 +3,10 @@ title: "NavigationHistoryEntry: dispose event" short-title: dispose slug: Web/API/NavigationHistoryEntry/dispose_event page-type: web-api-event -status: - - experimental browser-compat: api.NavigationHistoryEntry.dispose_event --- -{{APIRef("Navigation API")}}{{SeeCompatTable}} +{{APIRef("Navigation API")}} The **`dispose`** event of the {{domxref("NavigationHistoryEntry")}} interface is fired when the entry is no longer part of the history entry list. diff --git a/files/en-us/web/api/navigationhistoryentry/index.md b/files/en-us/web/api/navigationhistoryentry/index.md index 28b8b530ec5a675..f91a268d2c9e619 100644 --- a/files/en-us/web/api/navigationhistoryentry/index.md +++ b/files/en-us/web/api/navigationhistoryentry/index.md @@ -39,7 +39,7 @@ _Inherits methods from its parent, {{DOMxRef("EventTarget")}}._ ## Events -- {{domxref("NavigationHistoryEntry/dispose_event", "dispose")}} {{Experimental_Inline}} +- {{domxref("NavigationHistoryEntry/dispose_event", "dispose")}} - : Fires when the entry is no longer part of the history entry list. ## Examples diff --git a/files/en-us/web/api/navigationprecommitcontroller/index.md b/files/en-us/web/api/navigationprecommitcontroller/index.md index 32adf5a05291b07..5a94e2b7f20df62 100644 --- a/files/en-us/web/api/navigationprecommitcontroller/index.md +++ b/files/en-us/web/api/navigationprecommitcontroller/index.md @@ -2,12 +2,10 @@ title: NavigationPrecommitController slug: Web/API/NavigationPrecommitController page-type: web-api-interface -status: - - experimental browser-compat: api.NavigationPrecommitController --- -{{APIRef("Navigation API")}}{{SeeCompatTable}} +{{APIRef("Navigation API")}} The **`NavigationPrecommitController`** interface of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} defines redirect behavior for a navigation [precommit handler](/en-US/docs/Web/API/NavigateEvent/intercept#precommithandler). @@ -15,7 +13,7 @@ The **`NavigationPrecommitController`** interface of the {{domxref("Navigation A ## Instance methods -- {{domxref("NavigationPrecommitController.redirect", "redirect()")}} {{Experimental_Inline}} +- {{domxref("NavigationPrecommitController.redirect", "redirect()")}} - : Redirects the browser to a specified URL and specifies history behavior and any desired state information. ## Description diff --git a/files/en-us/web/api/navigationprecommitcontroller/redirect/index.md b/files/en-us/web/api/navigationprecommitcontroller/redirect/index.md index c7b1c083a11c6fe..b055504a44f6095 100644 --- a/files/en-us/web/api/navigationprecommitcontroller/redirect/index.md +++ b/files/en-us/web/api/navigationprecommitcontroller/redirect/index.md @@ -3,12 +3,10 @@ title: "NavigationPrecommitController: redirect() method" short-title: redirect() slug: Web/API/NavigationPrecommitController/redirect page-type: web-api-instance-method -status: - - experimental browser-compat: api.NavigationPrecommitController.redirect --- -{{APIRef("Navigation API")}}{{SeeCompatTable}} +{{APIRef("Navigation API")}} The **`redirect()`** method of the {{domxref("NavigationPrecommitController")}} interface redirects the browser to a specified URL and specifies history behavior and any desired state information. From a4eac241284f99e32d07ced5bb2e54ec2cf071f6 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 11 Dec 2025 13:43:06 +0100 Subject: [PATCH 3/4] Update `view-timeline-name` property (#42114) * Update `view-timeline-name` property Updated the description and syntax for the `view-timeline-name` property to clarify its usage and allowed values. include multiple and globalss * Fallback for unsupported view-timeline-name Added a fallback message for unsupported browsers. * Clean up hidden block Removed unnecessary code block for hidden CSS. * typo * Add padding to unsupported view-timeline-name message * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya * Update description of view-timeline-name property Clarified the usage and functionality of the view-timeline-name property, including its relationship with the view progress timeline and the shorthand property. --------- Co-authored-by: Dipika Bhattacharya --- .../properties/view-timeline-name/index.md | 59 +++++++++++++------ 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/files/en-us/web/css/reference/properties/view-timeline-name/index.md b/files/en-us/web/css/reference/properties/view-timeline-name/index.md index 8f7f25b6c93f47a..50180cfb4796262 100644 --- a/files/en-us/web/css/reference/properties/view-timeline-name/index.md +++ b/files/en-us/web/css/reference/properties/view-timeline-name/index.md @@ -6,34 +6,42 @@ browser-compat: css.properties.view-timeline-name sidebar: cssref --- -The **`view-timeline-name`** [CSS](/en-US/docs/Web/CSS) property is used to define the name of a _named view progress timeline_, which is progressed through based on the change in visibility of an element (known as the _subject_) inside a scrollable element (_scroller_). `view-timeline` is set on the subject. - -The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller and 100% when it reaches the opposite edge. -The name is then referenced in an {{cssxref("animation-timeline")}} declaration to indicate the element that will be animated as the timeline progresses. This can be the subject element, but it doesn't have to be — you can animate a different element as the subject moves through the scrolling area. - -> [!NOTE] -> If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created. - -The `view-timeline-name`, {{cssxref("view-timeline-axis")}} and {{cssxref("view-timeline-inset")}} properties can also be set using the {{cssxref("view-timeline")}} shorthand property. +The **`view-timeline-name`** [CSS](/en-US/docs/Web/CSS) property specifies the names of one or more [named view progress timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline) associated with the element. ## Syntax ```css +/* Keyword value */ view-timeline-name: none; + +/* Custom identifier */ view-timeline-name: --custom_name_for_timeline; + +/* Multiple identifiers */ +view-timeline-name: --first_timeline_name, --another_timeline_name; + +/* Global values */ +view-timeline-name: inherit; +view-timeline-name: initial; +view-timeline-name: revert; +view-timeline-name: revert-layer; +view-timeline-name: unset; ``` ### Values -Allowed values for `view-timeline-name` are: - - `none` - - : The timeline has no name. + - : Indicates that the timeline has no name. This is the default value. - `` - - : An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an {{cssxref("animation-timeline")}} property. + - : Specifies a comma-separated list of {{cssxref("dashed-ident")}} custom name identifiers. All `` values must start with `--`, which helps avoid name clashes with standard CSS keywords. - > [!NOTE] - > [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) values must start with `--`, which helps avoid name clashes with standard CSS keywords. +## Description + +The `view-timeline-name` property is used to set the name of a [view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines). A view progress timeline is progressed through based on the change in visibility of an element, called the _subject_, inside a scrollable element, called the _scroller_. The `view-timeline-name` property is set on the subject. You can also set `view-timeline-name` by using the {{cssxref("view-timeline")}} shorthand property. + +If the subject's named scroller element does not overflow its container in the [axis dimension](/en-US/docs/Web/CSS/view-timeline-axis) or if the overflow is hidden or clipped, no scroll progress timeline will be created. + +Once created, the `` name values specified can be referenced in {{cssxref("animation-timeline")}} declarations to indicate the element that will be animated as the timeline progresses. ## Formal definition @@ -149,6 +157,20 @@ Last, an animation is specified on the element that animates its opacity and sca } ``` +```css hidden +@layer no-support { + @supports not (view-timeline-name: none) { + body::before { + content: "Your browser doesn't support the `view-timeline-name` property."; + background-color: wheat; + display: block; + text-align: center; + padding: 1em; + } + } +} +``` + #### Result Scroll to see the subject element being animated. @@ -166,6 +188,7 @@ Scroll to see the subject element being animated. ## See also - {{cssxref("animation-timeline")}} -- {{cssxref("timeline-scope")}} -- {{cssxref("view-timeline")}}, {{cssxref("view-timeline-axis")}}, {{cssxref("view-timeline-inset")}} -- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) +- {{cssxref("view-timeline")}} +- [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines) +- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module +- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module From f09990da6ef298d6158b5e7739533be2017caaa6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 11 Dec 2025 12:57:55 +0000 Subject: [PATCH 4/4] chore(deps): bump @mdn/fred from 1.9.6 to 1.9.7 (#42352) --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3fd7e14acebe29..f1d1c5302107581 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", - "@mdn/fred": "1.9.6", + "@mdn/fred": "1.9.7", "@octokit/rest": "^22.0.1", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", @@ -1023,9 +1023,9 @@ "license": "MIT" }, "node_modules/@mdn/fred": { - "version": "1.9.6", - "resolved": "https://registry.npmjs.org/@mdn/fred/-/fred-1.9.6.tgz", - "integrity": "sha512-Onlmrn9uKYAOEfGLGCqtktjY1YVuZdiLa8+CKsdr0v2eUsxgwI5H9sDjFCj609khBvkF+TyuD6g99eIoECVLSQ==", + "version": "1.9.7", + "resolved": "https://registry.npmjs.org/@mdn/fred/-/fred-1.9.7.tgz", + "integrity": "sha512-2qQs/cVQDfBf4lQxM3RqjcEI7Nha62ozBK8tROD4oZgtqvzoowu/K6RFjKrBZ8fyLaEjuZslrTl/VyWM7d+4mg==", "license": "MPL-2.0", "dependencies": { "@codemirror/lang-css": "^6.3.1", @@ -1038,7 +1038,7 @@ "@lit-labs/ssr": "^3.3.1", "@lit-labs/ssr-client": "^1.1.7", "@lit/task": "^1.0.3", - "@mdn/rari": "0.2.7", + "@mdn/rari": "0.2.8", "@mdn/watify": "^1.1.7", "@mozilla/glean": "^5.0.7", "codemirror": "^6.0.1", @@ -1066,9 +1066,9 @@ } }, "node_modules/@mdn/rari": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/@mdn/rari/-/rari-0.2.7.tgz", - "integrity": "sha512-by0rLyfOteChwyq72YarW8xRHTeg7eU5f9zUaOQVPEOLq2+KoP98Sg+7bZbQ7Fg2qY91M3Gq8MmFfimpiSk9lA==", + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@mdn/rari/-/rari-0.2.8.tgz", + "integrity": "sha512-+tgM8MLStIlEPxmHjLSbEYIosSu2odGe48gPL2QLLYSoQtEjdiyFTh5stcbYZiG7Q2yKyc/wrl+GpQlUJH1tjA==", "hasInstallScript": true, "license": "MPL-2.0", "dependencies": { diff --git a/package.json b/package.json index 6ffee4f27fb6d20..a5416ffd7c6e2d7 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", - "@mdn/fred": "1.9.6", + "@mdn/fred": "1.9.7", "@octokit/rest": "^22.0.1", "ajv": "^8.17.1", "ajv-formats": "^3.0.1",