recursal/MDN huggingface dataset:
WebGLActiveInfo: size property
==============================

The read-only **`WebGLActiveInfo.size`** property is a `Number` representing the size of the requested data returned by calling the `getActiveAttrib()` or `getActiveUniform()` methods.

Examples
--------


```js
const activeAttrib = gl.getActiveAttrib(program, index);
activeAttrib.size;

const activeUniform = gl.getActiveUniform(program, index);
activeUniform.size;
```

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

| Specification |
| --- |
| WebGL Specification # DOM-WebGLActiveInfo-size |

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

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

See also
--------

* `WebGLActiveInfo`
WebGLActiveInfo: name property
==============================

The read-only **`WebGLActiveInfo.name`** property represents the name of the requested data returned by calling the `getActiveAttrib()` or `getActiveUniform()` methods.

Examples
--------


```js
const activeAttrib = gl.getActiveAttrib(program, index);
activeAttrib.name;

const activeUniform = gl.getActiveUniform(program, index);
activeUniform.name;
```

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

| Specification |
| --- |
| WebGL Specification # DOM-WebGLActiveInfo-name |

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

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

See also
--------

* `WebGLActiveInfo`
WebGLActiveInfo: type property
==============================

The read-only **`WebGLActiveInfo.type`** property represents the type of the requested data returned by calling the `getActiveAttrib()` or `getActiveUniform()` methods.

Examples
--------


```js
const activeAttrib = gl.getActiveAttrib(program, index);
activeAttrib.type;

const activeUniform = gl.getActiveUniform(program, index);
activeUniform.type;
```

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

| Specification |
| --- |
| WebGL Specification # DOM-WebGLActiveInfo-type |

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

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

See also
--------

* `WebGLActiveInfo`
CSSContainerRule: containerName property
========================================

The read-only **`containerName`** property of the `CSSContainerRule` interface represents the container name of the associated CSS `@container` at-rule.

For example, the value of `containerName` for the `@container` below is `sidebar`:


```css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}
```

Value
-----

 A string that contains the `container-name` of the `@container` associated with this `CSSContainerRule`.
 If the `@container` is not named, the function returns the empty string (`""`).

Examples
--------

 The example below defines a named `@container` rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is very similar to that in the `@container` example Creating named container contexts.
```

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>
```


```
// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}
```


First we define the HTML for a `card` (`<div>`) contained within a `post`.


```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```


 The CSS for the container element specifies the type of the container, and may also specify a name.
 The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.


```html
<style id="examplestyles">
 .post {
 container-type: inline-size;
 container-name: sidebar;
 }

 /\* Default heading styles for the card title \*/
 .card h2 {
 font-size: 1em;
 }

 @container sidebar (min-width: 700px) {
 .card {
 font-size: 2em;
 }
 }
</style>
```


 The code below gets the `HTMLStyleElement` associated with the example using its `id`, and then uses its `sheet` property to get the `StyleSheet`.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
 Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
 Last of all, we log the container name and query properties (the code that does the logging is not shown).


```js
const exampleStylesheet = document.getElementById("examplestyles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
```


 The example output is shown below.
 The log section lists the container name string.
 The title in the card section should double in size as the width of the page goes over 700px.

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

| Specification |
| --- |
| CSS Containment Module Level 3 # dom-csscontainerrule-containername |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCErrorEvent: error property
=============================

 The read-only `RTCErrorEvent` property **`error`**
 contains an `RTCError` object describing the details of the error which the
 event is announcing.

Value
-----

 An `RTCError` object whose properties provide details about the error
 which has occurred in the context of a WebRTC operation.

Examples
--------

 In this example, a handler is established for an `RTCDataChannel`'s
 `error` event.


```js
dataChannel.addEventListener("error", (event) => {
  let error = event.error;

  if (error.errorDetail === "sdp-syntax-error") {
    let errLine = error.sdpLineNumber;
    let errMessage = error.message;

    let alertMessage = `A syntax error occurred interpreting line ${errLine} of the SDP: ${errMessage}`;
    showMyAlertMessage("Data Channel Error", alertMessage);
  } else {
    terminateMyConnection();
  }
});
```


 If the error is an SDP syntax error—indicated by its `errorDetail` property being `sdp-syntax-error`—, a message string is
 constructed to present the error message and the line number within the SDP at which the
 error occurred. This message is then displayed using a function called
 `showMyAlertMessage()`, which stands in for whatever output mechanism this
 code might use.

 Any other error is treated as terminal, causing a `terminateMyConnection()`
 function to be called.

 The above example uses `addEventListener()` to add the handler for `error` events. You can also
 use the `RTCDataChannel` object's `onerror` event handler property, like this:


```js
dataChannel.onerror = (event) => {
  let error = event.error;

  /\* and so forth \*/
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcerrorevent-error |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: deleteRule() method
=====================================

The **`deleteRule()`** method of the `CSSKeyframeRule` interface deletes the `CSSKeyFrameRule` that matches the specified keyframe selector.

Syntax
------


```js
deleteRule(select)
```

### Parameters

`select`

A string which contains the keyframe selector of the rule to be deleted, which must be:

* a comma-separated list of percentage values between 0% and 100%;
* or, the keywords `from` or `to`

Note that the number and order of the values in the specified keyframe selector must match those of the targeted keyframe rule(s). White-space is disregarded.

### Return value

None (`undefined`).

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. Returning the `cssRules` property would return a `CSSRuleList` containing two rules.

After deleting a rule with `deleteRule()` the `cssRules` property returns a `CSSRuleList` containing one rule.


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

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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.deleteRule("to");
console.log(keyframes.cssRules); // a CSSRuleList object with one rule
```

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

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-deleterule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: findRule() method
===================================

The **`findRule()`** method of the `CSSKeyframeRule` interface finds the `CSSKeyFrameRule` that matches the specified keyframe selector.

Syntax
------


```js
findRule(select)
```

### Parameters

`select`

A string which contains the keyframe selector of the rule to be found, which must be:

* a comma-separated list of percentage values between 0% and 100%;
* or, the keywords `from` or `to`

Note that the number and order of the values in the specified keyframe selector must match those of the targeted keyframe rule(s). White-space is disregarded.

### Return value

A `CSSKeyframeRule` which is the last matching rule. If no rules are found, nothing is returned.

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. Calling findRule("to") returns a `CSSKeyframeRule` representing the second rule.


```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.findRule("to")); // a CSSKeyframeRule object
```

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule-findrule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: name property
===============================

The **`name`** property of the `CSSKeyframeRule` interface gets and sets the name of the animation as used by the `animation-name` property.

Value
-----

A string.

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, with the `name` set to "slidein".


```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.name); // "slidein"
```

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

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-name |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: appendRule() method
=====================================

The **`appendRule()`** method of the `CSSKeyframeRule` interface appends a `CSSKeyFrameRule` to the end of the rules.

Syntax
------


```js
appendRule(rule)
```

### Parameters

`rule`

A string containing a keyframe rule.

### Return value

None (`undefined`).

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. Returning the `cssRules` property would return a `CSSRuleList` containing one rule.

After appending another rule with `appendRule` the `cssRules` property returns a `CSSRuleList` containing two rules.


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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.appendRule("to {transform: translateX(100%);}");
console.log(keyframes.cssRules); // a CSSRuleList object with two rules
```

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule-appendrule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: cssRules property
===================================

The read-only **`cssRules`** property of the `CSSKeyframeRule` interface returns a `CSSRuleList` containing the rules in the keyframes at-rule.

Value
-----

A `CSSRuleList`.

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. The `cssRules` property returns a `CSSRuleList` containing two rules.


```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.cssRules); // a CSSRuleList object with two rules
```

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

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-cssrules |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaDevices: enumerateDevices() method
=======================================

 The `MediaDevices` method **`enumerateDevices()`** requests a list of the currently available media input and output devices, such as microphones, cameras, headsets, and so forth.
 The returned `Promise` is resolved with an array of `MediaDeviceInfo` objects describing the devices.

 The returned list will omit any devices that are blocked by the document Permission Policy: `microphone`, `camera`, `speaker-selection` (for output devices), and so on.
 Access to particular non-default devices is also gated by the Permissions API, and the list will omit devices for which the user has not granted explicit permission.

Syntax
------


```js
enumerateDevices()
```

### Parameters

None.

### Return value

 A `Promise` that is fulfilled with an array of `MediaDeviceInfo` objects.
 Each object in the array describes one of the available media input and output devices.
 The order is significant — the default capture devices will be listed first.

Other than default devices, only devices for which permission has been granted are "available".

If enumeration fails, the promise is rejected.

Security requirements
---------------------

Access to the API is subject to the following constraints:

* The method must be called in a secure context.
Examples
--------

Here's an example of using `enumerateDevices()`. It outputs a list of the device IDs, with their labels if available.


```js
if (!navigator.mediaDevices?.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
} else {
  // List cameras and microphones.
  navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })
    .catch((err) => {
      console.error(`${err.name}: ${err.message}`);
    });
}
```


This might produce:
```

videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```


 or if one or more `MediaStream`s are active or persistent permissions are
 granted:
```

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-enumeratedevices |

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

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

See also
--------

* `MediaDevices.getUserMedia`
* WebRTC - the introductory page to the API
* Media Capture and Streams API - the API for the media stream objects
* Taking webcam photos - a
 tutorial on using `getUserMedia()` for taking photos rather than video.
MediaDevices: getSupportedConstraints() method
==============================================

 The
 **`getSupportedConstraints()`**
 method of the `MediaDevices` interface returns an object based on the
 `MediaTrackSupportedConstraints` dictionary, whose member fields each
 specify one of the constrainable properties the user agent understands.

Syntax
------


```js
getSupportedConstraints()
```

### Parameters

None.

### Return value

 A new object based on the `MediaTrackSupportedConstraints` dictionary
 listing the constraints supported by the user agent. Because only constraints supported
 by the user agent are included in the list, each of these Boolean properties has the
 value `true`.

Examples
--------

This example outputs a list of the constraints supported by your browser.
```

<p>The following media constraints are supported by your browser:</p>

<ul id="constraintList"></ul>
```


```
body {
  font:
    15px Arial,
    sans-serif;
}
```



```js
const constraintList = document.querySelector("#constraintList");
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

for (const constraint of Object.keys(supportedConstraints)) {
  const elem = document.createElement("li");
  elem.innerHTML = `<code>${constraint}</code>`;
  constraintList.appendChild(elem);
}
```

### Result

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-getsupportedconstraints |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerRegistration: periodicSync property
================================================

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

 The **`periodicSync`** read-only property of
 the `ServiceWorkerRegistration` interface returns a reference to the
 `PeriodicSyncManager` interface, which allows for registering of tasks to
 run at specific intervals.

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

Value
-----

A `PeriodicSyncManager` object.

Examples
--------

 You can access the property from either your main script or the registered service
 worker.

Here is an example from the main script:


```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("periodicSync" in registration) {
  // Background Periodic Sync functionality
  const periodicSync = registration.periodicSync;
}
```


From the service worker:


```js
// service worker script

const periodicSync = self.registration.periodicSync;
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-serviceworkerregistration-periodicsync |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
ServiceWorkerRegistration: scope property
=========================================

 The **`scope`** read-only property of the
 `ServiceWorkerRegistration` interface returns a unique identifier for a
 service worker registration. The service worker must be on the same origin as the
 document that registers the `ServiceWorker`.

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

Value
-----

A unique identifier.

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

| Specification |
| --- |
| Service Workers # service-worker-registration-scope |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
ServiceWorkerRegistration: updatefound event
============================================

 The **`updatefound`** event of the
 `ServiceWorkerRegistration` interface is fired any time the `ServiceWorkerRegistration.installing` property acquires a new service worker.

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

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("updatefound", (event) => {});

onupdatefound = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------


```js
const registration = await navigator.serviceWorker.getRegistration();
if (registration) {
  registration.addEventListener("updatefound", () => {
    console.log("Service Worker update found!");
  });
}
```

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

| Specification |
| --- |
| Service Workers # dom-serviceworkerregistration-onupdatefound |

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

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

See also
--------

* Using Service Workers
ServiceWorkerRegistration: active property
==========================================

 The **`active`** property of the
 `ServiceWorkerRegistration` interface returns a service worker whose
 `ServiceWorker.state` is `activating` or `activated`.
 This property is initially set to `null`.

 An active worker controls a `Client` if the client's URL
 falls within the scope of the registration (the `scope` option set when
 `ServiceWorkerContainer.register` is first called.)


**Note:** Once an active worker is `activating`, neither a
 runtime script error nor a force termination of the active worker prevents the active
 worker from getting `activated`.


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

Value
-----

 A `ServiceWorker` object's property, if it is currently in an
 `activating` or `activated` state.

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-active |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
ServiceWorkerRegistration: installing property
==============================================

 The **`installing`** property of the
 `ServiceWorkerRegistration` interface returns a service worker whose
 `ServiceWorker.state` is `installing`. This property is
 initially set to `null`.

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

Value
-----

 A `ServiceWorker` object, if it is currently in an `installing`
 state.

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-installing |

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

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

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers