recursal/MDN huggingface dataset:
CSSStyleSheet: rules 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.

**`rules`** is a *deprecated*
*legacy property* of the `CSSStyleSheet` interface. Functionally
 identical to the preferred `cssRules` property,
 it provides access to a live-updating list of the CSS rules comprising the
 stylesheet.


**Note:** As a legacy property, you should not use `rules` and
 should instead use the preferred `cssRules`.
 While `rules` is unlikely to be removed soon, its availability is not as
 widespread and using it will result in compatibility problems for your site or app.


Value
-----

 A live-updating `CSSRuleList` containing each of the CSS rules making up
 the stylesheet. Each entry in the rule list is a `CSSRule` object
 describing one rule making up the stylesheet.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-rules |

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

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

See also
--------

* CSS Object Model
* Using dynamic styling information
CSSStyleSheet: CSSStyleSheet() constructor
==========================================

The **`CSSStyleSheet()`** constructor creates a new `CSSStyleSheet` object which represents a single Stylesheet.

After constructing a stylesheet the `CSSStyleSheet.replace()`, `CSSStyleSheet.replaceSync()`, `CSSStyleSheet.insertRule()`, and `CSSStyleSheet.deleteRule()` methods can be used to modify the rules of the new stylesheet.

 A stylesheet created using this method is referred to as a "constructed stylesheet".
 A constructed stylesheet can be shared between a document and its shadow DOM subtrees using `ShadowRoot.adoptedStyleSheets` and `Document.adoptedStyleSheets`.

Syntax
------


```js
new CSSStyleSheet()
new CSSStyleSheet(options)
```

### Parameters

`options` Optional

An object containing the following:

`baseURL` Optional

A string containing the `baseURL` used to resolve relative URLs in the stylesheet.

`media` Optional

A `MediaList` containing a list of media rules, or a string containing a single rule.

`disabled` Optional

A `Boolean` indicating whether the stylesheet is disabled. False by default.


Examples
--------

 In the following example, a new `CSSStyleSheet` is constructed with a media rule of `"print"`.
 Printing `StyleSheet.media` to the console returns a `MediaList` with a single entry for this print rule.


```js
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
```

### Sharing stylesheets with a shadow DOM

The code below shows the sheet being constructed and then `CSSStyleSheet.replaceSync()` is called to add a rule to the sheet.


```js
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
```


We then create a `ShadowRoot` and pass the sheet object to the `ShadowRoot.adoptedStyleSheets` property inside an array.


```js
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//Adopt the sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];
```


 We can modify the stylesheets after they have been added to the array.
 Below we append a new rule to the same sheet using `CSSStyleSheet.insertRule()`.


```js
sheet.insertRule("\* { background-color: blue; }");
// The document will now have blue background.
```


 The same sheet can be shared with multiple shadow subtrees in the same document.
 For more examples see `ShadowRoot.adoptedStyleSheets`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |

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

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

See also
--------

* Constructable Stylesheets (web.dev)
* Using the Shadow DOM
* construct-style-sheets-polyfill
CSSStyleSheet: ownerRule property
=================================

 The read-only `CSSStyleSheet` property
 **`ownerRule`** returns the `CSSImportRule`
 corresponding to the `@import` at-rule which imported the stylesheet into
 the document. If the stylesheet wasn't imported into the document using
 `@import`, the returned value is `null`.

Value
-----

 A `CSSImportRule` corresponding to the `@import` rule which
 imported the stylesheet into the document. If the stylesheet wasn't imported into the
 document using `@import`, the returned value is `null`.

Examples
--------

 This snippet of code looks for rules which were not imported into the document using an
 `@import` at-rule.


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  if (!rule.ownerRule) {
    /\* rule is not imported \*/
  }
}
```


 This snippet obtains a reference to the stylesheet associated with the
 `@import` and processes it in some manner:


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  if (rule.ownerRule) {
    checkStylesheet(rule.ownerRule.styleSheet);
  }
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-ownerrule |

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

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

See also
--------

* CSS Object Model
* Using dynamic styling information
CSSStyleSheet: addRule() 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.

 The obsolete `CSSStyleSheet` interface's
 **`addRule()`** *legacy method* adds a new rule to the
 stylesheet. You should avoid using this method, and should instead use the more standard
 `insertRule()` method.

Syntax
------


```js
addRule(selector, styleBlock, index)
```

### Parameters

`selector`

 A string specifying the selector portion of the CSS rule. The
 default is the string `undefined`.


`styleBlock`

 A string indicating the style block to apply to elements matching
 the `selector`. The default is the string `undefined`.


`index` Optional

 An optional index into the stylesheet's `CSSRuleList` at which to
 insert the new rule. If `index` is not specified, the next index after the
 last item currently in the list is used (that is, the value of
 `cssStyleSheet.cssRules.length`).


### Return value

Always returns -1.

 Note that due to somewhat esoteric rules about where you can legally insert rules,
 it's possible that an exception may be thrown. See `insertRule()` for more information.

Usage notes
-----------

 This method is implemented by browsers by constructing a string using the template
 literal ``${selector}{${styleBlock}}``, then passing it into the standard
 `insertRule()` method.

Therefore, given existing code such as the following:


```js
cssStyleSheet.addRule(selector, styles, 0);
```


You can rewrite this to use the more standard `insertRule()` like this:


```js
cssStyleSheet.insertRule(`${selector} {${styles}}`, 0);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-addrule |

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

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

See also
--------

* CSS Object Model
* Using dynamic styling information
CSSStyleSheet: deleteRule() method
==================================

 The `CSSStyleSheet` method
 **`deleteRule()`** removes a rule from the stylesheet
 object.

Syntax
------


```js
deleteRule(index)
```

### Parameters

`index`

 The index into the stylesheet's `CSSRuleList` indicating the rule to be
 removed.


### Return value

None (`undefined`).

Examples
--------

This example removes the first rule from the stylesheet `myStyles`.


```js
myStyles.deleteRule(0);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-deleterule |

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

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

See also
--------

* CSS Object Model
* Constructable Stylesheets (web.dev)
* Using dynamic styling information
* `insertRule()`
CSSStyleSheet: removeRule() 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.

 The obsolete `CSSStyleSheet` method
 **`removeRule()`** removes a rule from the stylesheet
 object. It is functionally identical to the standard, preferred method
 `deleteRule()`.


**Note:** This is a *legacy method* which has been replaced by
 the standard method `deleteRule()`. You
 should use that instead.


Syntax
------


```js
removeRule(index)
```

### Parameters

`index`

 The index into the stylesheet's `CSSRuleList` indicating the rule to be
 removed.


### Return value

None (`undefined`).

Examples
--------

This example removes the first rule from the stylesheet `myStyles`.


```js
myStyles.removeRule(0);
```


You can rewrite this to use the standard `deleteRule()` method very easily:


```js
myStyles.deleteRule(0);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-removerule |

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

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

See also
--------

* CSS Object Model
* Using dynamic styling information
* `insertRule()`
CSSStyleSheet: cssRules property
================================

 The read-only `CSSStyleSheet` property
 **`cssRules`** returns a live `CSSRuleList` which
 provides a real-time, up-to-date list of every CSS rule which comprises the
 stylesheet. Each item in the list is a `CSSRule` defining a single
 rule.

Value
-----

 A live-updating `CSSRuleList` containing each of the CSS rules making up
 the stylesheet. Each entry in the rule list is a `CSSRule` object
 describing one rule making up the stylesheet.

Examples
--------

Individual rules within the stylesheet can then be accessed by index:


```js
const ruleList = document.styleSheets[0].cssRules;

for (let i = 0; i < ruleList.length; i++) {
  processRule(ruleList[i]);
}
```


Rules can also be accessed using `for...of`:


```js
const ruleList = document.styleSheets[0].cssRules;

for (const rule of ruleList) {
  processRule(rule);
}
```


 However, because `CSSRule` is not a proper array, you can't use
 `forEach()`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssrules |

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

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

See also
--------

* CSS Object Model
* Using dynamic styling information
ResizeObserverSize: inlineSize property
=======================================

The **`inlineSize`** read-only property of the `ResizeObserverSize` interface returns the length of the observed element's border box in the inline dimension. For boxes with a horizontal `writing-mode`, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.

**Note:** For more explanation of writing modes and block and inline dimensions, read Handling different text directions.

Value
-----

A decimal representing the inline size in pixels.

Examples
--------

In this example we return an array of sizing information with `ResizeObserverEntry.contentBoxSize`. The `inlineSize` property returns the inline dimension size of the observed element.


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const elemSize = entry.contentBoxSize[0];
    console.log(elemSize.inlineSize); // a decimal
  }
});

resizeObserver.observe(divElem);
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserversize-inlinesize |

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

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

The **`blockSize`** read-only property of the `ResizeObserverSize` interface returns the length of the observed element's border box in the block dimension. For boxes with a horizontal `writing-mode`, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width.

**Note:** For more explanation of writing modes and block and inline dimensions, read Handling different text directions.

Value
-----

A decimal representing the block size in pixels.

Examples
--------

In this example we return an array of sizing information with `ResizeObserverEntry.contentBoxSize`. The `blockSize` property returns the block dimension size of the observed element.


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const elemSize = entry.contentBoxSize[0];
    console.log(elemSize.blockSize); // a decimal
  }
});

resizeObserver.observe(divElem);
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserversize-blocksize |

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

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

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

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

The **`mobile`** read-only property of the `NavigatorUAData` interface returns a value indicating whether the device is a mobile device.

Value
-----

A `Boolean`, `true` if this is a mobile device.

Examples
--------

The following example prints the value of `mobile` to the console.


```js
console.log(navigator.userAgentData.mobile);
```

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

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-mobile |

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

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

See also
--------

* The `Sec-CH-UA-Mobile` header (a low-entropy client hint) contains the same information.
NavigatorUAData: brands property
================================

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

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

The **`brands`** read-only property of the `NavigatorUAData` interface returns an array of brand information.

Value
-----

An array containing the following information for each brand:

`brand`

A string containing the brand. For example, `"Google Chrome"`.

`version`

A string containing the version. For example, `"91"`.

Examples
--------

The following example prints the value of `NavigatorUAData.brands` to the console.


```js
console.log(navigator.userAgentData.brands);
```

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

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-brands |

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

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

See also
--------

* `Sec-CH-UA` (a low-entropy client hint) contains the same information.
NavigatorUAData: platform property
==================================

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

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

The **`platform`** read-only property of the `NavigatorUAData` interface returns the platform brand information.

Value
-----

 A string containing the platform brand.
 For example, `"Windows"`.

Examples
--------

The following example prints the value of `platform` to the console.


```js
console.log(navigator.userAgentData.platform);
```

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

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-platform |

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

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

See also
--------

* The `Sec-CH-UA-Platform` header (a low-entropy client hint) contains the same information.
NavigatorUAData: toJSON() method
================================

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

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

The **`toJSON()`** method of the `NavigatorUAData` interface is a *serializer* that returns a JSON representation of the *low entropy* properties of the `NavigatorUAData` object.

**Note:** The terms *high entropy* and *low entropy* refer to the amount of information these values reveal about the browser. The low entropy values returned by this method are those which do not reveal information able to identify a user. High entropy values can only be returned by the `NavigatorUAData.getHighEntropyValues()` method.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A JSON object.

Examples
--------

The following example prints the JSON object to the console.


```js
console.log(navigator.userAgentData.toJSON());
```

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

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-tojson |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AbortController: AbortController() constructor
==============================================

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

Syntax
------


```js
new AbortController()
```

### Parameters

None.

Examples
--------

In the following snippet, we aim to download a video using the Fetch API.

We first create a controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.

When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{ signal }` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener.


```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```


**Note:** When `abort()` is called, the `fetch()` promise rejects with an `AbortError`.

You can find a full working example on GitHub; you can also see it running live.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

See also
--------

* Fetch API
AbortController: signal property
================================

The **`signal`** read-only property of the `AbortController` interface returns an `AbortSignal` object instance, which can be used to communicate with/abort an asynchronous operation as desired.

Value
-----

An `AbortSignal` object instance.

Examples
--------

In the following snippet, we aim to download a video using the Fetch API.

We first create a controller using the `AbortController()` constructor, then grab a reference to its associated `AbortSignal` object using the `AbortController.signal` property.

When the fetch request is initiated, we pass in the `AbortSignal` as an option inside the request's options object (the `{signal}` below). This associates the signal and controller with the fetch request and allows us to abort it by calling `AbortController.abort()`, as seen below in the second event listener.


```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```


**Note:** When `abort()` is called, the `fetch()` promise rejects with an `AbortError`.

You can find a full working example on GitHub; you can also see it running live.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-signal② |

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

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

See also
--------

* Fetch API