recursal/MDN huggingface dataset:
AbortController
===============

The **`AbortController`** interface represents a controller object that allows you to abort one or more Web requests as and when desired.

You can create a new `AbortController` object using the `AbortController()` constructor. Communicating with an asynchronous operation is done using an `AbortSignal` object.

Constructor
-----------

`AbortController()`

Creates a new `AbortController` object instance.

Instance properties
-------------------

`AbortController.signal` Read only 

Returns an `AbortSignal` object instance, which can be used to communicate with, or to abort, an asynchronous operation.

Instance methods
----------------

`AbortController.abort()`

Aborts an asynchronous operation before it has completed. This is able to abort fetch requests, consumption of any response bodies, and streams.

Examples
--------

**Note:** There are additional examples in the `AbortSignal` reference.

In the following snippet, we aim to download a video using the Fetch API.

We first create a controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.

When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener.


```js
let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("Download aborted");
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```


**Note:** When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`.

You can find a full working example on GitHub; you can also see it running live.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Fetch API
* Abortable Fetch by Jake Archibald
ToggleEvent
===========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`ToggleEvent`** interface represents an event notifying the user when a popover element's state toggles between showing and hidden.

It is the event object for the `HTMLElement` `beforetoggle` and `toggle` events, which fire on popovers when they transition between showing and hidden (before and after, respectively).

Event

ToggleEvent

**Note:** `ToggleEvent` is unrelated to the `HTMLDetailsElement` `toggle` event, which fires on a `<details>` element when its `open`/`closed` state is toggled. Its event object is a generic `Event`.

Constructor
-----------

`ToggleEvent()`

Creates an `ToggleEvent` object.

Instance properties
-------------------

*This interface inherits properties from its parent, `Event`.*

`ToggleEvent.newState` Read only 

A string (either `"open"` or `"closed"`), representing the state the element is transitioning to.

`ToggleEvent.oldState` Read only 

A string (either `"open"` or `"closed"`), representing the state the element is transitioning from.

Examples
--------

### Basic example


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # toggleevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API
* `beforetoggle` event
* `toggle` event
VideoColorSpace
===============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`VideoColorSpace`** interface of the WebCodecs API represents the color space of a video.

Constructor
-----------

`VideoColorSpace()`

Creates a new `VideoColorSpace` object.

Instance properties
-------------------

`VideoColorSpace.primaries` Read only 

A string containing the color primary describing the color gamut of a video sample.

`VideoColorSpace.transfer`

A string containing the transfer characteristics of video samples.

`VideoColorSpace.matrix`

A string containing the matrix coefficients describing the relationship between sample component values and color coordinates.

`VideoColorSpace.fullRange`

A `Boolean`. If `true` indicates that full-range color values are used.

Instance methods
----------------

`VideoColorSpace.toJSON()`

Returns a JSON representation of the `VideoColorSpace` object.

Examples
--------

In the following example, `colorSpace` is a `VideoColorSpace` object returned from `VideoFrame`. The object is then printed to the console.


```js
let colorSpace = VideoFrame.colorSpace;
console.log(colorSpace);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # videocolorspace |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSFontFeatureValuesRule
========================

The **`CSSFontFeatureValuesRule`** interface represents an `@font-feature-values` at-rule, letting developers assign for each font face a common name to specify features indices to be used in `font-variant-alternates`.

CSSRule

CSSFontFeatureValuesRuleInstance properties
-------------------

*Inherits properties from its ancestor `CSSRule`.*

`CSSFontFeatureValuesRule.fontFamily`

A string that identifies the font family this rule applies to.

Instance methods
----------------

*Inherits methods from its ancestor `CSSRule`.*

Examples
--------

### Read font family

In this example, we declare two `@font-feature-values` one for the *Font One* font family, and the other for *Font Two*. We then use the CSSOM to read these font families, displaying them into the log.

#### HTML


```html
<pre id="log"></pre>
```


#### CSS


```css
/\* At-rule for "nice-style" in Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* At-rule for "nice-style" in Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/\* Apply the at-rules with a single declaration \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```


#### JavaScript


```js
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log.textContent = `The 1st '@font-feature-values' family: "${fontOne.fontFamily}".\n`;

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}".`;
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # cssfontfeaturevaluesrule |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `@font-feature-values`
SVGAnimateElement
=================

The **`SVGAnimateElement`** interface corresponds to the `<animate>` element.

EventTarget

Node

Element

SVGElement

SVGAnimationElement

SVGAnimateElementInstance properties
-------------------

*This interface has no properties but inherits properties from its parent, `SVGAnimationElement`.*

Instance methods
----------------

*This interface has no methods but inherits methods from its parent, `SVGAnimationElement`.*

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # InterfaceSVGAnimateElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VisibilityStateEntry
====================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`VisibilityStateEntry`** interface provides timings of page visibility state changes, i.e., when a tab changes from the foreground to the background or vice versa.

This can be used to pinpoint visibility changes on the performance timeline, and cross-reference them against other performance entries such as "first-contentful-paint" (see `PerformancePaintTiming`).

There are two key visibility state change times that this API reports on:

* `visible`: The time when the page becomes visible (i.e. when its tab moves into the foreground).
* `hidden`: The time when the pages become hidden (i.e. when its tab moves into the background).

The performance timeline will always have a "`visibility-state`" entry with a `startTime` of `0` and a `name` representing the initial page visibility state.

**Note:** Like other Performance APIs, this API extends `PerformanceEntry`.

PerformanceEntry

VisibilityStateEntryInstance properties
-------------------

This interface has no properties but it extends the properties of `PerformanceEntry` by qualifying and constraining them as follows:

`PerformanceEntry.entryType` 
Experimental

Returns "`visibility-state`".

`PerformanceEntry.name` 
Experimental

Returns either `"visible"` or `"hidden"`.

`PerformanceEntry.startTime` 
Experimental

Returns the `timestamp` when the visibility state change occurred.

`PerformanceEntry.duration` 
Experimental

Returns 0.

Instance methods
----------------

This interface has no methods.

Examples
--------

### Basic usage

The following function could be used to log a table of all "`visibility-state`" performance entries to the console:


```js
function getVisibilityStateEntries() {
  const visibilityStateEntries =
    performance.getEntriesByType("visibility-state");
  console.table(visibilityStateEntries);
}
```

### Correlating visibility state changes with paint timing

The below function gets a reference to all "`visibility-state`" entries and the "`first-contentful-paint`" entry, then uses `Array.some()` to test whether any of the "`hidden`" visibility entries occurred before the first contentful paint:


```js
function wasHiddenBeforeFirstContentfulPaint() {
  const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
  const visibilityStateEntries =
    performance.getEntriesByType("visibility-state");
  return visibilityStateEntries.some(
    (e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
  );
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-visibilitystateentry-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Page Visibility API
SVGFESpecularLightingElement
============================

The **`SVGFESpecularLightingElement`** interface corresponds to the `<feSpecularLighting>` element.

EventTarget

Node

Element

SVGElement

SVGFESpecularLightingElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFESpecularLightingElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFESpecularLightingElement.in1` Read only 

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFESpecularLightingElement.kernelUnitLengthX` Read only 

An `SVGAnimatedNumber` corresponding to the X component of the `kernelUnitLength` attribute of the given element.

`SVGFESpecularLightingElement.kernelUnitLengthY` Read only 

An `SVGAnimatedNumber` corresponding to the Y component of the `kernelUnitLength` attribute of the given element.

`SVGFESpecularLightingElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFESpecularLightingElement.specularConstant` Read only 

An `SVGAnimatedNumber` corresponding to the `specularConstant` attribute of the given element.

`SVGFESpecularLightingElement.specularExponent` Read only 

An `SVGAnimatedNumber` corresponding to the `specularExponent` attribute of the given element.

`SVGFESpecularLightingElement.surfaceScale` Read only 

An `SVGAnimatedNumber` corresponding to the `surfaceScale` attribute of the given element.

`SVGFESpecularLightingElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFESpecularLightingElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFESpecularLightingElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFESpecularLightingElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<feSpecularLighting>`
HTMLOptionElement
=================

The **`HTMLOptionElement`** interface represents `<option>` elements and inherits all properties and methods of the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLOptionElementConstructor
-----------

`Option()`

Returns a newly created `HTMLOptionElement` object. It has four parameters: the text to display, `text`, the value associated, `value`, the value of `defaultSelected`, and the value of `selected`. The last three parameters are optional.

Instance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLOptionElement.defaultSelected`

Has a value of either `true` or `false` that shows the initial value of the `selected` HTML attribute, indicating whether the option is selected by default or not.

`HTMLOptionElement.disabled`

Has a value of either `true` or `false` representing the value of the `disabled` HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an `<optgroup>` element that is disabled.

`HTMLOptionElement.form` Read only 

A `HTMLFormElement` representing the same value as the `form` of the corresponding `<select>` element, if the option is a descendant of a `<select>` element, or null if none is found.

`HTMLOptionElement.index` Read only 

A `long` representing the position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the `<datalist>` element, the value is `0`.

`HTMLOptionElement.label` Read only 

A string that reflects the value of the `label` HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content.

`HTMLOptionElement.selected`

Has a value of either `true` or `false` that indicates whether the option is currently selected.

`HTMLOptionElement.text`

A string that contains the text content of the element.

`HTMLOptionElement.value`

A string that reflects the value of the `value` HTML attribute, if it exists; otherwise reflects value of the `Node.textContent` property.

Instance methods
----------------

*Doesn't implement any specific method, but inherits methods from its parent, `HTMLElement`.*

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmloptionelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<option>`.
* The `HTMLOptionsCollection` interface.
Gamepad API
===========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **Gamepad API** is a way for developers to access and respond to signals from gamepads and other game controllers in a simple, consistent way. It contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.

Interfaces
----------

`Gamepad`

Represents a gamepad/controller connected to the computer.

`GamepadButton`

Represents a button on one of the connected controllers.

`GamepadEvent`

The event object representing events fired that are related to gamepads.

### Experimental Gamepad extensions

`GamepadHapticActuator`

Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.

`GamepadPose`

Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a WebVR controller. This is *not* used by the newer WebXR standard.

See also the extensions to the Gamepad interface, for features that allow you to access the above information.

### Extensions to other interfaces

#### Navigator

`Navigator.getGamepads()`

An extension to the `Navigator` object that returns an array of `Gamepad` objects, one for each connected gamepad.

#### Window events

`gamepadconnected`

An event that will fire when a gamepad is connected.

`gamepaddisconnected`

An event that will fire when a gamepad is disconnected.

Tutorials and guides
--------------------

* Using the Gamepad API
* Implementing controls using the Gamepad API
Specifications
--------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The Gamepad API by Ted Mielczarek and Robert Nyman
* Simple API demo page (source)
MutationRecord
==============

The `MutationRecord` is a read-only interface that represents an individual DOM mutation observed by a `MutationObserver`. It is the object inside the array passed to the callback of a `MutationObserver`.

Instance properties
-------------------

`MutationRecord.addedNodes` Read only 

The nodes added by a mutation. Will be an empty `NodeList` if no nodes were added.

`MutationRecord.attributeName` Read only 

The name of the changed attribute as a string, or `null`.

`MutationRecord.attributeNamespace` Read only 

The namespace of the changed attribute as a string, or `null`.

`MutationRecord.nextSibling` Read only 

The next sibling of the added or removed nodes, or `null`.

`MutationRecord.oldValue` Read only 

The value depends on the `MutationRecord.type`:

* For `attributes`, it is the value of the changed attribute before the change.
* For `characterData`, it is the data of the changed node before the change.
* For `childList`, it is `null`.

`MutationRecord.previousSibling` Read only 

The previous sibling of the added or removed nodes, or `null`.

`MutationRecord.removedNodes` Read only 

The nodes removed by a mutation. Will be an empty `NodeList` if no nodes were removed.

`MutationRecord.target` Read only 

The node the mutation affected, depending on the `MutationRecord.type`.

* For `attributes`, it is the element whose attribute changed.
* For `characterData`, it is the `CharacterData` node.
* For `childList`, it is the node whose children changed.

`MutationRecord.type` Read only 

A string representing the type of mutation: `attributes` if the mutation was an attribute mutation, `characterData` if it was a mutation to a `CharacterData` node, and `childList` if it was a mutation to the tree of nodes.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # interface-mutationrecord |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Encoding API
============

The **Encoding API** provides a mechanism for handling text in various character encodings, including legacy non-UTF-8 encodings.

The API provides four interfaces: `TextDecoder`, `TextEncoder`, `TextDecoderStream` and `TextEncoderStream`.

**Note:** This feature is available in Web Workers

Interfaces
----------

* `TextDecoder`
* `TextEncoder`
* `TextDecoderStream`
* `TextEncoderStream`
Specifications
--------------

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |
| Encoding Standard # interface-textencoder |
| Encoding Standard # interface-textencoderstream |
| Encoding Standard # interface-textdecoderstream |

Browser compatibility
---------------------

### api.TextDecoder

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TextEncoder

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TextEncoderStream

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TextDecoderStream

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Encoding API Encodings - Encodings that must be supported for decoding text.
* A polyfill allowing to use this interface in browsers that don't support it
Device Memory API
=================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Note:** This feature is available in Web Workers

The capabilities of a client device largely depend on the amount of available RAM. Traditionally, developers had to use heuristics and either benchmark a device or infer device capabilities based on other factors like the device manufacturer or User Agent strings.

Determining device memory
-------------------------

There are two ways to determine the approximate amount of RAM a device has: use the Device Memory JavaScript API or accept Client Hints.

### JavaScript API

You may query the approximate amount of RAM a device has by retrieving `Navigator.deviceMemory` or `WorkerNavigator.deviceMemory`.


```js
const RAM = navigator.deviceMemory;
```

### Client Hints

You may also use the Client Hints HTTP Header with the `Device-Memory` directive to retrieve the same approximate RAM capacity.

Interfaces
----------

### Extensions to other interfaces

`Navigator.deviceMemory` Read only 

Returns the approximate amount of device memory in gigabytes.

`WorkerNavigator.deviceMemory` Read only 

Returns the approximate amount of device memory in gigabytes.

Specifications
--------------

| Specification |
| --- |
| Device Memory  |

Browser compatibility
---------------------

### api.Navigator.deviceMemory

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.WorkerNavigator.deviceMemory

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### http.headers.Device-Memory

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Device-Memory` header