recursal/MDN huggingface dataset:
CSSPropertyRule: syntax property
================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`syntax`** property of the `CSSPropertyRule` interface returns the literal syntax of the custom property registration represented by the `@property` rule, controlling how the property's value is parsed at computed-value time.

Value
-----

A string.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `syntax` property returns the literal string `"<color>"`.


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].syntax); //the string "<color>"
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-syntax |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`initialValue`** nullable property of the `CSSPropertyRule` interface returns the initial value of the custom property registration represented by the `@property` rule, controlling the property's initial value.

Value
-----

 A string which is a `<declaration-value>` as
 defined in CSS Syntax 3.

Examples
--------

This stylesheet contains a single `@property` rule. The first `CSSRule` returned will be a `CSSPropertyRule` representing this rule. The `initialValue` property returns the string `"#c0ffee"` this being the value of the `initial-value` property in the CSS.


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].initialValue); //the string "#c0ffee"
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-initialvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: getDefaultComputedStyle() 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 **`getDefaultComputedStyle()`** method gives the default computed values of all the CSS
 properties of an element, ignoring author styling. That is, only user-agent and user
 styles are taken into account.

Syntax
------


```js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)
```

### Parameters

`element`

The `Element` for which to get the computed style.

`pseudoElt` Optional

 A string specifying the pseudo-element to match. Must be `null` (or not
 specified) for regular elements.


### Return value

 The returned `style` is a `CSSStyleDeclaration`
 object. The object is of the same type as the object returned by
 `Window.getComputedStyle()`, but only takes into account user-agent and
 user rules.

Examples
--------

### Simple example


```js
const elem1 = document.getElementById("elemId");
const style = window.getDefaultComputedStyle(elem1);
```

### Longer example


```html
<style>
 #elem-container {
 position: absolute;
 left: 100px;
 top: 200px;
 height: 100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
 const elem = document.getElementById("elem-container");
 const theCSSprop = window.getDefaultComputedStyle(elem).position;
 document.getElementById("output").innerHTML = theCSSprop; // Will output "static"
</script>
```

### Use with pseudo-elements

 The `getDefaultComputedStyle()` method can pull style info from
 pseudo-elements (e.g., `::before` or `::after`).


```html
<style>
 h3:after {
 content: " rocks!";
 }
</style>

<h3>generated content</h3>

<script>
 const h3 = document.querySelector("h3");
 const result = getDefaultComputedStyle(h3, ":after").content;

 console.log("the generated content is: ", result); // returns 'none'
</script>
```

Notes
-----

 The returned value is, in certain known cases, expressly incorrect by deliberate
 intent. In particular, to avoid the so called CSS History Leak security issue, browsers
 may expressly "lie" about the used value for a link and always return values as if a
 user has never visited the linked site, and/or limit the styles that can be applied
 using the `:visited` pseudo-selector. See https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
 and https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
 for details of the examples of how this is implemented.

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

Proposed to the CSS working group.

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

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

The read-only **`ImageBitmap.width`** property returns the `ImageBitmap` object's width in CSS pixels.

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

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-width-dev |

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

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

The read-only **`ImageBitmap.height`** property returns the `ImageBitmap` object's height in CSS pixels.

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

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-height-dev |

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

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

 The **`ImageBitmap.close()`**
 method disposes of all graphical resources associated with an `ImageBitmap`.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

const bitmap = offscreen.transferToImageBitmap();
// ImageBitmap { width: 256, height: 256 }

bitmap.close();
// ImageBitmap { width: 0, height: 0 } — disposed
```

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

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-close-dev |

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

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

See also
--------

* The interface defining this method, `ImageBitmap`.
HMDVRDevice: setFieldOfView() method
====================================

**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 **`setFieldOfView()`** method of the `HMDVRDevice` interface can be used to set the field of view for one eye, or both eyes simultaneously.

Syntax
------


```js
setFieldOfView(leftFOV, rightFOV, zNear, zFar)
```

### Parameters

`leftFOV` Optional

A `VRFieldOfView` object that defines the new field of view for the left eye. If not specified, the left eye field of view does not change.

`rightFOV` Optional

A `VRFieldOfView` object that defines the new field of view for the right eye. If not specified, the right eye field of view does not change.

`zNear` Optional

The distance from the eyes of the nearest point of the view. The closest things can be and still be in the view. If not specified, the default is used — `0.01`.

`zFar` Optional

The distance from the eyes of the farthest point of the view. The furthest away things can be and still be in the view. If not specified, the default is used — `10000.0`.

### Return value

None (`undefined`).

Examples
--------

The following simple example shows a function that can be used to set a custom field of view with four specified degree values for up, right, down and left. The `VRFieldOfView()` constructor is used to create a `VRFieldOfView` object from the supplied values, which is then fed into the `setFieldOfView()` method (the default `zNear` and `zFar` values are always used, in this case.)


```js
function setCustomFOV(up, right, down, left) {
  const testFOV = new VRFieldOfView(up, right, down, left);

  gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);

  const lEye = gHMD.getEyeParameters("left");
  const rEye = gHMD.getEyeParameters("right");
  console.log(lEye.currentFieldOfView);
  console.log(rEye.currentFieldOfView);
}
```


**Note:** When testing, setting a weird/tiny field of view can really mess up your view. It is a good idea to grab the current field of view first (using `VREyeParameters.fieldOfView`) before making any drastic changes, so you can reset it afterwards if needed.

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

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

See also
--------

* WebVR API
HMDVRDevice: getEyeParameters() method
======================================

**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 **`getEyeParameters()`** method of the `HMDVRDevice` interface returns current parameters for the eye specified as its argument ("left" or "right") — stored in a `VREyeParameters` object.

This includes field of view information, and more.

Syntax
------


```js
getEyeParameters(whichEye)
```

### Parameters

`whichEye`

A string representing the eye you want to return information about. The value can be `left` or `right`.

### Return value

A `VREyeParameters` object.

Examples
--------

The following example is taken from the Mozilla VR Team's threejs-vr-boilerplate code — to be precise, the VREffect.js file. Early on in the code the `getEyeParameters()` method is used to access information about each eye, which is then used for rendering calculations later on.


```js
if (vrHMD.getEyeParameters !== undefined) {
  const eyeParamsL = vrHMD.getEyeParameters("left");
  const eyeParamsR = vrHMD.getEyeParameters("right");

  eyeTranslationL = eyeParamsL.eyeTranslation;
  eyeTranslationR = eyeParamsR.eyeTranslation;
  eyeFOVL = eyeParamsL.recommendedFieldOfView;
  eyeFOVR = eyeParamsR.recommendedFieldOfView;
} else {
  // …
}
```

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

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

See also
--------

* WebVR API
WebTransport: closed property
=============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`closed`** read-only property of the `WebTransport` interface returns a promise that resolves when the transport is closed.

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

Value
-----

A `Promise` that resolves to an object containing the following properties:

`closeCode`

A number representing the error code for the error.

`reason`

A string representing the reason for closing the `WebTransport`.

Examples
--------


```js
const url = "https://example.com:4999/wt";

async function initTransport(url) {
  // Initialize transport connection
  const transport = new WebTransport(url);

  // The connection can be used once ready fulfills
  await transport.ready;

  // ...
}

// ...

async function closeTransport(transport) {
  // Respond to connection closing
  try {
    await transport.closed;
    console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
  } catch (error) {
    console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-closed |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransport: incomingUnidirectionalStreams property
====================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`incomingUnidirectionalStreams`** read-only property of the `WebTransport` interface represents one or more unidirectional streams opened by the server. Returns a `ReadableStream` of `WebTransportReceiveStream` objects. Each one can be used to reliably read data from the server.

"Reliable" means that transmission and order of data are guaranteed. This provides slower delivery (albeit faster than with WebSockets) than `datagrams`, but is needed in situations where reliability and ordering are important, like chat applications.

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

Value
-----

A `ReadableStream` of `WebTransportReceiveStream` objects.

Examples
--------

An initial function is used to read the `WebTransportReceiveStream` objects from the `ReadableStream`. Each object is then passed to another function to read from those streams.


```js
async function receiveUnidirectional() {
  const uds = transport.incomingUnidirectionalStreams;
  const reader = uds.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is an instance of WebTransportReceiveStream
    await readData(value);
  }
}

async function readData(receiveStream) {
  const reader = receiveStream.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array
    console.log(value);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-incomingunidirectionalstreams |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransport: datagrams property
================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`datagrams`** read-only property of the `WebTransport` interface returns a `WebTransportDatagramDuplexStream` instance that can be used to send and receive datagrams — unreliable data transmission.

"Unreliable" means that transmission of data is not guaranteed, nor is arrival in a specific order. This is fine in some situations and provides very fast delivery. For example, you might want to transmit regular game state updates where each message supersedes the last one that arrives, and order is not important.

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

Value
-----

A `WebTransportDatagramDuplexStream` object.

Examples
--------

### Writing an outgoing datagram

The `WebTransportDatagramDuplexStream.writable` property returns a `WritableStream` object that you can write data to using a writer, for transmission to the server:


```js
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);
```

### Reading an incoming datagram

The `WebTransportDatagramDuplexStream.readable` property returns a `ReadableStream` object that you can use to receive data from the server:


```js
async function readData() {
  const reader = transport.datagrams.readable.getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array.
    console.log(value);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-datagrams |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransport: ready property
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`ready`** read-only property of the `WebTransport` interface returns a promise that resolves when the transport is ready to use.

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

Value
-----

A `Promise` that resolves to `undefined`.

Examples
--------


```js
const url = "https://example.com:4999/wt";

async function initTransport(url) {
  // Initialize transport connection
  const transport = new WebTransport(url);

  // The connection can be used once ready fulfills
  await transport.ready;

  // ...
}

// ...

async function closeTransport(transport) {
  // Respond to connection closing
  try {
    await transport.closed;
    console.log(`The HTTP/3 connection to ${url} closed gracefully.`);
  } catch (error) {
    console.error(`The HTTP/3 connection to ${url} closed due to ${error}.`);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-ready |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransport: congestionControl property
========================================

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

The **`congestionControl`** read-only property of the `WebTransport` interface indicates the application's preference for either high throughput or low-latency when sending data.

The value is set in the `WebTransport()` constructor options.

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

Value
-----

A string with one of the following values:

`default`

 The default congestion control tuning for the transport.
 This is the default.


`throughput`

The application prefers congestion control to be tuned for throughput.

`low-latency`

The application prefers congestion control to be tuned for low-latency.

Examples
--------

 This example shows how to get the `congestionControl` preference.
 As this is not explicitly set in the constructor, the result is `default`.


```js
const url = "https://example.com:4999/wt";
const transport = new WebTransport(url);
console.log(transport.congestionControl); // default
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-congestioncontrol |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`incomingBidirectionalStreams`** read-only property of the `WebTransport` interface represents one or more bidirectional streams opened by the server. Returns a `ReadableStream` of `WebTransportBidirectionalStream` objects. Each one can be used to reliably read data from the server and write data back to it.

"Reliable" means that transmission and order of data are guaranteed. This provides slower delivery (albeit faster than with WebSockets) than `datagrams`, but is needed in situations where reliability and ordering are important, like chat applications.

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

Value
-----

A `ReadableStream` of `WebTransportBidirectionalStream` objects.

Examples
--------

An initial function is used to read the `WebTransportBidirectionalStream` objects from the `ReadableStream`. For each one, the `WebTransportBidirectionalStream.readable` and `WebTransportBidirectionalStream.writable` values are passed to other functions to read from and write to those streams.


```js
async function receiveBidirectional() {
  const bds = transport.incomingBidirectionalStreams;
  const reader = bds.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    // value is an instance of WebTransportBidirectionalStream
    await readData(value.readable);
    await writeData(value.writable);
  }
}

async function readData(readable) {
  const reader = readable.getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    // value is a Uint8Array.
    console.log(value);
  }
}

async function writeData(writable) {
  const writer = writable.getWriter();
  const data1 = new Uint8Array([65, 66, 67]);
  const data2 = new Uint8Array([68, 69, 70]);
  writer.write(data1);
  writer.write(data2);
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransport-incomingbidirectionalstreams |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3