recursal/MDN huggingface dataset:
KeyframeEffect: setKeyframes() method
=====================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`setKeyframes()`** method of the `KeyframeEffect` interface replaces the keyframes that make up the affected `KeyframeEffect` with a new set of keyframes.

Syntax
------


```js
setKeyframes(keyframes)
```

### Parameters

`keyframes`

A keyframe object or `null`. If set to `null`, the keyframes are replaced with a sequence of empty keyframes.

More information about a keyframe object's format.

### Return value

None (`undefined`).

### Exceptions

| Exception | Explanation |
| --- | --- |
| `TypeError` | 
 One or more of the frames were not of the correct type of object, the
 keyframes were not
 loosely sorted by offset, or a keyframe existed with an offset of less than 0 or more than 1.
  |

**Note:** If the keyframes cannot be processed or are malformed, the `KeyframeEffect`'s keyframes are not modified.

Examples
--------


```js
// passing an array of keyframe objects
existingKeyframeEffect.setKeyframes([
  { color: "blue" },
  { color: "green", left: "10px" },
]);

// passing an object with arrays for values
existingKeyframeEffect.setKeyframes({
  color: ["blue", "green"],
  left: ["0", "10px"],
});

// passing a single-member object
existingKeyframeEffect.setKeyframes({
  color: "blue",
});
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-setkeyframes |

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

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

See also
--------

* KeyframeEffect Interface
* Web Animations API
KeyframeEffect: iterationComposite property
===========================================

The **`iterationComposite`** property of a `KeyframeEffect` resolves how the animation's property value changes accumulate or override each other upon each of the animation's iterations.

Value
-----

One of the following:

`replace`

The `keyframeEffect` value produced is independent of the current iteration.

`accumulate`

Subsequent iterations of the `keyframeEffect` build on the final value of the previous iteration.

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

| Specification |
| --- |
| Web Animations Level 2 # dom-keyframeeffect-iterationcomposite |

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

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

See also
--------

* Web Animations API
* Property of both `KeyframeEffect` objects.
KeyframeEffect: target property
===============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`target`** property of a `KeyframeEffect` interface represents the element or pseudo-element being animated. It may be `null` for animations that do not target a specific element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

Value
-----

An `Element` or `null`.

Examples
--------

In the Follow the White Rabbit example, `whiteRabbit` sets the `target` element to be animated:


```js
const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
  { duration: 3000, fill: "forwards" },
);

// returns <div id="rabbit">Click the rabbit's ears!</div>
rabbitDownKeyframes.target;
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-target |

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

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

See also
--------

* Web Animations API
* Property of `KeyframeEffect` objects.
KeyframeEffect: composite property
==================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`composite`** property of a `KeyframeEffect` resolves how an element's animation impacts its underlying property values.

Value
-----

To understand these values, take the example of a `keyframeEffect` value of `blur(2)` working on an underlying property value of `blur(3)`.

`replace`

The `keyframeEffect` **overrides** the underlying value it is combined with: `blur(2)` replaces `blur(3)`.

`add`

The `keyframeEffect` is **added** to the underlying value with which it is combined (aka *additive*): `blur(2) blur(3)`.

`accumulate`

The keyframeEffect is **accumulated** on to the underlying value: `blur(5)`.

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-composite |

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

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

See also
--------

* Web Animations API
* Property of `KeyframeEffect` objects
* Composite operation
KeyframeEffect: getKeyframes() method
=====================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`getKeyframes()`** method of a `KeyframeEffect` returns an Array of the computed keyframes that make up this animation along with their computed offsets.

Syntax
------


```js
getKeyframes()
```

### Parameters

None.

### Return value

Returns a sequence of objects with the following format:

`property value pairs`

As many property value pairs as are contained in each keyframe of the animation.

`offset`

The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced using `KeyframeEffect.spacing`.

`computedOffset`

The computed offset for this keyframe, calculated when the list of computed keyframes was produced according to `KeyframeEffect.spacing`. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.

`easing`

The easing function used from this keyframe until the next keyframe in the series.

`composite`

The `KeyframeEffect.composite` operation used to combine the values specified in this keyframe with the underlying value. This will be absent if the composite operation specified on the effect is being used.

Examples
--------

In the Red Queen Race example, we can inspect Alice and the RedQueen's animation to see its individual keyframes like so:


```js
// Return the array of keyframes

redQueen_alice.effect.getKeyframes();
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-getkeyframes |

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

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

See also
--------

* Web Animations API
* Method of `KeyframeEffect` objects.
KeyframeEffect: pseudoElement property
======================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`pseudoElement`** property of a `KeyframeEffect` interface is a string representing the pseudo-element being animated. It may be `null` for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

**Note:** If set to the legacy single-colon syntax of `:before`, `:after`, `:first-letter`, or `:first-line`, the string is transformed into its double-colon modern version (`::before`, `::after`, `::first-letter`, and `::first-line`, respectively).

Value
-----

A string or `null`.

Exceptions
----------

`SyntaxError` `DOMException`

Thrown when trying to set this property to an element, an invalid pseudo-element (either non-existent or misspelled). The property is then left unchanged.

Examples
--------


```html
<div id="text">Some text</div>
<pre id="log"></pre>
```



```css
#text::after {
  content: "⭐";
  display: inline-block; /\* Needed as the `transform` property does not apply to inline elements \*/
}
#text::before {
  content: "😊";
  display: inline-block;
}
```



```js
const log = document.getElementById("log");
const text = document.getElementById("text");

// Create the keyframe and launch the animation
const animation = text.animate(
  [
    { transform: "rotate(0)" },
    { transform: "rotate(180deg)" },
    { transform: "rotate(360deg)" },
  ],
  { duration: 3000, iterations: Infinity, pseudoElement: "::after" },
);

// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
  requestAnimationFrame(logPseudoElement);
}

// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);
}

switchPseudoElement();
logPseudoElement();
```

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-pseudoelement |

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

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

See also
--------

* Web Animations API
* `KeyframeEffect` interface
* `KeyframeEffect()` constructor
* `target` property
SpeechRecognitionEvent: interpretation property
===============================================

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`interpretation`** read-only property of the
 `SpeechRecognitionEvent` interface returns the semantic meaning of what the
 user said.

 This might be determined, for instance, through the SISR specification of semantics in
 a grammar (see
 Semantic Interpretation for Speech Recognition (SISR) Version 1.0
 for specification and examples.)

Value
-----

 The returned value can be of any type. If no semantic interpretation has been returned
 by the speech recognition system, `null` will be returned.

Examples
--------


```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.interpretation);
};
```

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

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

See also
--------

* Web Speech API
SpeechRecognitionEvent: resultIndex property
============================================

 The **`resultIndex`** read-only property of the
 `SpeechRecognitionEvent` interface returns the lowest index value result in
 the `SpeechRecognitionResultList` "array" that has actually changed.

 The `SpeechRecognitionResultList` object is not an array, but it has a
 getter that allows it to be accessed by array syntax.

Value
-----

A number.

Examples
--------


```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.resultIndex); // returns 0 if there is only one result
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionevent-resultindex |

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

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

See also
--------

* Web Speech API
SpeechRecognitionEvent: results property
========================================

 The **`results`** read-only property of the
 `SpeechRecognitionEvent` interface returns a
 `SpeechRecognitionResultList` object representing all the speech
 recognition results for the current session.

 Specifically this object will contain all final results that have been returned,
 followed by the current best hypothesis for all interim results. When subsequent
 `result` events are fired, interim results may be overwritten by a newer
 interim result or by a final result — they may even be removed, if they are at the end
 of the "results" array and the array length decreases. Final results on the other hand
 will not be overwritten or removed.

Value
-----

A `SpeechRecognitionResultList` object.

Examples
--------

 This code is excerpted from our
 Speech color changer example.


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionevent-results |

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

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

See also
--------

* Web Speech API
SpeechRecognitionEvent: emma property
=====================================

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`emma`** read-only property of the
 `SpeechRecognitionEvent` interface returns an Extensible
 MultiModal Annotation markup language (EMMA) — XML — representation of the
 result.

**Note:** EMMA is defined in the specification EMMA: Extensible MultiModal Annotation markup language. You can see multiple EMMA examples in the spec.

Value
-----

 A valid XML document. The exact contents can vary across user agents and recognition
 engines, but all supporting implementations will expose a valid XML document complete
 with an EMMA namespace. If the speech recognition system does not supply EMMA data then
 the user agent will return `null`.

Examples
--------


```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(event.emma);
};
```

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

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

See also
--------

* Web Speech API
SpeechSynthesisErrorEvent: SpeechSynthesisErrorEvent() constructor
==================================================================

The **`SpeechSynthesisErrorEvent()`** constructor creates a new `SpeechSynthesisErrorEvent` object.

**Note:** A web developer doesn't typically need to call this constructor, as the browser creates these objects itself when firing events.

Syntax
------


```js
new SpeechSynthesisErrorEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `error`.


`options`

An object that, *in addition to the properties defined in `SpeechSynthesisEvent()`*, has the following properties:

`error`

A string containing the error reason. Possible values are:

`canceled`

A `SpeechSynthesis.cancel` method call caused the `SpeechSynthesisUtterance` to be removed from the queue before speech started.

`interrupted`

A `SpeechSynthesis.cancel` method call caused the `SpeechSynthesisUtterance` to be interrupted after speech had started but before it completed.

`audio-busy`

The operation couldn't be completed at this time because the user-agent couldn't access the audio output device (for example, the user may need to correct this by closing another application).

`audio-hardware`

The operation couldn't be completed at this time because the user-agent couldn't identify an audio output device (for example, the user may need to connect a speaker or configure system settings.)

`network`

The operation couldn't be completed at this time because some required network communication failed.

`synthesis-unavailable`

The operation couldn't be completed at this time because no synthesis engine was available (for example, the user may need to install or configure a synthesis engine).

`synthesis-failed`

The operation failed because the synthesis engine raised an error.

`language-unavailable`

No appropriate voice was available for the language set in `SpeechSynthesisUtterance.lang`. You can use the `window.speechSynthesis.getVoices()` method to determine which voices and languages are supported in the user's browser.

`voice-unavailable`

The voice set in `SpeechSynthesisUtterance.voice` was not available.

`text-too-long`

The contents of the `SpeechSynthesisUtterance.text` attribute was too long to synthesize.

`invalid-argument`

The content of the `SpeechSynthesisUtterance.rate`, `SpeechSynthesisUtterance.pitch` or `SpeechSynthesisUtterance.volume` property was not valid.

`not-allowed`

The operation's start was not allowed.


### Return value

A new `SpeechSynthesisErrorEvent` object.

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesiserrorevent-speechsynthesiserrorevent |

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

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

See also
--------

* `SpeechSynthesisEvent`
RTCTransportStats: type property
================================

The **`type`** property of the `RTCTransportStats` dictionary is a string with the value `"transport"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"transport"` indicates that the statistics available in the current step are those defined in `RTCTransportStats`.

Value
-----

A string with the value `"transport"`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

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

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

The **`timestamp`** property of the `RTCTransportStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

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

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

The **`id`** property of the `RTCTransportStats` dictionary is a string which uniquely identifies the object for which this object provides statistics.

Using the `id`, you can correlate this statistics object with others, in order to monitor statistics over time for a given WebRTC object, such as an `RTCDtlsTransport`, or an `RTCPeerConnection`.

Value
-----

A string that uniquely identifies the object for which this `RTCTransportStats` object provides statistics.

The format of the ID string is not defined by the specification, so you cannot reliably make any assumptions about the contents of the string, or assume that the format of the string will remain unchanged for a given object type.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-id |

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

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

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

 The **`type`** read-only property of the
 `CSSPseudoElement` interface returns the type of the pseudo-element as a
 string, represented in the form of a CSS selector.

Value
-----

A string containing one of the following values:

* `"::before"`
* `"::after"`
* `"::marker"`
Examples
--------

 The example below demonstrates the relationship between
 `CSSPseudoElement.type` and `Element.pseudo()`:


```js
const myElement = document.querySelector("q");
const mySelector = "::after";
const cssPseudoElement = myElement.pseudo(mySelector);
const typeOfPseudoElement = cssPseudoElement.type;

console.log(mySelector === typeOfPseudoElement); // Outputs true
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-type |

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

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

See also
--------

* `Element.pseudo()`
* Index of standard pseudo-elements