recursal/MDN huggingface dataset:
CSSCounterStyleRule: speakAs property
=====================================

The **`speakAs`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `speak-as` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `speakAs` gives us the value "bullets".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
  speak-as: bullets;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].speakAs); // "bullets"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-speakas |

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

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

The **`prefix`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `prefix` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `prefix` gives us the value "Chapter ".


```css
@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapter ";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].prefix); // "Chapter "
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-prefix |

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

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

The **`pad`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `pad` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `pad` gives us the value "0".


```css
@counter-style box-corner {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].pad); // "0"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-pad |

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

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

The **`additiveSymbols`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `additive-symbols` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string.

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `additiveSymbols` gives us the value " V 5, IV 4, I 1".


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].additiveSymbols); // " V 5, IV 4, I 1"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-additivesymbols |

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

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

The **`range`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `range` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `range` gives us the value "2 4, 7 9".


```css
@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].range); // "2 4, 7 9"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-range |

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

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

The **`fallback`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `fallback` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string.

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `fallback` gives us the value "disc".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
  fallback: disc;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].fallback); // "disc"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-fallback |

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

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

The **`suffix`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `suffix` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `suffix` gives us the value ": ".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
  negative: "-";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].suffix); // ": "
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-suffix |

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

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

The **`negative`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `negative` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `negative` gives us the value "-".


```css
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "-";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].negative); // "-"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-negative |

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

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

The **`system`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `system` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `system` gives us the value "fixed".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].system); // "fixed"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-system |

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

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

 The read-only **`port`** property of the
 `AudioWorkletNode` interface returns the associated
 `MessagePort`. It can be used to communicate between the node and its
 associated `AudioWorkletProcessor`.


**Note:** The port at the other end of the channel is
 available under the `port` property of the
 processor.


Value
-----

 The `MessagePort` object that is connecting the
 `AudioWorkletNode` and its associated `AudioWorkletProcessor`.

Examples
--------

 To demonstrate bidirectional communication capabilities, we'll create an
 `AudioWorkletProcessor`, which will output silence and respond to ping
 requests from its `AudioWorkletNode`.

 First, we need to define a custom `AudioWorkletProcessor`, and register it.
 Note that this should be done in a separate file.


```js
// ping-pong-processor.js
class PingPongProcessor extends AudioWorkletProcessor {
  constructor(...args) {
    super(...args);
    this.port.onmessage = (e) => {
      console.log(e.data);
      this.port.postMessage("pong");
    };
  }
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("ping-pong-processor", PingPongProcessor);
```


 Now in our main scripts file we'll load the processor, create an instance of
 `AudioWorkletNode` passing the name of the processor, and connect the node to
 an audio graph.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("ping-pong-processor.js");
const pingPongNode = new AudioWorkletNode(audioContext, "ping-pong-processor");
// send the message containing 'ping' string
// to the AudioWorkletProcessor from the AudioWorkletNode every second
setInterval(() => pingPongNode.port.postMessage("ping"), 1000);
pingPongNode.port.onmessage = (e) => console.log(e.data);
pingPongNode.connect(audioContext.destination);
```


 This will output `"ping"` and `"pong"` strings to the console
 every second.

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-port |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API
AudioWorkletNode: processorerror event
======================================

The `processorerror` event fires when the underlying `AudioWorkletProcessor` behind the node throws an exception in its constructor, the `process` method, or any user-defined class method.

Once an exception is thrown, the processor (and thus the node) will output silence throughout its lifetime.

Syntax
------

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


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

onprocessorerror = (event) => { }
```

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

A generic `Event`.

Examples
--------

To be informed when the processor throws an exception, you can add a handler to your `AudioWorkletNode` instance using `addEventListener()`, like this:


```js
whiteNoiseNode.addEventListener("processorerror", (event) => {
  console.error("There was an error!");
});
```


Alternatively, you can use the `onprocessorerror` event handler property to establish a handler for the `processorerror` event:


```js
whiteNoiseNode.onprocessorerror = (event) => {
  console.error("There was an error!");
};
```

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-onprocessorerror |

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

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

See also
--------

* Using the Web Audio API
GPUBindGroup: label property
============================

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

 The **`label`** property of the
 `GPUBindGroup` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createBindGroup()` call, or you can get and set it directly on the `GPUBindGroup` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUBindGroup.label`:


```js
// ...

const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer: output,
      },
    },
  ],
});

bindGroup.label = "mybindgroup";

console.log(bindGroup.label); // "mybindgroup";
```


Setting a label via the originating `GPUDevice.createBindGroup()` call, and then getting it via `GPUBindGroup.label`:


```js
// ...

const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer: output,
      },
    },
  ],
  label: "mybindgroup",
});

console.log(bindGroup.label); // "mybindgroup";
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
console: warn() static method
=============================

The **`console.warn()`** static method outputs a warning message to the console.

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

**Note:** In Chrome and Firefox, warnings have a small exclamation point icon next to them in the console log.

Syntax
------


```js
warn(obj1)
warn(obj1, /\* …, \*/ objN)
warn(msg)
warn(msg, subst1, /\* …, \*/ substN)
```

### Parameters

`obj1` … `objN`

A list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output to the console.

`msg`

A JavaScript string containing zero or more substitution strings, which are replaced with `subst1` through `substN` in consecutive order.

`subst1` … `substN`

JavaScript objects with which to replace substitution strings within `msg`. This gives you additional control over the format of the output. See Using string substitutions for a description of how substitutions work.

See Outputting text to the console in the documentation of the `console` object for details.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Console Standard # warn |

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

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

See also
--------

* Microsoft Edge's documentation for `console.warn()`
* Node.JS documentation for `console.warn()`
* Google Chrome's documentation for `console.warn()`
console: info() static method
=============================

The **`console.info()`** static method outputs an informational message to the console. In Firefox, a small "i" icon is displayed next to these items in the console's log.

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

Syntax
------


```js
info(obj1)
info(obj1, /\* …, \*/ objN)
info(msg)
info(msg, subst1, /\* …, \*/ substN)
```

### Parameters

`obj1` … `objN`

A list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output to the console.

`msg`

A JavaScript string containing zero or more substitution strings, which are replaced with `subst1` through `substN` in consecutive order.

`subst1` … `substN`

JavaScript objects with which to replace substitution strings within `msg`. This gives you additional control over the format of the output. See Using string substitutions for a description of how substitutions work.

See Outputting text to the console in the documentation of the `console` object for details.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Console Standard # info |

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

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

See also
--------

* Microsoft Edge's documentation for `console.info()`
* Node.JS documentation for `console.info()`
* Google Chrome's documentation for `console.info()`
console: time() static method
=============================

The **`console.time()`** static method starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call `console.timeEnd()` with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.

See Timers in the `console` documentation for details and examples.

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

Syntax
------


```js
time()
time(label)
```

### Parameters

`label` Optional

A string representing the name to give the new timer. This will identify the timer; use the same name when calling `console.timeEnd()` to stop the timer and get the time output to the console. If omitted, the label `"default"` is used.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Console Standard # time |

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

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

See also
--------

* `console.timeEnd()`
* `console.timeLog()`
* Microsoft Edge's documentation for `console.time()`
* Node.JS documentation for `console.time()`
* Google Chrome's documentation for `console.time()`
console: groupEnd() static method
=================================

The **`console.groupEnd()`** static method exits the current inline group in the console. See Using groups in the console in the `console` documentation for details and examples.

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

Syntax
------


```js
groupEnd()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Console Standard # groupend |

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

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

See also
--------

* `console.group()`
* `console.groupCollapsed()`
* Microsoft Edge's documentation for `console.groupEnd()`
* Node.JS documentation for `console.groupEnd()`
* Google Chrome's documentation for `console.groupEnd()`
console: timeStamp() static method
==================================

**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 **`console.timeStamp()`** static method adds a single marker to the browser's Performance tool (Firefox, Chrome). This lets you correlate a point in your code with the other events recorded in the timeline, such as layout and paint events.

You can optionally supply an argument to label the timestamp, and this label will then be shown alongside the marker.

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

Syntax
------


```js
timeStamp(label)
```

### Parameters

`label` Optional

Label for the timestamp.

### Return value

None (`undefined`).

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

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

See also
--------

* `console.time()`
* `console.timeLog()`
* `console.timeEnd()`
* Adding markers with the console API
console: log() static method
============================

The **`console.log()`** static method outputs a message to the console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects.

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

Syntax
------


```js
log(obj1)
log(obj1, /\* …, \*/ objN)
log(msg)
log(msg, subst1, /\* …, \*/ substN)
```

### Parameters

`obj1` … `objN`

A list of JavaScript objects to output. Objects are output in the order listed. Please be warned that if you log objects in the latest versions of Chrome and Firefox, what you get logged on the console is a *reference to the object*, which is not necessarily the 'value' of the object at the moment in time you call `console.log()`, but it is the value of the object at the moment you open the console.

`msg`

A JavaScript string containing zero or more substitution strings.

`subst1` … `substN`

JavaScript objects with which to replace substitution strings within `msg`. This gives you additional control over the format of the output.

See Outputting text to the console in the documentation of `console` for details.

### Return value

None (`undefined`).

Logging objects
---------------

Information about an object is lazily retrieved. This means that the log message shows the content of an object at the time when it's first viewed, not when it was logged. For example:


```js
const obj = {};
console.log(obj);
obj.prop = 123;
```


This will output `{}`. However, if you expand the object's details, you will see `prop: 123`.

If you are going to mutate your object and you want to prevent the logged information from being updated, you can deep-clone the object before logging it. A common way is to `JSON.stringify()` and then `JSON.parse()` it:


```js
console.log(JSON.parse(JSON.stringify(obj)));
```


There are other alternatives that work in browsers, such as `structuredClone()`, which are more effective at cloning different types of objects.

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

| Specification |
| --- |
| Console Standard # log |

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

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

See also
--------

* Microsoft Edge's documentation for `console.log()`
* Node.JS documentation for `console.log()`
* Google Chrome's documentation for `console.log()`
console: groupCollapsed() static method
=======================================

The **`console.groupCollapsed()`** static method creates a new inline group in the console. Unlike `console.group()`, however, the new group is created collapsed. The user will need to use the disclosure button next to it to expand it, revealing the entries created in the group.

Call `console.groupEnd()` to back out to the parent group.

See Using groups in the console in the `console` documentation for details and examples.

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

Syntax
------


```js
groupCollapsed()
groupCollapsed(label)
```

### Parameters

`label` Optional

Label for the group.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Console Standard # groupcollapsed |

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

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

See also
--------

* `console.group()`
* `console.groupEnd()`
* Microsoft Edge's documentation for `console.groupCollapsed()`
* Node.JS documentation for `console.groupCollapsed()`
* Google Chrome's documentation for `console.groupCollapsed()`