recursal/MDN huggingface dataset:
MediaList: item() method
========================

The **`item()`** method of the `MediaList` interface returns the media query at the specified `index`, or `null` if the specified `index` doesn't exist.

Syntax
------


```js
item(index)
[index]
```


**Note:** The bracket (`[]`) syntax can be used instead of the `item()` syntax.

### Parameters

`index`

An integer.

### Return value

If the bracket (`[]`) syntax is used and there is no entry for the given index, `undefined` is returned.

Examples
--------

 The following would log to the console each media query stored in the
 `MediaList` associated with the first stylesheet applied to the current document.


```js
const stylesheet = document.styleSheets[0];
console.log(stylesheet.media.length);
console.log(stylesheet.media.item(0)); // Returns a string like "print"
console.log(stylesheet.media.item(5)); // Returns null if there is no 5th entry
console.log(stylesheet.media[1]); // Returns a string like "print"
console.log(stylesheet.media[5]); // Returns undefined if there is no 5th entry
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-item |

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

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

 The **`mediaText`** property of the `MediaList`
 interface is a stringifier that returns a string representing the
 `MediaList` as text, and also allows you to set a new `MediaList`.

Value
-----

 A string representing the media queries of a stylesheet. Each one is
 separated by a comma, for example
 `screen and (min-width: 480px), print`.

 If you wish to set new media queries on the document, the string value must have the
 different queries separated by commas, e.g. `screen, print`. Note that the
 `MediaList` is a live list; updating the list via
 `mediaText` will immediately update the behavior of the
 document.

 Also note that is you try to set
 `mediaText` to `null`, it will be treated as an empty
 string, i.e. the value will be set to
 `""`.

Examples
--------

 The following would log to the console a textual representation of the
 `MediaList` of the first stylesheet applied to the current document.


```js
const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-mediatext |

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

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

The read-only **`length`** property of the `MediaList` interface returns the number of media queries in the list.

Value
-----

A positive integer.

Examples
--------

 The following would log to the console the number of media queries stored in the
 `MediaList` associated with the first stylesheet applied to the current document.


```js
const stylesheets = document.styleSheets;
const stylesheet = stylesheets[0];
console.log(stylesheet.media.length);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-length |

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

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

The `appendMedium()` method of the `MediaList` interface adds a media query to the list. If the media query is already in the collection, this method does nothing.

Syntax
------


```js
appendMedium(medium)
```

### Parameters

`medium`

A string containing the media query to add.

### Return value

None (undefined).

Examples
--------

 The following adds the media query `print` into the
 `MediaList` associated with the first stylesheet applied to the current document.


```js
const stylesheet = document.styleSheets[0];
stylesheet.media.appendMedium("print");
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-appendmedium |

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

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

The `deleteMedium()` method of the `MediaList` interface removes from this `MediaList` the given media query.

Syntax
------


```js
deleteMedium(medium)
```

### Parameters

`medium`

A string containing the media query to remove from the list.

### Return value

None (undefined).

### Exceptions

`NotFoundError` `DOMException`

Thrown when the media query to remove is not in the list.

Examples
--------

 The following removes the media query `print` from the
 `MediaList` associated with the first stylesheet applied to the current document.


```js
const stylesheet = document.styleSheets[0];
stylesheet.media.removeMedium("print");
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-medialist-deletemedium |

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

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

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

The **`rangeStart`** property of the `TextFormat` interface indicates the start position of the text range that needs to be formatted with the given text format.

Value
-----

A `Number`.

Examples
--------

### Reading the range of text that needs to be formatted

The following example shows how to use the `textformatupdate` event's `rangeStart` and `rangeEnd` properties to determine the range of text that needs to be formatted. Note that the event listener callback in this example is only called when using an IME window to compose text.


```html
<div id="editor" style="height:200px;background:#eee;"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  const formats = e.getTextFormats();

  for (const format of formats) {
    console.log(
      `IME wants to apply formatting between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformat-rangestart |

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

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

See also
--------

* The `TextFormat` interface it belongs to.
TextFormat: underlineThickness property
=======================================

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

The **`underlineThickness`** property of the `TextFormat` interface indicates the thickness of the underline that needs to be applied to the text range that is being formatted.

Value
-----

A `String` that is one of the following values:

* `"none"`: No underline.
* `"thin"`: A thin underline.
* `"thick"`: A thick underline.
Examples
--------

### Reading the underline thickness that needs to be applied

The following example shows how to use the `textformatupdate` event's `underlineThickness` property to determine the underline thickness that needs to be applied to the text being formatted. Note that the event listener callback in this example is only called when using an IME window to compose text.


```html
<div id="editor" style="height:200px;background:#eee;"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  const formats = e.getTextFormats();

  for (const format of formats) {
    console.log(
      `IME wants to apply a ${format.underlineThickness} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformat-underlinethickness |

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

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

See also
--------

* The `TextFormat` interface it belongs to.
TextFormat: rangeEnd property
=============================

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

The **`rangeEnd`** property of the `TextFormat` interface indicates the end position of the text range that needs to be formatted with the given text format.

Value
-----

A `Number`.

Examples
--------

### Reading the range of text that needs to be formatted

The following example shows how to use the `textformatupdate` event's `rangeStart` and `rangeEnd` properties to determine the range of text that needs to be formatted. Note that the event listener callback in this example is only called when using an IME window to compose text.


```html
<div id="editor" style="height:200px;background:#eee;"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  const formats = e.getTextFormats();

  for (const format of formats) {
    console.log(
      `IME wants to apply formatting between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformat-rangeend |

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

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

See also
--------

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

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

The **`TextFormat()`** constructor returns a new `TextFormat` object.

Syntax
------


```js
new TextFormat()
new TextFormat(options)
```

### Parameters

`options` Optional

An optional object with the following properties:

`rangeStart`

A number representing the start position of the text range that needs to be formatted.

`rangeEnd`

A number representing the end position of the text range that needs to be formatted.

`underlineStyle`

A string representing the underline style of the text range that needs to be formatted.

`underlinerThickness`

A string representing the underline thickness of the text range that needs to be formatted.


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

| Specification |
| --- |
| EditContext API # dom-textformat-constructor |

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

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

See also
--------

* The `TextFormat` interface it belongs to.
TextFormat: underlineStyle property
===================================

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

The **`underlineStyle`** property of the `TextFormat` interface indicates the style of the underline that needs to be applied to the text range that is being formatted.

Value
-----

A `String` that is one of the following values:

* `"none"`: No underline.
* `"solid"`: A solid underline.
* `"double"`: A double underline.
* `"dotted"`: A dotted underline.
* `"dashed"`: A dashed underline.
* `"wavy"`: A wavy underline.
Examples
--------

### Reading the underline style that needs to be applied

The following example shows how to use the `textformatupdate` event's `underlineStyle` property to determine the underline style that needs to be applied to the text being formatted. Note that the event listener callback in this example is only called when using an IME window to compose text.


```html
<div id="editor" style="height:200px;background:#eee;"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  const formats = e.getTextFormats();

  for (const format of formats) {
    console.log(
      `IME wants to apply a ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformat-underlinestyle |

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

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

See also
--------

* The `TextFormat` interface it belongs to.
Multi-screen origin
===================

The Window Management API introduces the concept of the **multi-screen origin** — this is the (0,0) coordinate of the host operating system (OS)'s virtual screen arrangement, around which all available screens and windows are positioned. The multi-screen origin is the top-left corner of the OS primary screen by convention, although the spec stipulates that it could be any arbitrary point within the virtual screen arrangement.

The primary screen can usually be specified by the user via OS settings, and generally contains OS UI features such as the taskbar/icon dock.

**Note:** Positive coordinate values are to the right and downwards on the screen arrangement, while negative ones are to the left and upwards.

Effects on existing web platform features
-----------------------------------------

The multi-screen origin is relevant to the following APIs:

* The values of `ScreenDetailed.left`, `ScreenDetailed.top`, `ScreenDetailed.availLeft`, and `ScreenDetailed.availTop` for each available screen are reported relative to the multi-screen origin.
* The values of `Window.screenLeft`, `Window.screenTop`, `Window.screenX`, `Window.screenY` for each window are reported relative to the multi-screen origin.
* When using `Window.moveTo()` and `Window.open()`, windows are positioned relative to the multi-screen origin.

**Note:** Not all browsers officially support multi-screen origin, but some have their own non-standard implementations. You are advised to check the browser compatibility information of the above features for the behavior in each browser.

Visual examples
---------------

Say we have an external monitor of resolution 1920 x 1080 set as the primary monitor, and an internal laptop display of resolution 1440 x 900 set as a secondary monitor. Let's also say that the OS UI takes up 25px at the top of the screen, and is only drawn on the primary screen.

If the secondary screen was positioned directly to the right of the primary screen, top screen edges in line:

* The primary screen `left`/`top` values would be (0,0) while its `availLeft`/`availTop` values would be (0,25) — the OS UI thickness is added on.
* The secondary screen `left`/`top` values would be (1920,0) while its `availLeft`/`availTop` values would also be (1920,0) — the OS UI is not drawn on the secondary screen.

![Two rectangles representing the primary screen with the secondary screen positioned to the right, as described above](/en-US/docs/Web/API/Window_Management_API/Multi-screen_origin/primary-screen-left.png)

However, if the secondary screen was positioned directly to the left of the primary screen, top screen edges in line:

* The primary screen `left`/`top` values would still be (0,0) while its `availLeft`/`availTop` values would be (0,25).
* The secondary screen `left`/`top` values would be (-1440,0) while its `availLeft`/`availTop` values would also be (-1440,0).

![Two rectangles representing the primary screen with the secondary screen positioned to the left, as described above](/en-US/docs/Web/API/Window_Management_API/Multi-screen_origin/primary-screen-right.png)
HighlightRegistry: entries() method
===================================

The **`entries()`** method of the `HighlightRegistry` interface returns a new Iterator object that contains the `[name, highlight]` pairs for each element in the `HighlightRegistry` object, in insertion order.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.entries()`.

Syntax
------


```js
entries()
```

### Return value

A new iterator object that contains an array of `[name, highlight]` for each `Highlight` object in the `HighlightRegistry`, in insertion order.

Examples
--------

The code snippet below creates and registers two new highlights, and then logs the highlights and their names by using the iterator returned by the `entries()` method:


```js
const myHighlight1 = new Highlight();
const myHighlight2 = new Highlight();

CSS.highlights.set("first-highlight", myHighlight1);
CSS.highlights.set("second-highlight", myHighlight2);

const iter = CSS.highlights.entries();

console.log(iter.next().value); // ['first-highlight', Highlight]
console.log(iter.next().value); // ['second-highlight', Highlight]
```


The following code example shows how to iterate over the highlights in the registry by using a `for...of` loop:


```js
const myHighlight1 = new Highlight();
const myHighlight2 = new Highlight();

CSS.highlights.set("first-highlight", myHighlight1);
CSS.highlights.set("second-highlight", myHighlight2);

for (const [name, highlight] of CSS.highlights.entries()) {
  console.log(`Highlight ${name}`, highlight);
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.entries |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: delete() method
==================================

The **`delete()`** method of the `HighlightRegistry` interface removes a the named `Highlight` object from the `HighlightRegistry`.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.delete()`.

Syntax
------


```js
delete(customHighlightName)
```

### Parameters

`customHighlightName`

The name, as a `String`, of the `Highlight` object to remove from the `HighlightRegistry`.

### Return value

Returns `true` if a `Highlight` object under the provided name was in the `HighlightRegistry`; otherwise `false`.

Examples
--------

The following code sample registers a highlight in the registry, and then deletes it:


```js
const myHighlight = new Highlight(range1, range2);

CSS.highlights.set("my-highlight", myHighlight);

CSS.highlights.delete("foo"); // false
CSS.highlights.delete("my-highlight"); // true
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.delete |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: clear() method
=================================

The **`clear()`** method of the `HighlightRegistry` interface removes all the `Highlight` objects registered in the `HighlightRegistry`.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.clear()`.

Syntax
------


```js
clear()
```

### Return value

None (`undefined`).

Examples
--------

The code snippet below registers two highlight objects in the registry and then clears the registry:


```js
const customHighlight1 = new Highlight(range1, range2);
const customHighlight2 = new Highlight(range3, range4, range5);

CSS.highlights.set("custom-highlight-1", customHighlight1);
CSS.highlights.set("custom-highlight-2", customHighlight2);

console.log(CSS.highlights.size); // 2

CSS.highlights.clear();
console.log(CSS.highlights.size); // 0
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.clear |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: has() method
===============================

The **`has()`** method of the `HighlightRegistry` interface returns a boolean indicating whether or not a `Highlight` object with the specified name exists in the registry.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.has()`.

Syntax
------


```js
has(name)
```

### Parameters

`name`

The name of the `Highlight` object to test for presence in the registry.

### Return value

Returns `true` if a highlight with the specified name exists in the registry; otherwise `false`.

Examples
--------


```js
const fooHighlight = new Highlight();
CSS.highlights.set("foo", fooHighlight);

myHighlight.has("foo"); // true
myHighlight.has("bar"); // false
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.has |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: get() method
===============================

The **`get()`** method of the `HighlightRegistry` interface returns the named `Highlight` object from the registry.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.get()`.

Syntax
------


```js
get(name)
```

### Parameters

`name`

The name of the `Highlight` object to return from the registry. The name must be a `String`.

### Return value

The `Highlight` object associated with the specified name, or `undefined` if the name can't be found in the `HighlightRegistry`.

Examples
--------

The following code sample demonstrates how to create a new `Highlight`, add it to the registry, and retrieve it by its name using the `get()` method:


```js
const fooHighlight = new Highlight();
CSS.highlights.set("foo", fooHighlight);

console.log(CSS.highlights.get("foo")); // Returns the fooHighlight object.
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.get |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web