Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions files/en-us/mozilla/firefox/experimental_features/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,38 @@ This algorithm is similar to strict equality `===` (where `-0` and `+0` are cons
- `javascript.options.experimental.iterator_includes`
- : Set to `true` to enable.

### TC39 Intl.Locale info proposal

The [TC39 Intl.Locale info proposal](https://github.com/tc39/proposal-intl-locale-info) is now supported.
This includes all the instance methods on `Intl.Locale` that are prefixed with "get" — {{jsxref("Intl/Locale/getCalendars", "Intl.Locale.prototype.getCalendars()")}}, {{jsxref("Intl/Locale/getCollations", "Intl.Locale.prototype.getCollations()")}}, {{jsxref("Intl/Locale/getHourCycles", "Intl.Locale.prototype.getHourCycles()")}}, {{jsxref("Intl/Locale/getNumberingSystems", "Intl.Locale.prototype.getNumberingSystems()")}}, {{jsxref("Intl/Locale/getTextInfo", "Intl.Locale.prototype.getTextInfo()")}}, {{jsxref("Intl/Locale/getTimeZones", "Intl.Locale.prototype.getTimeZones()")}}, {{jsxref("Intl/Locale/getWeekInfo", "Intl.Locale.prototype.getWeekInfo()")}}.
([Firefox bug 1693576](https://bugzil.la/1693576)).

| Release channel | Version added | Enabled by default? |
| ----------------- | ------------- | ------------------- |
| Nightly | 152 | No |
| Developer Edition | — | — |
| Beta | — | — |
| Release | — | — |

- `javascript.options.experimental.intl_locale_info`
- : Set to `true` to enable on Nightly.

### Text module import

The `with` clause [`{ type: "text" }`](/en-US/docs/Web/JavaScript/Reference/Statements/import/with#text_modules_type_text) allows importing a module's source as a string value.
The media type of the response is ignored, and the content is parsed as text even if the source contains scripts or other executable code.
([Firefox bug 2024854](https://bugzil.la/2024854)).

| Release channel | Version added | Enabled by default? |
| ----------------- | ------------- | ------------------- |
| Nightly | 152 | No |
| Developer Edition | 152 | No |
| Beta | 152 | No |
| Release | 152 | No |

- `javascript.options.experimental.import_text`
- : Set to `true` to enable.

### Multiple import maps

Support for [multiple import maps](/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap#merging_multiple_import_maps).
Expand Down
8 changes: 8 additions & 0 deletions files/en-us/mozilla/firefox/releases/150/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,20 @@ No notable changes.
- The {{domxref("Sanitizer.replaceElementWithChildren()")}} method will now return `false` if the element to be replaced is {{htmlelement("html")}} in the HTML [namespace](/en-US/docs/Web/API/Sanitizer/replaceElementWithChildren#namespace).
In other words, you can't use this method to create a {{domxref("Sanitizer")}} that will replace the `<html>` element with its inner content. ([Firefox bug 2022176](https://bugzil.la/2022176)).

- The [`scrollend` event](/en-US/docs/Web/API/VisualViewport/scrollend_event) is now supported on {{domxref("VisualViewport")}}, allowing elements to be updated when a scrolling action is completed.
This might be used, for example, to unhide or otherwise adjust the position of fixed UI elements once a user finishes panning around a pinch-zoomed screen.
([Firefox bug 1801658](https://bugzil.la/1801658)).

#### DOM

- The [`options.shadowRoots`](/en-US/docs/Web/API/Document/caretPositionFromPoint#shadowroots) argument of the {{domxref('Document.caretPositionFromPoint()')}} method is now supported.
This allows the method to return the node containing the caret from within a shadow DOM, provided its associated {{domxref("ShadowRoot")}} was passed as an option.
([Firefox bug 1914596](https://bugzil.la/1914596)).

- The {{domxref("HighlightRegistry.highlightsFromPoint()")}} method is now supported, providing an mechanism for web pages to get information about all the [CSS custom highlights](/en-US/docs/Web/API/CSS_Custom_Highlight_API) applied at a particular point.
This includes highlights that are inside shadow roots, provided the associated {{domxref("ShadowRoot")}} instance was passed to the method.
([Firefox bug 1917991](https://bugzil.la/1917991)).

- The {{domxref("CSSFontFaceDescriptors")}} interface is now supported, and an instance of this type is returned by the {{domxref("CSSFontFaceRule.style")}} property. ([Firefox bug 2019904](https://bugzil.la/2019904)).

- The non-standard {{domxref("Document/caretRangeFromPoint","caretRangeFromPoint()")}} method of the {{domxref("Document")}} interface is now supported. ([Firefox bug 1550635](https://bugzil.la/1550635)).
Expand Down
16 changes: 16 additions & 0 deletions files/en-us/mozilla/firefox/releases/152/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ Firefox 152 is the current [Beta version of Firefox](https://www.firefox.com/en-

### APIs

- The {{domxref("PerformanceResourceTiming.firstInterimResponseStart","firstInterimResponseStart")}} and {{domxref("PerformanceResourceTiming.finalResponseHeadersStart","finalResponseHeadersStart")}} properties of the {{domxref("PerformanceResourceTiming")}} interface are supported.
These can be used to measure how long it takes for the browser to receive interim HTTP responses and the final HTTP response after sending a request, respectively.
([Firefox bug 2006340](https://bugzil.la/2006340)).

#### DOM

- 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.
Expand Down Expand Up @@ -117,3 +121,15 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil

The [`Iterator.prototype.includes()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/includes) method tests whether the iterator will produce a specified value.
([Firefox bug 2025779](https://bugzil.la/2025779)).

- **TC39 Intl.Locale info proposal**: `javascript.options.experimental.intl_locale_info`

The [TC39 Intl.Locale info proposal](https://github.com/tc39/proposal-intl-locale-info) is now supported on nightly builds if the preference is enabled.
This includes all the [`Intl.Locale` instance methods prefixed with "get"](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#instance_methods).
([Firefox bug 1693576](https://bugzil.la/1693576)).

- **Text module import**: `javascript.options.experimental.import_text`

The `with` clause [`{ type: "text" }`](/en-US/docs/Web/JavaScript/Reference/Statements/import/with#text_modules_type_text) allows importing a module's source as a string value.
The media type of the response is ignored, and the content is parsed as text even if the source contains scripts or other executable code.
([Firefox bug 2024854](https://bugzil.la/2024854)).
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ highlightsFromPoint(x, y, options)

### Return value

An array of `HighlightHitResult` objects representing the custom highlights applied at the point in the viewport specified by the `x` and `y` parameters.
An array of objects representing the custom highlights applied at the point in the viewport specified by the `x` and `y` parameters.

Each `HighlightHitResult` object contains the following properties:
Each object contains the following properties:

- `highlight`
- : A {{domxref("Highlight")}} object representing the applied custom highlight.
Expand Down
14 changes: 14 additions & 0 deletions files/en-us/web/api/mediakeysystemaccess/getconfiguration/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ browser-compat: api.MediaKeySystemAccess.getConfiguration

The **`getConfiguration()`** method of the {{domxref("MediaKeySystemAccess")}} interface returns an object with the supported combination of the following configuration options:

- `label` {{ReadOnlyInline}}
- : A string identifying the configuration, preserved as-is from the configuration passed to {{domxref("Navigator.requestMediaKeySystemAccess()")}}.
Defaults to the empty string (`""`).
- `initDataTypes` {{ReadOnlyInline}}
- : Returns a list of supported initialization data type names. An initialization data type is a string indicating the format of the initialization data.
- `audioCapabilities` {{ReadOnlyInline}}
Expand All @@ -20,6 +23,17 @@ The **`getConfiguration()`** method of the {{domxref("MediaKeySystemAccess")}} i
- : Indicates whether a persistent distinctive identifier is required.
- `persistentState` {{ReadOnlyInline}}
- : Indicates whether the ability to persist state is required.
- `sessionTypes` {{ReadOnlyInline}}
- : An array of strings indicating the session types that are supported by the configuration.

Permitted values include:
- `temporary`
- : A session for which the license, key(s) and record of or data related to the session are not persisted.
The application does not need to manage such storage.
Implementations must support this option, and it is the default.
- `persistent-license`
- : A session for which the license (and potentially other data related to the session) will be persisted.
A record of the license and associated keys persists even if the license is destroyed, providing an attestation that the license and key(s) it contains are no longer usable by the client.

## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ browser-compat: api.PerformanceResourceTiming.finalResponseHeadersStart

{{APIRef("Performance API")}}{{AvailableInWorkers}}

The **`finalResponseHeadersStart`** read-only property returns a {{domxref("DOMHighResTimeStamp","timestamp")}} immediately after the browser receives the first byte of the final document response (for example, 200 OK) from the server.
The **`finalResponseHeadersStart`** read-only property returns a {{domxref("DOMHighResTimeStamp","timestamp")}} immediately after the browser receives the first byte of the final document response (for example, {{httpstatus(200, "200 OK")}}) from the server.

This differs from **{{domxref("PerformanceResourceTiming.requestStart", "requestStart")}}** (which may also be represented as **{{domxref("PerformanceResourceTiming.firstInterimResponseStart", "firstInterimResponseStart")}}**), as this starts from the first bytes of any response including interim responses (for example, 103 Early Hints) with the final response coming potentially much later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ browser-compat: api.PerformanceResourceTiming.firstInterimResponseStart

{{APIRef("Performance API")}}{{AvailableInWorkers}}

The **`firstInterimResponseStart`** read-only property returns a {{domxref("DOMHighResTimeStamp","timestamp")}} immediately after the browser receives the first byte of the interim 1xx response (for example, 100 Continue or 103 Early Hints) from the server.
The **`firstInterimResponseStart`** read-only property returns a {{domxref("DOMHighResTimeStamp","timestamp")}} immediately after the browser receives the first byte of the interim 1xx response (for example, {{httpstatus(100, "100 Continue")}} or {{httpstatus(103, "103 Early Hints")}}) from the server.

There is no _end_ property for `firstInterimResponseStart`.

Expand Down
16 changes: 9 additions & 7 deletions files/en-us/web/api/url/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,22 +64,24 @@ You normally create a new `URL` object by specifying the URL as a string when ca

## Usage notes

The constructor takes a `url` parameter, and an optional `base` parameter to use as a base if the `url` parameter is a relative URL:
The constructor takes a `url` parameter, and an optional `base` parameter to use as a base if the `url` parameter is a relative URL.

Note that in the case below "dogs" is the filename segment (because it has no trailing slash), and the relative URL "cats" is interpreted relative to the _directory_ part of the base URL, which is `http://www.example.com/animals/`. See [Resolving relative references to a URL](/en-US/docs/Web/API/URL_API/Resolving_relative_references) for more information.

```js
const url = new URL("../cats", "http://www.example.com/dogs");
const url = new URL("cats", "http://www.example.com/animals/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
console.log(url.pathname); // "/animals/cats"
```

The constructor will raise an exception if the URL cannot be parsed to a valid URL.
You can either call the above code in a [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block or use the {{domxref("URL.canParse_static", "canParse()")}} static method to first check the URL is valid:

```js
if (URL.canParse("../cats", "http://www.example.com/dogs")) {
const url = new URL("../cats", "http://www.example.com/dogs");
if (URL.canParse("cats", "http://www.example.com/animals/dogs")) {
const url = new URL("cats", "http://www.example.com/animals/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
console.log(url.pathname); // "/animals/cats"
} else {
console.log("Invalid URL");
}
Expand All @@ -89,7 +91,7 @@ URL properties can be set to construct the URL:

```js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
console.log(url.href); // "http://www.example.com/animals/cats#tabby"
```

URLs are encoded according to the rules found in {{RFC(3986)}}. For instance:
Expand Down
27 changes: 16 additions & 11 deletions files/en-us/web/api/visualviewport/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,8 @@ browser-compat: api.VisualViewport

{{APIRef("CSSOM view API")}}

The **`VisualViewport`** interface of the [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique `VisualViewport` representing the properties associated with that window.

The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport.

What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch-zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what's shown on-screen.

You can get a window's visual viewport using {{domxref("Window.visualViewport")}}.

> [!NOTE]
> Only the top-level window has a visual viewport that's distinct from the layout viewport. Therefore, it's generally only the `VisualViewport` object of the top-level window that's useful. For an {{htmlelement("iframe")}}, visual viewport metrics like {{domxref("VisualViewport.width")}} always correspond to layout viewport metrics like {{domxref("Element.clientWidth", "document.documentElement.clientWidth")}}.
The **`VisualViewport`** interface of the [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) represents the visual viewport for a given window. For a page containing frames, each {{htmlelement("iframe")}} , as well as the containing page, will have a unique window object.
Each window on a page will have a unique `VisualViewport` representing the properties associated with that window.

{{InheritanceDiagram}}

Expand Down Expand Up @@ -57,9 +49,22 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent
- : Fired when a scrolling operation on the visual viewport ends.
Also available via the `onscrollend` property.

## Description

The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport.

What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch-zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what's shown on-screen.

You can get a window's visual viewport using {{domxref("Window.visualViewport")}}.

> [!NOTE]
> Only the top-level window has a visual viewport that's distinct from the layout viewport.
> Therefore, it's generally only the `VisualViewport` object of the top-level window that's useful.
> For an {{htmlelement("iframe")}}, visual viewport metrics like {{domxref("VisualViewport.width")}} always correspond to layout viewport metrics like {{domxref("Element.clientWidth", "document.documentElement.clientWidth")}}.

## Examples

## Getting visual viewport information during scrolling and zooming
### Getting visual viewport information during scrolling and zooming

Our [visual viewport](https://mdn.github.io/dom-examples/visual-viewport-api/) example provides a basic demonstration of how the different visual viewport features work, including the three event types. Load the page in supporting desktop and mobile browsers and try scrolling around the page and pinch-zooming. On `resize` and `scroll`, the information box is repositioned to keep the same position relative to the visual viewport, and the viewport and scroll information it shows is updated. Also, on `resize` and `scroll` we change the box color to indicate something is happening, changing it back on `scrollend`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ letter-spacing: unset;

Percentage values are calculated relative to the width of the space character of the font applied to the text.

> [!NOTE]
> When `letter-spacing` is non-zero, user agents do not apply optional ligatures, such as the `liga` (standard ligatures) and `clig` (contextual ligatures) OpenType features normally controlled by {{cssxref("font-variant-ligatures")}}.
> These features can be explicitly re-enabled with {{cssxref("font-feature-settings")}}.

## Accessibility

A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters can overlap each other to the point where the word(s) may be unrecognizable.
Expand Down
Loading