diff --git a/files/en-us/web/api/clipboard_api/index.md b/files/en-us/web/api/clipboard_api/index.md index a0be1b5a4db14ad..fd5e9462da3bcb9 100644 --- a/files/en-us/web/api/clipboard_api/index.md +++ b/files/en-us/web/api/clipboard_api/index.md @@ -4,6 +4,7 @@ slug: Web/API/Clipboard_API page-type: web-api-overview browser-compat: - api.Clipboard + - api.ClipboardChangeEvent - api.ClipboardEvent - api.ClipboardItem --- @@ -34,6 +35,8 @@ The default action can be overridden by the event handler — see each of the ev - {{domxref("Clipboard")}} {{securecontext_inline}} - : Provides an interface for reading and writing text and data to or from the system clipboard. The specification refers to this as the 'Async Clipboard API'. +- {{domxref("ClipboardChangeEvent")}} + - : Represents events fired whenever the contents of the system clipboard are changed. - {{domxref("ClipboardEvent")}} - : Represents events providing information related to modification of the clipboard, that is {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, and {{domxref("Element/paste_event", "paste")}} events. The specification refers to this as the 'Clipboard Event API'. @@ -53,8 +56,6 @@ The Clipboard API extends the following APIs, adding the listed features. - `Element` [`paste`](/en-US/docs/Web/API/Element/paste_event) event - : An event fired whenever the user initiates a paste action. - - ## Security considerations The Clipboard API allows users to programmatically read and write text and other kinds of data to and from the system clipboard in [secure contexts](/en-US/docs/Web/Security/Defenses/Secure_Contexts). @@ -109,7 +110,3 @@ navigator.clipboard ## Browser compatibility {{Compat}} - -## See also - -- [Image support for Async Clipboard article](https://web.dev/articles/async-clipboard) diff --git a/files/en-us/web/api/clipboardchangeevent/changeid/index.md b/files/en-us/web/api/clipboardchangeevent/changeid/index.md new file mode 100644 index 000000000000000..c3dd1a9bc34d907 --- /dev/null +++ b/files/en-us/web/api/clipboardchangeevent/changeid/index.md @@ -0,0 +1,42 @@ +--- +title: "ClipboardChangeEvent: changeId property" +short-title: changeId +slug: Web/API/ClipboardChangeEvent/changeId +page-type: web-api-instance-property +browser-compat: api.ClipboardChangeEvent.changeId +--- + +{{securecontext_header}}{{APIRef("Clipboard API")}} + +The **`changeId`** read-only property of the {{domxref("ClipboardChangeEvent")}} interface returns an integer representing a unique identifier for this specific clipboard change operation. + +The identifier is consistent across all windows and tabs with the same storage key for the same clipboard change, enabling applications to deduplicate events when multiple windows receive the same clipboard change notification. + +## Value + +An integer. A cryptographically derived 128-bit integer that, after something is written to the clipboard, is guaranteed to yield a different value than it did before the write operation. + +## Examples + +In this example, when the contents of the clipboard change, the event listener uses the `ClipboardChangeEvent.changeId` property to log to the console the unique ID representing the clipboard change operation that fired the event. + +```js +navigator.clipboard.addEventListener("clipboardchange", (event) => { + console.log(event.changeId); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("ClipboardChangeEvent.types")}} +- {{domxref("ClipboardChangeEvent")}} +- {{domxref("ClipboardEvent")}} +- [Clipboard API](/en-US/docs/Web/API/Clipboard_API) diff --git a/files/en-us/web/api/clipboardchangeevent/clipboardchangeevent/index.md b/files/en-us/web/api/clipboardchangeevent/clipboardchangeevent/index.md new file mode 100644 index 000000000000000..17d15af450d9b72 --- /dev/null +++ b/files/en-us/web/api/clipboardchangeevent/clipboardchangeevent/index.md @@ -0,0 +1,44 @@ +--- +title: "ClipboardChangeEvent: ClipboardChangeEvent() constructor" +short-title: ClipboardChangeEvent() +slug: Web/API/ClipboardChangeEvent/ClipboardChangeEvent +page-type: web-api-constructor +browser-compat: api.ClipboardChangeEvent.ClipboardChangeEvent +--- + +{{securecontext_header}}{{APIRef("Clipboard API")}} + +The **`ClipboardChangeEvent()`** constructor creates a new {{domxref("ClipboardChangeEvent")}} object instance when a `clipboardchange` event occurs. The `clipboardchange` event fires whenever the system clipboard contents are changed either by a web app or any other system application. + +> [!NOTE] +> This event constructor is generally not needed for production websites. Its primary use is for tests that require an instance of this event. + +## Syntax + +```js-nolint +new ClipboardChangeEvent(type) +new ClipboardChangeEvent(type, options) +``` + +### Parameters + +- `type` + - : A string with the name of the event. It should always be set to `clipboardchange`. +- `options` {{Optional_Inline}} + - : An object that, _in addition to the properties defined in {{domxref("Event/Event", "Event()")}}_, can have the following properties: + - `types` + - : An array of strings representing the data types available on the system clipboard. + - `changeId` + - : An integer representing a unique identifier for the clipboard change operation. + +### Return value + +A new {{domxref("ClipboardChangeEvent")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/clipboardchangeevent/index.md b/files/en-us/web/api/clipboardchangeevent/index.md new file mode 100644 index 000000000000000..1af173974870f4c --- /dev/null +++ b/files/en-us/web/api/clipboardchangeevent/index.md @@ -0,0 +1,56 @@ +--- +title: ClipboardChangeEvent +slug: Web/API/ClipboardChangeEvent +page-type: web-api-interface +browser-compat: api.ClipboardChangeEvent +--- + +{{APIRef("Clipboard API")}} + +The **`ClipboardChangeEvent`** interface of the {{domxref("Clipboard API", "", "", "nocode")}} represents events fired whenever the contents of the system clipboard are changed. + +{{InheritanceDiagram}} + +## Constructor + +- {{domxref("ClipboardChangeEvent.ClipboardChangeEvent", "ClipboardChangeEvent()")}} + - : Creates a new `ClipboardChangeEvent` event with the given parameters. + +## Instance properties + +_Also inherits properties from its parent {{domxref("Event")}}_. + +- {{domxref("ClipboardChangeEvent.types")}} {{ReadOnlyInline}} + - : An array of strings representing the mandatory data types available on the system clipboard when the event was fired. +- {{domxref("ClipboardChangeEvent.changeId")}} {{ReadOnlyInline}} + - : A 128-bit integer representing a unique identifier for this specific clipboard change operation. + +## Instance methods + +_No specific methods; inherits methods from its parent {{domxref("Event")}}_. + +## Examples + +In this example, when the clipboard's contents are changed, the event listener logs the data types, change id, and the entire event object to the console. This is a `ClipboardChangeEvent` object of type `clipboardchange`. + +```js +navigator.clipboard.addEventListener("clipboardchange", (event) => { + console.log(`MIME types: ${event.types}`); + console.log(`ID: ${event.changeId}`); + console.dir(event); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Copy-related events: {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}} +- {{domxref("ClipboardEvent")}} +- [Clipboard API](/en-US/docs/Web/API/Clipboard_API) diff --git a/files/en-us/web/api/clipboardchangeevent/types/index.md b/files/en-us/web/api/clipboardchangeevent/types/index.md new file mode 100644 index 000000000000000..d1879367d3fcd13 --- /dev/null +++ b/files/en-us/web/api/clipboardchangeevent/types/index.md @@ -0,0 +1,42 @@ +--- +title: "ClipboardChangeEvent: types property" +short-title: types +slug: Web/API/ClipboardChangeEvent/types +page-type: web-api-instance-property +browser-compat: api.ClipboardChangeEvent.types +--- + +{{securecontext_header}}{{APIRef("Clipboard API")}} + +The **`types`** read-only property of the {{domxref("ClipboardChangeEvent")}} interface returns an array of strings representing the mandatory {{glossary("MIME type","MIME types")}} available on the system clipboard when the `ClipboardChangeEvent` event was fired. Optional types and custom formats are not included to limit {{glossary("fingerprinting")}}. + +## Value + +An array of strings. + +## Examples + +In this example, when the contents of the clipboard change, the event listener logs to the console every string representing a [mime type](/en-US/docs/Web/HTTP/Guides/MIME_types) that is available in the array returned by the `ClipboardChangeEvent.types` property. + +```js +navigator.clipboard.addEventListener("clipboardchange", (event) => { + event.types.forEach((value) => { + console.log(value); + }); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("ClipboardChangeEvent.changeId")}} +- {{domxref("ClipboardChangeEvent")}} +- {{domxref("ClipboardEvent")}} +- [Clipboard API](/en-US/docs/Web/API/Clipboard_API) diff --git a/files/en-us/web/api/clipboardevent/index.md b/files/en-us/web/api/clipboardevent/index.md index a3ece80eadd2e63..645daee53c40081 100644 --- a/files/en-us/web/api/clipboardevent/index.md +++ b/files/en-us/web/api/clipboardevent/index.md @@ -38,5 +38,6 @@ _No specific methods; inherits methods from its parent {{domxref("Event")}}_. ## See also - Copy-related events: {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}} +- {{domxref("ClipboardChangeEvent")}} - [Clipboard API](/en-US/docs/Web/API/Clipboard_API) - [Image support for Async Clipboard article](https://web.dev/articles/async-clipboard) diff --git a/files/en-us/web/api/clipboarditem/index.md b/files/en-us/web/api/clipboarditem/index.md index 5d629b42d79edf1..7e622a07ca9d89d 100644 --- a/files/en-us/web/api/clipboarditem/index.md +++ b/files/en-us/web/api/clipboarditem/index.md @@ -123,5 +123,6 @@ async function getClipboardContents() { ## See also +- {{domxref("ClipboardChangeEvent")}} - [Clipboard API](/en-US/docs/Web/API/Clipboard_API) - [Image support for Async Clipboard article](https://web.dev/articles/async-clipboard) diff --git a/files/en-us/web/api/event/index.md b/files/en-us/web/api/event/index.md index 818cb37ec7a1dee..eb60cde367fb975 100644 --- a/files/en-us/web/api/event/index.md +++ b/files/en-us/web/api/event/index.md @@ -30,6 +30,7 @@ Note that all event interfaces have names which end in "Event". - {{domxref("AudioProcessingEvent")}} {{Deprecated_Inline}} - {{domxref("BeforeUnloadEvent")}} - {{domxref("BlobEvent")}} +- {{domxref("ClipboardChangeEvent")}} - {{domxref("ClipboardEvent")}} - {{domxref("CloseEvent")}} - {{domxref("CompositionEvent")}} diff --git a/files/en-us/web/api/range/detach/index.md b/files/en-us/web/api/range/detach/index.md index bc6633e4b403c27..8051549cc25d39b 100644 --- a/files/en-us/web/api/range/detach/index.md +++ b/files/en-us/web/api/range/detach/index.md @@ -3,10 +3,12 @@ title: "Range: detach() method" short-title: detach() slug: Web/API/Range/detach page-type: web-api-instance-method +status: + - deprecated browser-compat: api.Range.detach --- -{{ApiRef("DOM")}} +{{ApiRef("DOM")}}{{deprecated_header}} The **`Range.detach()`** method does nothing. It used to disable the {{domxref("Range")}} object and enable the browser to release associated diff --git a/files/en-us/web/api/range/index.md b/files/en-us/web/api/range/index.md index 48dadf8e046ae60..76265c9c6037adf 100644 --- a/files/en-us/web/api/range/index.md +++ b/files/en-us/web/api/range/index.md @@ -47,7 +47,7 @@ _There are no inherited methods._ - : Returns a {{ domxref("DocumentFragment") }} created from a given string of code. - {{ domxref("Range.deleteContents()")}} - : Removes the contents of a `Range` from the {{ domxref("Document") }}. -- {{ domxref("Range.detach()")}} +- {{ domxref("Range.detach()")}} {{deprecated_inline}} - : Does nothing. Kept for compatibility. - {{ domxref("Range.extractContents()")}} - : Moves contents of a `Range` from the document tree into a {{ domxref("DocumentFragment") }}. diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 9af10e6e5c59e84..d71b11bc236f8d9 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -170,7 +170,12 @@ }, "Clipboard API": { "overview": ["Clipboard API"], - "interfaces": ["Clipboard", "ClipboardEvent", "ClipboardItem"], + "interfaces": [ + "Clipboard", + "ClipboardChangeEvent", + "ClipboardEvent", + "ClipboardItem" + ], "methods": [], "properties": ["Navigator.clipboard"], "events": ["Element: copy", "Element: cut", "Element: paste"] diff --git a/files/jsondata/InterfaceData.json b/files/jsondata/InterfaceData.json index 40c49b45aedc512..832f1b3a11198e4 100644 --- a/files/jsondata/InterfaceData.json +++ b/files/jsondata/InterfaceData.json @@ -176,6 +176,10 @@ "inh": "", "impl": [] }, + "AutofillEvent": { + "inh": "Event", + "impl": [] + }, "BackgroundFetchEvent": { "inh": "ExtendableEvent", "impl": [] @@ -520,6 +524,14 @@ "inh": "Animation", "impl": [] }, + "CSSApplyBlockRule": { + "inh": "CSSGroupingRule", + "impl": [] + }, + "CSSApplyStatementRule": { + "inh": "CSSRule", + "impl": [] + }, "CSSColor": { "inh": "CSSColorValue", "impl": [] @@ -540,6 +552,14 @@ "inh": "CSSConditionRule", "impl": [] }, + "CSSContentsBlockRule": { + "inh": "CSSGroupingRule", + "impl": [] + }, + "CSSContentsStatementRule": { + "inh": "CSSRule", + "impl": [] + }, "CSSCounterStyleRule": { "inh": "CSSRule", "impl": [] @@ -672,6 +692,10 @@ "inh": "CSSConditionRule", "impl": [] }, + "CSSMixinRule": { + "inh": "CSSGroupingRule", + "impl": [] + }, "CSSNamespaceRule": { "inh": "CSSRule", "impl": []