recursal/MDN huggingface dataset:
Network Information API
=======================

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

 The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi, 'cellular', etc.).
 This can be used to select high definition content or low definition content based on the user's connection.

The interface consists of a single `NetworkInformation` object, an instance of which is returned by the `Navigator.connection` property.

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

Interfaces
----------

`NetworkInformation`

Provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The `NetworkInformation` interface cannot be instantiated. It is instead accessed through the `Navigator` interface.

Examples
--------

### Detect connection changes

This example watches for changes to the user's connection.


```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);
```

### Preload large resources

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the `preloadVideo` flag is set to `false`. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of `NetworkInformation.type`. Regardless of the `type` value you can get an estimate of connection speed through the `NetworkInformation.effectiveType` property.


```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

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

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

See also
--------

* Online and offline events
PushMessageData
===============

The **`PushMessageData`** interface of the Push API provides methods which let you retrieve the push data sent by a server in various formats.

Unlike the similar methods in the Fetch API, which only allow the method to be invoked once, these methods can be called multiple times.

Messages received through the Push API are sent encrypted by push services and then automatically decrypted by browsers before they are made accessible through the methods of the `PushMessageData` interface.

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

None.

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

`PushMessageData.arrayBuffer()`

Extracts the data as an `ArrayBuffer` object.

`PushMessageData.blob()`

Extracts the data as a `Blob` object.

`PushMessageData.json()`

Extracts the data as a JSON object.

`PushMessageData.text()`

Extracts the data as a plain text string.

Examples
--------


```js
self.addEventListener("push", (event) => {
  const obj = event.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    fireNotification(obj, event);
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});
```

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

| Specification |
| --- |
| Push API # pushmessagedata-interface |

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

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

The **`SVGSetElement`** interface corresponds to the `<set>` element.

EventTarget

Node

Element

SVGElement

SVGAnimationElement

SVGSetElementInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from its parent interface, `SVGAnimationElement`.*

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

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGAnimationElement`.*

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

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

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

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

The **WebGLFramebuffer** interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination.

WebGLObject

WebGLFramebufferDescription
-----------

The `WebGLFramebuffer` object does not define any methods or properties of its own and its content is not directly accessible. When working with `WebGLFramebuffer` objects, the following methods of the `WebGLRenderingContext` are useful:

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
Examples
--------

### Creating a frame buffer


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createFramebuffer();
```

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

| Specification |
| --- |
| WebGL Specification # 5.5 |

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

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

See also
--------

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()`
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`
CSSTransformComponent
=====================

The **`CSSTransformComponent`** interface of the CSS\_Object\_Model#css\_typed\_object\_model is part of the `CSSTransformValue` interface.

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

`CSSTransformComponent.is2D` Read only 

Returns a boolean indicting whether the transform is 2D or 3D.

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

`CSSTransformComponent.toMatrix()`

Returns a new `DOMMatrix` object.

`CSSTransformComponent.toString()`

A string in the form of a CSS `Transforms function`.

This will use the value of `is2D` to return either a 2D or 3D transform. For example if the component represents `CSSRotate` and `is2D` is false then the string returned will be in the form of the CSS transformation `rotate3D()` function. If true the string returned will be in the form of the 2-dimensional `rotate3D()` function.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # csstransformcomponent |

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

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

The **`SVGPolylineElement`** interface provides access to the properties of `<polyline>` elements, as well as methods to manipulate them.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElement

SVGPolylineElementInstance properties
-------------------

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

`SVGPolylineElement.animatedPoints` Read only 

A `SVGPointList` representing the animated value of the element's `points` attribute. If the `points` attribute is not being animated, it contains the same value as the `points` property.

`SVGPolylineElement.points`

A `SVGPointList` representing the base (i.e., static) value of the element's `points` attribute. Modifications via the `SVGPointList` object are reflected in the `points` attribute, and vice versa.

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

*This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGPolylineElement |

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

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

See also
--------

* `<polyline>`
VideoPlaybackQuality
====================

A **`VideoPlaybackQuality`** object is returned by the `HTMLVideoElement.getVideoPlaybackQuality()` method and contains metrics that can be used to determine the playback quality of a video.

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

*The `VideoPlaybackQuality` interface doesn't inherit properties from any other interfaces.*

`creationTime` Read only 

A `DOMHighResTimeStamp` containing the time in milliseconds between the start of the navigation and the creation of the object.

`droppedVideoFrames` Read only 

An `unsigned long` giving the number of video frames dropped since the creation of the associated `HTMLVideoElement`.

`totalVideoFrames` Read only 

An `unsigned long` giving the number of video frames created and dropped since the creation of the associated `HTMLVideoElement`.

### Obsolete properties

`corruptedVideoFrames` Read only  
Deprecated

An `unsigned long` giving the number of video frames corrupted since the creation of the associated `HTMLVideoElement`. A corrupted frame may be created or dropped.

`totalFrameDelay` Read only  
Deprecated

Non-standard

A `double` containing the sum of the frame delay since the creation of the associated `HTMLVideoElement`. The frame delay is the difference between a frame's theoretical presentation time and its effective display time.

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

*The `VideoPlaybackQuality` interface has no methods, and does not inherit any.*

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

| Specification |
| --- |
| Media Playback Quality # videoplaybackquality-interface |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method to get a `VideoPlaybackQuality` object
* `MediaSource`
* `SourceBuffer`
HTMLBaseElement
===============

The **`HTMLBaseElement`** interface contains the base URI for a document. This object inherits all of the properties and methods as described in the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLBaseElementInstance properties
-------------------

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

`HTMLBaseElement.href`

A string that reflects the `href` HTML attribute, containing a base URL for relative URLs in the document.

`HTMLBaseElement.target`

A string that reflects the `target` HTML attribute, containing a default target browsing context or frame for elements that do not have a target reference specified.

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

*No specific method; inherits methods from its parent, `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmlbaseelement |

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

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

See also
--------

* HTML element implementing this interface: `<base>`
SVGTSpanElement
===============

The **`SVGTSpanElement`** interface represents a `<tspan>` element.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGTextContentElement

SVGTextPositioningElement

SVGTSpanElementInstance properties
-------------------

*This interface doesn't provide any specific properties, but inherits the properties from its parent, `SVGTextPositioningElement`.*

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

*This interface doesn't provide any specific methods.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTSpanElement |

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

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

See also
--------

* `<tspan>` SVG Element
SVGFETileElement
================

The **`SVGFETileElement`** interface corresponds to the `<feTile>` element.

EventTarget

Node

Element

SVGElement

SVGFETileElementInstance properties
-------------------

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

`SVGFETileElement.height` Read only 

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

`SVGFETileElement.in1` Read only 

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

`SVGFETileElement.result` Read only 

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

`SVGFETileElement.width` Read only 

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

`SVGFETileElement.x` Read only 

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

`SVGFETileElement.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 # InterfaceSVGFETileElement |

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

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

See also
--------

* `<feTile>`
XRFrame
=======

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

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

A WebXR Device API **`XRFrame`** object is passed into the `requestAnimationFrame()` callback function and provides access to the information needed in order to render a single frame of animation for an `XRSession` describing a VR or AR scene. Events which communicate the tracking state of objects also provide an `XRFrame` reference as part of their structure.

In addition to providing a reference to the `XRSession` for which this frame is to be rendered, the `getViewerPose()` method is provided to obtain the `XRViewerPose` describing the viewer's position and orientation in space, and `getPose()` can be used to create an `XRPose` describing the relative position of one `XRSpace` relative to another.

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

`session` Read only  
Experimental

The `XRSession` that for which this `XRFrame` describes the tracking details for all objects. The information about a specific object can be obtained by calling one of the methods on the object.

`trackedAnchors` Read only  
Experimental

An `XRAnchorSet` containing all anchors still tracked in the frame.

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

`createAnchor()` 
Experimental

Returns a `Promise` which resolves to a free-floating `XRAnchor` object.

`fillJointRadii()` 
Experimental

Populates a `Float32Array` with radii for a list of hand joint spaces. Returns `true` if successful for all spaces.

`fillPoses()` 
Experimental

Populates a `Float32Array` with the matrices of the poses, relative to a given base space. Returns `true` if all spaces have a valid pose.

`getDepthInformation()` 
Experimental

Returns an `XRCPUDepthInformation` object containing CPU depth information for the frame.

`getHitTestResults()` 
Experimental

Returns an array of `XRHitTestResult` objects containing hit test results for a given `XRHitTestSource`.

`getHitTestResultsForTransientInput()` 
Experimental

Returns an array of `XRTransientInputHitTestResult` objects containing hit test results for a given `XRTransientInputHitTestSource`.

`getJointPose()` 
Experimental

Returns an `XRJointPose` object providing the pose of a hand joint (see `XRHand`) relative to a given base space.

`getLightEstimate()` 
Experimental

Returns an `XRLightEstimate` object containing estimated lighting values for an `XRLightProbe`.

`getPose()` 
Experimental

Returns an `XRPose` object representing the spatial relationship between the two specified `XRSpace` objects.

`getViewerPose()` 
Experimental

Returns an `XRViewerPose` describing the viewer's position and orientation in a given `XRReferenceSpace`.

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

| Specification |
| --- |
| WebXR Device API # xrframe-interface |

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

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

See also
--------

* WebXR Device API
* Spatial tracking in WebXR
CSSKeyframeRule
===============

The **`CSSKeyframeRule`** interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a `@keyframes` at-rule.

CSSRule

CSSKeyframeRuleInstance properties
-------------------

*Inherits properties from its ancestor `CSSRule`.*

`CSSKeyframeRule.keyText`

Represents the key of the keyframe, like `'10%'`, `'75%'`. The `from` keyword maps to `'0%'` and the `to` keyword maps to `'100%'`.

`CSSKeyframeRule.style` Read only 

Returns a `CSSStyleDeclaration` of the CSS style associated with the keyframe.

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

*No specific methods; inherits methods from its ancestor `CSSRule`.*

Examples
--------

 The CSS includes a keyframes at-rule. This will be the first `CSSRule` returned by `document.styleSheets[0].cssRules`.
 `myRules[0]` returns a `CSSKeyframesRule` object, which will contain individual `CSSKeyFrameRule` objects for each keyframe.


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.
```

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframerule |

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

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

See also
--------

* `@keyframes`
* `CSSKeyFramesRule`
AudioTrack
==========

The **`AudioTrack`** interface represents a single audio track from one of the HTML media elements, `<audio>` or `<video>`.

The most common use for accessing an `AudioTrack` object is to toggle its `enabled` property in order to mute and unmute the track.

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

`enabled`

A Boolean value which controls whether or not the audio track's sound is enabled. Setting this value to `false` mutes the track's audio.

`id` Read only 

A string which uniquely identifies the track within the media. This ID can be used to locate a specific track within an audio track list by calling `AudioTrackList.getTrackById()`. The ID can also be used as the fragment part of the URL if the media supports seeking by media fragment per the Media Fragments URI specification.

`kind` Read only 

A string specifying the category into which the track falls. For example, the main audio track would have a `kind` of `"main"`.

`label` Read only 

A string providing a human-readable label for the track. For example, an audio commentary track for a movie might have a `label` of `"Commentary with director John Q. Public and actors John Doe and Jane Eod."` This string is empty if no label is provided.

`language` Read only 

A string specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 (RFC 5646) language code, such as `"en-US"` or `"pt-BR"`.

`sourceBuffer` Read only 

The `SourceBuffer` that created the track. Returns null if the track was not created by a `SourceBuffer` or the `SourceBuffer` has been removed from the `MediaSource.sourceBuffers` attribute of its parent media source.

Usage notes
-----------

To get an `AudioTrack` for a given media element, use the element's `audioTracks` property, which returns an `AudioTrackList` object from which you can get the individual tracks contained in the media:


```js
const el = document.querySelector("video");
const tracks = el.audioTracks;
```


You can then access the media's individual tracks using either array syntax or functions such as `forEach()`.

This first example gets the first audio track on the media:


```js
const firstTrack = tracks[0];
```


The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable `userLanguage`) and disabling any others.


```js
tracks.forEach((track) => {
  track.enabled = track.language === userLanguage;
});
```


The `language` is in standard (RFC 5646) format. For US English, this would be `"en-US"`, for example.

Example
-------

See `AudioTrack.label` for a simple example that shows how to get an array of track kinds and labels for a specified media element, filtered by kind.

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

| Specification |
| --- |
| HTML Standard # audiotrack |

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

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