recursal/MDN huggingface dataset:
SpeechRecognitionResult: length property
========================================

 The **`length`** read-only property of the
 `SpeechRecognitionResult` interface returns the length of the "array"
 — the number of `SpeechRecognitionAlternative` objects contained
 in the result (also referred to as "n-best alternatives".)

 The number of alternatives contained in the result depends on what the
 `SpeechRecognition.maxAlternatives` property was set to when the speech
 recognition was first initiated.

Value
-----

A number.

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;

  console.log(event.results[0].length);
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresult-length |

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

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

See also
--------

* Web Speech API
SpeechRecognitionResult: isFinal property
=========================================

 The **`isFinal`** read-only property of the
 `SpeechRecognitionResult` interface is a boolean value that states
 whether this result is final (`true`) or not (`false`) — if so,
 then this is the final time this result will be returned; if not, then this result is an
 interim result, and may be updated later on.

Value
-----

A boolean value.

Examples
--------


```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;

  console.log(event.results[0].isFinal);
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresult-isfinal |

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

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

See also
--------

* Web Speech API
SpeechRecognitionResult: item() method
======================================

 The **`item`** getter of the
 `SpeechRecognitionResult` interface is a standard getter that allows
 `SpeechRecognitionAlternative` objects within the result to be accessed via
 array syntax.

Syntax
------


```js
item(index)
```

### Parameters

`index`

Index of the item to retrieve.

### Return value

A `SpeechRecognitionAlternative` 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-speechrecognitionresult-item |

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

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

See also
--------

* Web Speech API
CSSRule: type 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.

 The read-only **`type`** property of the
 `CSSRule` interface is a deprecated property that returns an integer
 indicating which type of rule the `CSSRule` represents.

If you need to distinguish different types of CSS rule, a good alternative is to use `constructor.name`:


```js
const sheets = Array.from(document.styleSheets);
const rules = sheets.map((sheet) => Array.from(sheet.cssRules)).flat();

for (const rule of rules) {
  console.log(rule.constructor.name);
}
```

Value
-----

`CSSRule.STYLE_RULE` (`1`)

The rule is a `CSSStyleRule`, the most common kind of rule: `selector { prop1: val1; prop2: val2; }`.

`CSSRule.IMPORT_RULE` (`3`)

The rule is a `CSSImportRule` and represents an `@import` rule.

`CSSRule.MEDIA_RULE` (`4`)

The rule is a `CSSMediaRule`.

`CSSRule.FONT_FACE_RULE` (`5`)

The rule is a `CSSFontFaceRule`

`CSSRule.PAGE_RULE` (`6`)

The rule is a `CSSPageRule`.

`CSSRule.KEYFRAMES_RULE` (`7`)

The rule is a `CSSKeyframesRule`.

`CSSRule.KEYFRAME_RULE` (`8`)

The rule is a `CSSKeyframeRule`.

`CSSRule.NAMESPACE_RULE` (`10`)

The rule is a `CSSNamespaceRule`.

`CSSRule.COUNTER_STYLE_RULE` (`11`)

The rule is a `CSSCounterStyleRule`.

`CSSRule.SUPPORTS_RULE` (`12`)

The rule is a `CSSSupportsRule`.

`CSSRule.FONT_FEATURE_VALUES_RULE` (`14`)

The rule is a `CSSFontFeatureValuesRule`.

The values `CSSRule.UNKNOWN_RULE` (`0`), `CSSRule.CHARSET_RULE` (`2`), `CSSRule.DOCUMENT_RULE` (`13`), `CSSRule.VIEWPORT_RULE` (`14`), and `CSSRule.REGION_STYLE_RULE` (`16`) cannot be obtained anymore.

Examples
--------


```js
const rules = document.styleSheets[0].cssRules;
console.log(rules[0].type);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # concept-css-rule-type |

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

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

 The **`parentStyleSheet`** property of the
 `CSSRule` interface returns the `StyleSheet` object in which
 the current rule is defined.

Value
-----

A `StyleSheet` object.

Examples
--------


```js
const docRules = document.styleSheets[0].cssRules;
console.log(docRules[0].parentStyleSheet == document.styleSheets[0]); // returns true
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-parentstylesheet |

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

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

 The **`cssText`** property of the `CSSRule`
 interface returns the actual text of a `CSSStyleSheet` style-rule.


**Note:** Do not confuse this property with element-style
 `CSSStyleDeclaration.cssText`.


 Be aware that this property can no longer be set directly, as it is now specified
 to be *functionally* modify-only, and silently so. In other words, attempting to
 set it *does absolutely nothing*, and doesn't even omit a warning or error.
 Furthermore, it has no settable sub-properties. Therefore, to modify it, use the
 stylesheet's `cssRules``[index]` properties
 `.selectorText` and
 `.style` (or its sub-properties). See Using dynamic styling information for details.

Value
-----

A string containing the actual text of the `CSSStyleSheet` rule.

Examples
--------


```css
body {
  background-color: darkblue;
}
```



```js
let stylesheet = document.styleSheets[0];
console.log(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; }
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-csstext |

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

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

 The **`parentRule`** property of the `CSSRule`
 interface returns the containing rule of the current rule if this exists, or otherwise
 returns null.

Value
-----

A `CSSRule` which is the type of the containing rules. If the current rule is inside a media query, this would return `CSSMediaRule`. Otherwise it returns null.

Examples
--------


```css
@media (min-width: 500px) {
  .box {
    width: 100px;
    height: 200px;
    background-color: red;
  }

  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let childRules = myRules[0].cssRules;
console.log(childRules[0].parentRule); // a CSSMediaRule
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-parentrule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLFontElement: face 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.

 The obsolete
 **`HTMLFontElement.face`**
 property is a string that reflects the `face` HTML attribute, containing a comma-separated list of one or more font
 names.

 The document text, in the default style, is rendered as the first font face that the
 client's browser supports. If no font listed is installed on the local system, the
 browser typically defaults to the proportional or fixed-width font for that system.

The format of the string must follow one of the following HTML microsyntax:

| Microsyntax | Description | Examples |
| --- | --- | --- |
| List of one or more valid font family names | *A list of font names, that have to be present on the local system* | `courier,verdana` |

Value
-----

A string.

Examples
--------


```js
// Assumes there is <font id="f"> element in the HTML

const f = document.getElementById("f");
f.face = "arial";
```

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

 The `<font>` element has been deprecated and is no longer supported and, as a result, neither is
 `<font>.face`.

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

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

See also
--------

* The `HTMLFontElement` interface it belongs to.
HTMLFontElement: color 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.

 The obsolete
 **`HTMLFontElement.color`**
 property is a string that reflects the `color` HTML attribute, containing either a named color or a color specified in the
 hexadecimal #RRGGBB format.

The format of the string must follow one of the following HTML microsyntaxes:

| Microsyntax | Description | Examples |
| --- | --- | --- |
| Valid name color string | *nameOfColor (case insensitive)* | `Green`, `green`, `GREEN` |
| Valid hex color string | *in* `RGB format`*: #RRGGBB* | `#008000` |
| RGB using decimal values | *rgb(x,x,x) (x in 0-255 range)* | `rgb(0 128 0)` |

Value
-----

A string.

Examples
--------


```js
// Assumes there is <font id="f"> element in the HTML

const f = document.getElementById("f");
f.color = "green";
```

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

The `<font>` element has been deprecated and is no longer supported and, as a result, neither is `<font>.color`.

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

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

See also
--------

* The `HTMLFontElement` interface it belongs to.
HTMLFontElement: size 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.

 The obsolete
 **`HTMLFontElement.size`** property is a
 string that reflects the `size` HTML
 attribute. It contains either a font size ranging from 1 to 7 or a
 number relative to the default value 3, for example -2 or +1.

The format of the string must follow one of the following HTML microsyntaxes:

| Microsyntax | Description | Examples |
| --- | --- | --- |
| Valid size number string | *integer number in the range of 1-7* | `6` |
| Relative size string | *+x or -x, where x is a number relative to 3 (the result should be in the range of 1-7)* | `+2-1` |

Value
-----

A string.

Examples
--------


```js
// Assumes there is <font id="f"> element in the HTML

const f = document.getElementById("f");
f.size = "6";
```

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

 The `<font>` element has been deprecated and is no longer supported and, as a result, neither is
 `<font>.size`.

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

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

See also
--------

* The `HTMLFontElement` interface it belongs to.
GPUPipelineError: GPUPipelineError() constructor
================================================

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

 The **`GPUPipelineError()`** constructor creates a new
 `GPUPipelineError` object instance.

Syntax
------


```js
new GPUPipelineError(message, options)
```

### Parameters

`message` Optional

A string providing a human-readable message that explains why the error occurred. If not specified, `message` defaults to an empty string (`""`).

`options`

An object, which can contain the following properties:

`reason`

An enumerated value that defines the reason the pipeline creation failed in a machine-readable way. The value can be one of:

* `"internal"`: Pipeline creation failed because of an internal error (see `GPUInternalError` for more information about these kinds of error).
* `"validation"`: Pipeline creation failed because of a validation error (see `GPUValidationError` for more information about these kinds of error).


Examples
--------

A developer would not manually use the constructor to create a `GPUPipelineError` object. The user agent uses this constructor to create an appropriate object when a `Promise` returned by a `GPUDevice.createComputePipelineAsync()` or `GPUDevice.createRenderPipelineAsync()` call rejects, signalling a pipeline failure.

See the main `GPUPipelineError` page for an example involving a `GPUPipelineError` object instance.

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

| Specification |
| --- |
| WebGPU # dom-gpupipelineerror-constructor |

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

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

See also
--------

* The WebGPU API
* WebGPU Error Handling best practices
GPUPipelineError: reason property
=================================

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

 The **`reason`** read-only property of the
 `GPUPipelineError` interface defines the reason the pipeline creation failed in a machine-readable way.

Value
-----

An enumerated value that can be one of:

`"internal"`

Pipeline creation failed because of an internal error (see `GPUInternalError` for more information about these kinds of error.)

`"validation"`

Pipeline creation failed because of a validation error (see `GPUValidationError` for more information about these kinds of error.)

Examples
--------

See the main `GPUPipelineError` page for an example involving a `GPUPipelineError` object instance.

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

| Specification |
| --- |
| WebGPU # dom-gpupipelineerror-reason |

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

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

See also
--------

* The WebGPU API
Storage: removeItem() method
============================

 The **`removeItem()`** method of the `Storage`
 interface, when passed a key name, will remove that key from the given
 `Storage` object if it exists.
 The **`Storage`** interface of the Web Storage API provides access to a
 particular domain's session or local storage.

If there is no item associated with the given key, this method will do nothing.

Syntax
------


```js
removeItem(keyName)
```

### Parameters

`keyName`

A string containing the name of the key you want to remove.

### Return value

None (`undefined`).

Examples
--------

 The following function creates three data items inside local storage, then removes the
 `image` data item.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```


We can do the same for the session storage.


```js
function populateStorage() {
  sessionStorage.setItem("bgcolor", "red");
  sessionStorage.setItem("font", "Helvetica");
  sessionStorage.setItem("image", "myCat.png");

  sessionStorage.removeItem("image");
}
```


**Note:** To see this used within a real-world example, see our Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

See also
--------

Using the Web Storage API
Storage: setItem() method
=========================

 The **`setItem()`** method of the `Storage`
 interface, when passed a key name and value, will add that key to the given
 `Storage` object, or update that key's value if it already exists.

Syntax
------


```js
setItem(keyName, keyValue)
```

### Parameters

`keyName`

A string containing the name of the key you want to create/update.

`keyValue`

 A string containing the value you want to give the key you are
 creating/updating.


### Return value

None (`undefined`).

### Exceptions

`QuotaExceededError` `DOMException`

Thrown if the storage run out of disk quota or the user declined to grant you more space.

Examples
--------

The following function creates three data items inside local storage.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");
}
```


**Note:** To see this used within a real-world example, see our Web Storage Demo.

`Storage` only supports storing and retrieving strings. If you want to save other data types, you have to convert them to strings. For plain objects and arrays, you can use `JSON.stringify()`.


```js
const person = { name: "Alex" };
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]"; not useful!
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }
```


However, there's no generic way to store arbitrary data types. Furthermore, the retrieved object is a deep copy of the original object and mutations to it do not affect the original object.

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

| Specification |
| --- |
| HTML Standard # dom-storage-setitem-dev |

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

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

See also
--------

* Storage.getItem()
* Storage.removeItem()
* Using the Web Storage API
Storage: key() method
=====================

 The **`key()`** method of the `Storage` interface,
 when passed a number n, returns the name of the nth key in a given `Storage`
 object. The order of keys is user-agent defined, so you should not rely on it.

Syntax
------


```js
key(index)
```

### Parameters

`index`

 An integer representing the number of the key you want to get the name of. This is a
 zero-based index.


### Return value

 A string containing the name of the key. If the index does not exist,
 `null` is returned.

Examples
--------

The following function iterates over the local storage keys:


```js
function forEachKey(callback) {
  for (let i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```


 The following function iterates over the local storage keys and gets the value set for
 each key:


```js
for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```


**Note:** For a real-world example, see our Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

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

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

See also
--------

* Using the Web Storage API