recursal/MDN huggingface dataset:
CSSPseudoElement
================

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

The **`CSSPseudoElement`** interface represents a pseudo-element that may be the target of an event or animated using the Web Animations API. Instances of this interface may be obtained by calling `Element.pseudo()`.

EventTarget

CSSPseudoElementInstance properties
-------------------

`CSSPseudoElement.element` 
Experimental
 Read only 

Returns the originating/parent `Element` of the pseudo-element.

`CSSPseudoElement.type` 
Experimental
 Read only 

Returns the pseudo-element selector as a string.

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

*`CSSPseudoElement` extends `EventTarget`, so it inherits the following methods:*

Examples
--------

### Basic example using Element.pseudo

Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a `<q>` element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the `CSSPseudoElement` object representing the opening quotation mark.


```js
const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # CSSPseudoElement-interface |

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

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

See also
--------

* `Element.pseudo()`
* Web Animations API
* `Element.animate()`
GamepadPose
===========

**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.

The **`GamepadPose`** interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information).

This interface is accessible through the `Gamepad.pose` property.

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

`GamepadPose.hasOrientation` Read only  
Experimental

Returns a boolean indicating whether the gamepad is capable of returning orientation information (`true`) or not (`false`).

`GamepadPose.hasPosition` Read only  
Experimental

Returns a boolean indicating whether the gamepad is capable of returning position information (`true`) or not (`false`).

`GamepadPose.position` Read only  
Experimental

Returns the position of the `Gamepad` as a 3D vector.

`GamepadPose.linearVelocity` Read only  
Experimental

Returns the linear velocity of the `Gamepad`, in meters per second.

`GamepadPose.linearAcceleration` Read only  
Experimental

Returns the linear acceleration of the `Gamepad`, in meters per second per second.

`GamepadPose.orientation` Read only  
Experimental

Returns the orientation of the `Gamepad`, as a quarternion value.

`GamepadPose.angularVelocity` Read only  
Experimental

Returns the angular velocity of the `Gamepad`, in radians per second.

`GamepadPose.angularAcceleration` Read only  
Experimental

Returns the angular acceleration of the `Gamepad`, in meters per second per second.

Examples
--------

TBD.

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

| Specification |
| --- |
| Gamepad Extensions # gamepadpose-interface |

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

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

See also
--------

* WebVR API
* Gamepad API
CredentialsContainer
====================

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

The **`CredentialsContainer`** interface of the Credential Management API exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from `Navigator.credentials`.

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

None.

### Event handlers

None.

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

`CredentialsContainer.create()`

Returns a `Promise` that resolves with a new `Credential` instance based on the provided options, or `null` if no `Credential` object can be created. In exceptional circumstances, the `Promise` may reject.

`CredentialsContainer.get()`

Returns a `Promise` that resolves with the `Credential` instance that matches the provided parameters.

`CredentialsContainer.preventSilentAccess()`

Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty `Promise`. For example, you might call this, after a user signs out of a website to ensure that they aren't automatically signed in on the next site visit. Earlier versions of the spec called this method `requireUserMediation()`. See Browser compatibility for support details.

`CredentialsContainer.store()`

Stores a set of credentials for a user, inside a provided `Credential` instance and returns that instance in a `Promise`.

Examples
--------


```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # credentialscontainer |

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

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

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
**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.

The `USBInterface` interface of the WebUSB API provides information about an interface provided by the USB device. An interface represents a feature of the device which implements a particular protocol and may contain endpoints for bidirectional communication.

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

`USBInterface()` 
Experimental

Creates a new `USBInterface` object which will be populated with information about the interface on the provided `USBConfiguration` with the given interface number.

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

`USBInterface.interfaceNumber` Read only  
Experimental

Returns the interface number of this interface. This is equal to the `bInterfaceNumber` field of the interface descriptor defining this interface.

`USBInterface.alternate` Read only  
Experimental

Returns the currently selected alternative configuration of this interface. By default this is the `USBAlternateInterface` from `alternates` with `alternateSetting` equal to `0`. It can be changed by calling `USBDevice.selectAlternateInterface()` with any other value found in `alternates`.

`USBInterface.alternates` Read only  
Experimental

Returns an array containing instances of the `USBAlternateInterface` interface describing each of the alternative configurations possible for this interface.

`USBInterface.claimed` Read only  
Experimental

Returns whether or not this interface has been claimed by the current page by calling `USBDevice.claimInterface()`.

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

| Specification |
| --- |
| WebUSB API # usbinterface |

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

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

The **`PictureInPictureWindow`** interface represents an object able to programmatically obtain the **`width`** and **`height`** and **`resize event`** of the floating video window.

An object with this interface is obtained using the `HTMLVideoElement.requestPictureInPicture()` promise return value.

EventTarget

PictureInPictureWindowInstance properties
-------------------

*The `PictureInPictureWindow` interface doesn't inherit any properties.*

`PictureInPictureWindow.width` Read only 

Determines the width of the floating video window.

`PictureInPictureWindow.height` Read only 

Determines the height of the floating video window.

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

*The `PictureInPictureWindow` interface doesn't inherit any methods.*

Events
------

*The `PictureInPictureWindow` interface doesn't inherit any events.*

`resize`

Sent to a `PictureInPictureWindow` when the floating video window is resized.

Examples
--------

Given a `<button>` and a `<video>`, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.


```js
const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
```

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

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

See also
--------

* `Picture-in-Picture API`
BackgroundFetchUpdateUIEvent
============================

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`BackgroundFetchUpdateUIEvent`** interface of the Background Fetch API is an event type for the `backgroundfetchsuccess` and `backgroundfetchfail` events, and provides a method for updating the title and icon of the app to inform a user of the success or failure of a background fetch.

Event

ExtendableEvent

BackgroundFetchEvent

BackgroundFetchUpdateUIEventConstructor
-----------

`BackgroundFetchUpdateUIEvent()` 
Experimental

Creates a new `BackgroundFetchUIEvent` object. This constructor is not typically used, as the browser creates these objects itself for the `backgroundfetchsuccess` and `backgroundfetchfail` events.

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

*This interface doesn't implement any specific properties, but inherits properties from `Event`, and `BackgroundFetchEvent`.*

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

`BackgroundFetchUpdateUIEvent.updateUI()` 
Experimental

Updates the title and icon in the user interface to show the status of a background fetch. Resolves with a `Promise`.

Examples
--------

In this example, the `backgroundfetchsuccess` event is listened for, indicating that a fetch has completed successfully. The `updateUI()` method is then called, with a message to let the user know the episode they downloaded is ready.


```js
addEventListener("backgroundfetchsuccess", (event) => {
  const bgFetch = event.registration;

  event.waitUntil(
    (async () => {
      // Create/open a cache.
      const cache = await caches.open("downloads");
      // Get all the records.
      const records = await bgFetch.matchAll();
      // Copy each request/response across.
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // Wait for the copying to complete.
      await Promise.all(promises);

      // Update the progress notification.
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-update-ui-event |

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

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

 The **`RTCDataChannelEvent`** interface
 represents an event related to a specific `RTCDataChannel`.

Event

RTCDataChannelEventConstructor
-----------

`RTCDataChannelEvent()`

Creates a new `RTCDataChannelEvent`.

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

*Also inherits properties from `Event`.*

`channel` Read only 

Returns the `RTCDataChannel` associated with the event.

Examples
--------

In this example, the `datachannel` event handler is set up to save the data channel reference and set up handlers for the events which need to be monitored. The `channel` property provides the `RTCDataChannel` representing the connection to the other peer.


```js
pc.ondatachannel = (event) => {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```


See A simple RTCDataChannel sample for another, more complete, example of how to use data channels.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannelevent |

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

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

See also
--------

* WebRTC
* `RTCDataChannel`
* A simple RTCDataChannel sample
* `RTCPeerConnection` (the target interface for `datachannel` events)
GravitySensor
=============

The **`GravitySensor`** interface of the Sensor APIs provides on each reading the gravity applied to the device along all three axes.

To use this sensor, the user must grant permission to the `'accelerometer'` device sensor through the Permissions API. In addition, this feature may be blocked by a Permissions Policy set on your server.

EventTarget

Sensor

Accelerometer

GravitySensorConstructor
-----------

`GravitySensor()`

Creates a new `GravitySensor` object.

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

*Inherits properties from its ancestors, `Accelerometer`, `Sensor`, and `EventTarget`.*

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

*`GravitySensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.*

Events
------

*`GravitySensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.*

Example
-------

Gravity is typically read in the `reading` event callback. In the example below this occurs sixty times a second.


```js
let gravitySensor = new GravitySensor({ frequency: 60 });

gravitySensor.addEventListener("reading", (e) => {
  console.log(`Gravity along the X-axis ${gravitySensor.x}`);
  console.log(`Gravity along the Y-axis ${gravitySensor.y}`);
  console.log(`Gravity along the Z-axis ${gravitySensor.z}`);
});

gravitySensor.start();
```

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

| Specification |
| --- |
| Accelerometer # gravitysensor-interface |

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

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

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

The **`MediaStreamTrackProcessor`** interface of the `Insertable Streams for MediaStreamTrack API` consumes a `MediaStreamTrack` object's source and generates a stream of media frames.

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

`MediaStreamTrackProcessor()` 
Experimental

Creates a new `MediaStreamTrackProcessor` object.

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

`MediaStreamTrackProcessor.readable` 
Experimental

Returns a `ReadableStream`.

Examples
--------

The following example is from the article Insertable streams for MediaStreamTrack, and demonstrates a barcode scanner application, which transforms the stream accessed via `MediaStreamTrackProcessor.readable` by highlighting the barcode.


```js
const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```

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

| Specification |
| --- |
| MediaStreamTrack Insertable Media Processing using Streams # track-processor-interface |

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

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

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

The **`Geolocation`** interface represents an object able to obtain the position of the device programmatically. It gives Web content access to the location of the device. This allows a website or app to offer customized results based on the user's location.

An object with this interface is obtained using the `navigator.geolocation` property implemented by the `Navigator` object.

**Note:** For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

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

*The `Geolocation` interface neither implements, nor inherits any property.*

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

*The `Geolocation` interface doesn't inherit any method.*

`Geolocation.getCurrentPosition()`

Determines the device's current location and gives back a `GeolocationPosition` object with the data.

`Geolocation.watchPosition()`

Returns a `long` value representing the newly established callback function to be invoked whenever the device location changes.

`Geolocation.clearWatch()`

Removes the particular handler previously installed using `watchPosition()`.

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

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

See also
--------

* Using geolocation
SVGGlyphElement
===============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`SVGGlyphElement`** interface corresponds to the `<glyph>` element.

Object-oriented access to the attributes of the `<glyph>` element via the SVG DOM is not possible.

**Warning:** This interface was removed in the SVG 2 specification.

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

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

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

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGGlyphElement |

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

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

See also
--------

* `<glyph>`
URLPattern
==========

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

The **`URLPattern`** interface of the URL Pattern API matches URLs or parts of URLs against a pattern. The pattern can contain capturing groups that extract parts of the matched URL.

 More information about the syntax of patterns can be found on the API overview
 page: URL Pattern API.

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

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

`URLPattern()` 
Experimental

Returns a new `URLPattern` object based on the given pattern and base URL.

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

`hash` Read only  
Experimental

 A string containing a pattern to match the *hash* part
 of a URL.


`hostname` Read only  
Experimental

 A string containing a pattern to match the *hostname*
 part of a URL.


`password` Read only  
Experimental

 A string containing a pattern to match the *password*
 part of a URL.


`pathname` Read only  
Experimental

 A string containing a pattern to match the *pathname*
 part of a URL.


`port` Read only  
Experimental

 A string containing a pattern to match the *port* part
 of a URL.


`protocol` Read only  
Experimental

 A string containing a pattern to match the *protocol*
 part of a URL.


`search` Read only  
Experimental

 A string containing a pattern to match the *search* part
 of a URL.


`username` Read only  
Experimental

 A string containing a pattern to match the *username*
 part of a URL.


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

`exec()` 
Experimental

 Returns an object with the matched parts of the URL or `null` if the URL
 does not match.


`test()` 
Experimental

Returns `true` if the URL matches the given pattern, `false` otherwise.

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

| Specification |
| --- |
| URL Pattern Standard # urlpattern |

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

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

See also
--------

* A polyfill of `URLPattern` is available
 on GitHub
* The pattern syntax used by URLPattern is similar to the syntax used by
 path-to-regexp
SVGNumber
=========

The **`SVGNumber`** interface corresponds to the `<number>` basic data type.

An `SVGNumber` object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

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

`SVGNumber.value`

A float representing the number.

Note: If the `SVGNumber` is read-only, a `DOMException` with the code NO\_MODIFICATION\_ALLOWED\_ERR is raised on an attempt to change the value.

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

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

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

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

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

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