From 6e46ba1a7ac7aa2268afd0ecd079f221ef6d9af4 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Fri, 20 Mar 2026 22:45:31 +1100 Subject: [PATCH 01/11] FF149 @container optional (#43502) * FF149 @container optional * Fix a few sloppy bits --- .../reference/at-rules/@container/index.md | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/reference/at-rules/@container/index.md b/files/en-us/web/css/reference/at-rules/@container/index.md index ebe7731732d3694..ce41e86931d5253 100644 --- a/files/en-us/web/css/reference/at-rules/@container/index.md +++ b/files/en-us/web/css/reference/at-rules/@container/index.md @@ -10,9 +10,12 @@ The **`@container`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Gu Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the queried container size, [``](#container_style_queries), or scroll-state changes. -The {{cssxref("container-name")}} property specifies a list of query container names. These names can be used by `@container` rules to filter which query containers are targeted. The optional, case-sensitive `` filters the query containers that are targeted by the query. +The condition must specify one or both of {{cssxref("container-name")}} and ``. -Once an eligible query container has been selected for an element, each container feature in the `` is evaluated against that query container. +The {{cssxref("container-name")}} property specifies a list of query container names, which are used to filter which containers are targeted by the `@container` rules. +The container features in the `` are evaluated against the selected containers. +If no `` is specified, the `` features are evaluated against the nearest ancestor query container that has the matching [`container-type`](/en-US/docs/Web/CSS/Reference/Properties/container-type). +If no `` is specified, named containers are selected. ## Syntax @@ -31,6 +34,13 @@ Once an eligible query container has been selected for an element, each containe } } +/* With a only (query is optional) */ +@container sidebar { + h2 { + background: blue; + } +} + /* With a */ @container scroll-state(scrollable: top) { .back-to-top-link { @@ -64,10 +74,11 @@ Once an eligible query container has been selected for an element, each containe ### Parameters - `` - - : An optional `` and a ``. Styles defined in the `` are applied if the condition is true. - - `` - - : Optional. The name of the container that the styles will be applied to when the query evaluates to true, specified as an {{cssxref("ident")}}. - - `` + - : One or both of `` and ``. + Styles defined in the `` are applied if the condition is `true`. + - `` {{optional_inline}} + - : The name of the container that the styles will be applied to when the query evaluates to `true`, specified as an {{cssxref("ident")}}. + - `` {{optional_inline}} - : A set of features that are evaluated against the query container when the size, [``](#container_style_queries), or scroll-state of the container changes. ### Logical keywords in container queries From a4fdc4181944845704f935e735ec09db1894aba2 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Fri, 20 Mar 2026 22:47:32 +1100 Subject: [PATCH 02/11] FF149 ExprFeatures: CSSNumericalValue.to() + Relnote (#43425) FF149 ExprFeaturs: CSSNumericalValue.to() + Relnote --- .../firefox/experimental_features/index.md | 16 ++++++++++++++++ .../en-us/mozilla/firefox/releases/149/index.md | 5 +++++ 2 files changed, 21 insertions(+) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 88fbb8a6af4086a..2036e40824b07ea 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -399,6 +399,22 @@ The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rul ## APIs +### CSS Typed Object Model Level 1 + +Implementation work has started on the [CSS Typed OM Level 1](https://drafts.css-houdini.org/css-typed-om/). +For example, the {{domxref("CSSNumericValue/to","to()")}} method of the {{domxref("CSSNumericValue")}} interface is supported for converting a CSS numeric value from one unit to another. +([Firefox bug 1278697](https://bugzil.la/1278697)). + +| Release channel | Version added | Enabled by default? | +| ----------------- | ------------- | ------------------- | +| Nightly | 149 | No | +| Developer Edition | 149 | No | +| Beta | 149 | No | +| Release | 149 | No | + +- `layout.css.typed-om.enabled` + - : Set to `true` to enable. + ### Notification actions and maxActions properties The {{domxref("Notification/actions","actions")}} read-only property and the [`maxActions`](/en-US/docs/Web/API/Notification/maxActions_static) static read-only property of the {{domxref("Notification")}} interface are supported in Nightly on desktop. diff --git a/files/en-us/mozilla/firefox/releases/149/index.md b/files/en-us/mozilla/firefox/releases/149/index.md index 828d598d9d5f13a..8113d4a7b9d146f 100644 --- a/files/en-us/mozilla/firefox/releases/149/index.md +++ b/files/en-us/mozilla/firefox/releases/149/index.md @@ -151,3 +151,8 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil - **`@container style()` queries** (Nightly): `layout.css.style-queries.enabled` The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rule supports [`style()`](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries) queries. This allows you to check if a container has a valid CSS declaration, a CSS property, or a custom property, and apply styles to its children accordingly. ([Firefox bug 2014404](https://bugzil.la/2014404)). + +- **CSS Typed Object Model Level 1**: `layout.css.typed-om.enabled` + + The CSS Typed Object Model Level 1 specification is being implemented. + In this release, support for the {{domxref("CSSNumericValue/to","to()")}} method of the {{domxref("CSSNumericValue")}} interface was added, allowing the conversion of a CSS numeric value from one unit to another. ([Firefox bug 1278697](https://bugzil.la/1278697)). From e6f2bf43b5c3adb492ca11261ea5cf71dd3fa935 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 20 Mar 2026 08:10:47 -0400 Subject: [PATCH 03/11] chore: Update to-do notifications tutorial to match code in dom-examples (#42954) update to match code in dom-examples --- .../checking_when_a_deadline_is_due/index.md | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md b/files/en-us/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md index 411835134583e73..713837d7ad1e085 100644 --- a/files/en-us/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md +++ b/files/en-us/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md @@ -26,7 +26,21 @@ To provide a reasonable user experience on mobile devices, and to cut down on am - A text input for entering a title for your to-do list. This is the least avoidable bit of user typing. - Number inputs for the hour and minute parts of the deadline. On browsers that support `type="number"`, you get a nice little up and down arrow number picker. On mobile platforms you tend to get a numeric keypad for entering data, which is helpful. On others you just get a standard text input, which is okay. -- {{HTMLElement("select")}} elements for inputting the day, month and year of the deadline. Because these values are the most ambiguous for users to enter (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?), I decided the best solution was to give them a choice to pick from, which also saves on annoying typing for mobile users. The days are recorded as numerical days of the month, the months are recorded as full month names, and the years are recorded as full four digit year numbers. +- {{HTMLElement("select")}} elements for inputting the day, month and year of the deadline. Because these values are the most ambiguous for users to enter (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?), I decided the best solution was to give them a choice to pick from, which also saves on annoying typing for mobile users. The days are recorded as numerical days of the month, the months are recorded as full month names, and the years are populated starting from the current year and 12 years into the future. + +During the app initialization, we populate the year dropdown and store the current year for later use: + +```js +const currentYear = new Date().getFullYear(); +for (let i = 0; i <= 12; i++) { + const option = document.createElement("option"); + const yearValue = currentYear + i; + option.value = yearValue; + option.textContent = yearValue; + year.appendChild(option); +} +year.value = currentYear; +``` When the form's submit button is pressed, we run the `addData()` function, which starts like this: @@ -108,14 +122,14 @@ function addData(e) { minutes.value = null; day.value = "01"; month.value = "January"; - year.value = 2020; + year.value = currentYear; }; // update the display of data to show the newly added item, by running displayData() again. displayData(); } ``` -This next section creates a log message to say the new item addition is successful, and resets the form so it's ready for the next task to be entered. Last of all, we run the `displayData()` function, which updates the display of data in the app to show the new task that was just entered. +This next section creates a log message to say the new item addition is successful, and resets the form so it's ready for the next task to be entered. Note that the year field is reset to `currentYear`, which is set when the app initializes. Last of all, we run the `displayData()` function, which updates the display of data in the app to show the new task that was just entered. ### Checking whether a deadline has been reached From f9a9e52d36680ee55fb9f3f1dfc41ca3cdce046f Mon Sep 17 00:00:00 2001 From: Chris Warrick Date: Fri, 20 Mar 2026 13:32:32 +0100 Subject: [PATCH 04/11] Add blank line between headers and body in HTTP/1.0 examples (#43389) --- files/en-us/web/http/guides/evolution_of_http/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/web/http/guides/evolution_of_http/index.md b/files/en-us/web/http/guides/evolution_of_http/index.md index 77be6a19e6a653b..6bbf0cd289e64d2 100644 --- a/files/en-us/web/http/guides/evolution_of_http/index.md +++ b/files/en-us/web/http/guides/evolution_of_http/index.md @@ -57,6 +57,7 @@ HTTP/1.0 200 OK Date: Tue, 15 Nov 1994 08:12:31 GMT Server: CERN/3.0 libwww/2.17 Content-Type: text/html + A page with an image @@ -73,6 +74,7 @@ HTTP/1.0 200 OK Date: Tue, 15 Nov 1994 08:12:32 GMT Server: CERN/3.0 libwww/2.17 Content-Type: text/gif + (image content) ``` From 2294aa19aebc89db25c010c525725de4d515df21 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Fri, 20 Mar 2026 14:21:28 +0100 Subject: [PATCH 05/11] chore(deps-dev): bump npm from 11.6.2 to 11.9.0 (#42778) --- .nvmrc | 2 +- package-lock.json | 18 ++++-------------- package.json | 8 +++++++- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/.nvmrc b/.nvmrc index 54c65116f15a683..a4a7a41bca7c398 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v24 +v24.14.0 diff --git a/package-lock.json b/package-lock.json index 7f4cb7072c9416a..8f08fcc0f3ea75a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -396,7 +396,6 @@ "integrity": "sha512-Tdfx4eH2uS+gv9V9NCr3Rz+c7RSS6ntXp3Blliud18ibRUlRxO9dTaOjG4iv4x0nAmMeedP1ORkEpeXSkh2QiQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=20" } @@ -478,8 +477,7 @@ "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.0.19.tgz", "integrity": "sha512-VYHtPnZt/Zd/ATbW3rtexWpBnHUohUrQOHff/2JBhsVgxOrksAxJnLAO43Q1ayLJBJUUwNVo+RU0sx0aaysZfg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@cspell/dict-dart": { "version": "2.3.2", @@ -619,16 +617,14 @@ "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.14.tgz", "integrity": "sha512-2bf7n+kS92g+cMKV0wr9o/Oq9n8JzU7CcrB96gIh2GHgnF+0xDOqO2W/1KeFAqOfqosoOVE48t+4dnEMkkoJ2Q==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@cspell/dict-html-symbol-entities": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.5.tgz", "integrity": "sha512-429alTD4cE0FIwpMucvSN35Ld87HCyuM8mF731KU5Rm4Je2SG6hmVx7nkBsLyrmH3sQukTcr1GaiZsiEg8svPA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@cspell/dict-java": { "version": "5.0.12", @@ -826,8 +822,7 @@ "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.2.3.tgz", "integrity": "sha512-zXh1wYsNljQZfWWdSPYwQhpwiuW0KPW1dSd8idjMRvSD0aSvWWHoWlrMsmZeRl4qM4QCEAjua8+cjflm41cQBg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@cspell/dict-vue": { "version": "3.0.5", @@ -1230,7 +1225,6 @@ "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/auth-token": "^6.0.0", "@octokit/graphql": "^9.0.3", @@ -1521,7 +1515,6 @@ "integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.20.0" } @@ -1591,7 +1584,6 @@ "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -2593,7 +2585,6 @@ "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -6637,7 +6628,6 @@ "integrity": "sha512-DzzmbqfMW3EzHsunP66x556oZDzjcdjjlL2bHG4PubwnL58ZPAfz07px4GqteZkoCGnBYi779Y2mg7+vgNCwbw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "globby": "16.1.0", "js-yaml": "4.1.1", diff --git a/package.json b/package.json index 29d5b1c3cda3228..48baab0e407e7d7 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,16 @@ "type": "git", "url": "git+https://github.com/mdn/content.git" }, - "packageManager": "npm@11.6.2", + "packageManager": "npm@11.9.0", "engines": { "node": ">=24" }, + "devEngines": { + "packageManager": { + "name": "npm", + "version": ">=11.8.0" + } + }, "type": "module", "scripts": { "info:fred": "node -e \"process.stderr.write('\\nšŸ„ This command is using Fred: https://github.com/mdn/fred\\nšŸž Please report issues here: https://github.com/mdn/fred/issues/new?template=bug.yml\\n\\n')\"", From f80120af6f346a8628ab220ce20f0eeb55535d48 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Fri, 20 Mar 2026 14:22:00 +0100 Subject: [PATCH 06/11] Add jxl-rs decoder to Firefox 149 release notes and experimental features page (#43400) * Add jxl-rs decoder to Firefox 149 release notes * Apply suggestions from code review --- files/en-us/mozilla/firefox/experimental_features/index.md | 1 + files/en-us/mozilla/firefox/releases/149/index.md | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 2036e40824b07ea..0169f7c3a444d16 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -536,6 +536,7 @@ Firefox supports [JPEG XL](https://jpeg.org/jpegxl/) images if this feature is e See [Firefox bug 1539075](https://bugzil.la/1539075) for more details. Note that, as shown below, the feature is only available on Nightly builds (irrespective of whether the preference is set). +In Firefox 149, the previous C++ [JPEG XL](https://jpeg.org/jpegxl/) image decoder was replaced with a new Rust-based implementation that uses the `jxl-rs` library ([Firefox bug 1986393](https://bugzil.la/1986393)). | Release channel | Version added | Enabled by default? | | ----------------- | ------------- | ------------------- | diff --git a/files/en-us/mozilla/firefox/releases/149/index.md b/files/en-us/mozilla/firefox/releases/149/index.md index 8113d4a7b9d146f..1b90a8859c73753 100644 --- a/files/en-us/mozilla/firefox/releases/149/index.md +++ b/files/en-us/mozilla/firefox/releases/149/index.md @@ -156,3 +156,7 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil The CSS Typed Object Model Level 1 specification is being implemented. In this release, support for the {{domxref("CSSNumericValue/to","to()")}} method of the {{domxref("CSSNumericValue")}} interface was added, allowing the conversion of a CSS numeric value from one unit to another. ([Firefox bug 1278697](https://bugzil.la/1278697)). + +- **JPEG XL image support: Rust-based decoder**: `image.jxl.enabled` + + The previous C++ [JPEG XL](https://jpeg.org/jpegxl/) image decoder has been replaced with a new Rust-based implementation that uses the `jxl-rs` library. ([Firefox bug 1986393](https://bugzil.la/1986393)). From 12c307e724295db3fc0bf6574393cab91cbb0b8b Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 20 Mar 2026 14:23:03 +0100 Subject: [PATCH 07/11] Update InterfaceData based on WebRef (#43438) --- files/jsondata/InterfaceData.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/files/jsondata/InterfaceData.json b/files/jsondata/InterfaceData.json index 112348e9839d167..08b3718442e080f 100644 --- a/files/jsondata/InterfaceData.json +++ b/files/jsondata/InterfaceData.json @@ -1772,10 +1772,6 @@ "inh": "HTMLElement", "impl": [] }, - "HTMLPermissionElement": { - "inh": "HTMLElement", - "impl": [] - }, "HTMLPictureElement": { "inh": "HTMLElement", "impl": [] From 4be67ba747a366744b9bed3b48a2fa93fda4092c Mon Sep 17 00:00:00 2001 From: Eugenio Palandri Date: Fri, 20 Mar 2026 10:34:04 -0300 Subject: [PATCH 08/11] Add new registering properties guide as a children to the CSS properties and values API sidebar section. (#43410) Co-authored-by: Estelle Weyl --- files/sidebars/cssref.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/files/sidebars/cssref.yaml b/files/sidebars/cssref.yaml index a4c34856aa7e2de..ec54d9762fd3de7 100644 --- a/files/sidebars/cssref.yaml +++ b/files/sidebars/cssref.yaml @@ -207,6 +207,7 @@ sidebar: details: closed children: - /Web/CSS/Guides/Properties_and_values_API/Houdini + - /Web/CSS/Guides/Properties_and_values_API/Registering_properties - type: listSubPages path: /Web/CSS/Guides/Scroll_anchoring title: Scroll_anchoring From 0077c62c857cf90113208e5c1f21b7011c0633a3 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Sat, 21 Mar 2026 00:34:18 +1100 Subject: [PATCH 09/11] FF149Relnote: @container condition-query is optional (#43504) --- files/en-us/mozilla/firefox/releases/149/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/files/en-us/mozilla/firefox/releases/149/index.md b/files/en-us/mozilla/firefox/releases/149/index.md index 1b90a8859c73753..8742e56fb724fce 100644 --- a/files/en-us/mozilla/firefox/releases/149/index.md +++ b/files/en-us/mozilla/firefox/releases/149/index.md @@ -43,6 +43,10 @@ Firefox 149 is the current [Beta version of Firefox](https://www.firefox.com/en- - The {{CSSXRef("vertical-align")}} CSS property is now a shorthand property for {{CSSXRef("alignment-baseline")}}, {{CSSXRef("baseline-shift")}} and {{CSSXRef("baseline-source")}} properties. ([Firefox bug 1830771](https://bugzil.la/1830771)). +- The [``](/en-US/docs/Web/CSS/Reference/At-rules/@container#container-query) part of the {{cssxref("@container")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) condition is now optional. + This allows matching against containers based solely on their names. + ([Firefox bug 2016474](https://bugzil.la/2016474)). + From 2362f25e1ccee7ad584584ab3521f3ff34a3e6ed Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 20 Mar 2026 14:34:53 +0100 Subject: [PATCH 10/11] HTML select: future proofing language (#43470) --- files/en-us/web/html/reference/elements/select/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/reference/elements/select/index.md b/files/en-us/web/html/reference/elements/select/index.md index b5fc3f9cb9d042c..0649243719fa38a 100644 --- a/files/en-us/web/html/reference/elements/select/index.md +++ b/files/en-us/web/html/reference/elements/select/index.md @@ -104,7 +104,7 @@ Keyboard users can select multiple non-contiguous items by: ## Styling with CSS The `