diff --git a/files/en-us/web/api/uievent/detail/index.md b/files/en-us/web/api/uievent/detail/index.md
index ccfe28e91ccd3f5..3380d22b14c1ea6 100644
--- a/files/en-us/web/api/uievent/detail/index.md
+++ b/files/en-us/web/api/uievent/detail/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.detail
+title: "UIEvent: detail property"
+short-title: detail
slug: Web/API/UIEvent/detail
page-type: web-api-instance-property
browser-compat: api.UIEvent.detail
diff --git a/files/en-us/web/api/uievent/inituievent/index.md b/files/en-us/web/api/uievent/inituievent/index.md
index dcde13abdba488e..1f548b185aafec3 100644
--- a/files/en-us/web/api/uievent/inituievent/index.md
+++ b/files/en-us/web/api/uievent/inituievent/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.initUIEvent()
+title: "UIEvent: initUIEvent() method"
+short-title: initUIEvent()
slug: Web/API/UIEvent/initUIEvent
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/uievent/sourcecapabilities/index.md b/files/en-us/web/api/uievent/sourcecapabilities/index.md
index 88ad89ca770d435..8a8063ffafde527 100644
--- a/files/en-us/web/api/uievent/sourcecapabilities/index.md
+++ b/files/en-us/web/api/uievent/sourcecapabilities/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.sourceCapabilities
+title: "UIEvent: sourceCapabilities property"
+short-title: sourceCapabilities
slug: Web/API/UIEvent/sourceCapabilities
page-type: web-api-instance-property
status:
@@ -7,9 +8,9 @@ status:
browser-compat: api.UIEvent.sourceCapabilities
---
-{{APIRef("UI Events")}}{{SeeCompatTable}}
+{{APIRef("Input Device Capabilities API")}}{{SeeCompatTable}}
-The **`UIEvent.sourceCapabilities`** read-only property returns
+The **`sourceCapabilities`** read-only property of the {{domxref("UIEvent")}} interface returns
an instance of the {{domxref('InputDeviceCapabilities')}} interface which provides
information about the physical device responsible for generating a touch event. If no
input device was responsible for the event, it returns `null`.
diff --git a/files/en-us/web/api/uievent/uievent/index.md b/files/en-us/web/api/uievent/uievent/index.md
index b76aa71a03b898d..72fac67feb5b465 100644
--- a/files/en-us/web/api/uievent/uievent/index.md
+++ b/files/en-us/web/api/uievent/uievent/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent()
+title: "UIEvent: UIEvent() constructor"
+short-title: UIEvent()
slug: Web/API/UIEvent/UIEvent
page-type: web-api-constructor
browser-compat: api.UIEvent.UIEvent
diff --git a/files/en-us/web/api/uievent/view/index.md b/files/en-us/web/api/uievent/view/index.md
index 7db98176cb8c770..3a992e93de264a1 100644
--- a/files/en-us/web/api/uievent/view/index.md
+++ b/files/en-us/web/api/uievent/view/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.view
+title: "UIEvent: view property"
+short-title: view
slug: Web/API/UIEvent/view
page-type: web-api-instance-property
browser-compat: api.UIEvent.view
diff --git a/files/en-us/web/api/uievent/which/index.md b/files/en-us/web/api/uievent/which/index.md
index 6fea5f8bb100150..4d8f2c575d0556a 100644
--- a/files/en-us/web/api/uievent/which/index.md
+++ b/files/en-us/web/api/uievent/which/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.which
+title: "UIEvent: which property"
+short-title: which
slug: Web/API/UIEvent/which
page-type: web-api-instance-property
status:
@@ -48,7 +49,7 @@ In this case, the values are read from right to left.
`keyCode property: ${evt.keyCode}\n` +
`which property: ${evt.which}\n` +
`charCode property: ${evt.charCode}\n` +
- `Character Key Pressed: ${String.fromCharCode(evt.charCode)}\n`
+ `Character Key Pressed: ${String.fromCharCode(evt.charCode)}\n`,
);
}
@@ -56,7 +57,7 @@ In this case, the values are read from right to left.
alert(
`onkeydown handler:\n` +
`keyCode property: ${evt.keyCode}\n` +
- `which property: ${evt.which}\n`
+ `which property: ${evt.which}\n`,
);
}
diff --git a/files/en-us/web/api/url/canparse_static/index.md b/files/en-us/web/api/url/canparse_static/index.md
new file mode 100644
index 000000000000000..103dfc807c6ab5b
--- /dev/null
+++ b/files/en-us/web/api/url/canparse_static/index.md
@@ -0,0 +1,110 @@
+---
+title: "URL: canParse() static method"
+short-title: canParse()
+slug: Web/API/URL/canParse_static
+page-type: web-api-static-method
+browser-compat: api.URL.canParse_static
+---
+
+{{ApiRef("URL API")}}
+
+The **`URL.canParse()`** static method of the {{domxref("URL")}} interface returns a boolean indicating whether or not an absolute URL, or a relative URL combined with a base URL, are parsable and valid.
+
+This is a fast and easy alternative to constructing a `URL` within a [try...catch](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block.
+It returns `true` for the same values for which the [`URL()` constructor](/en-US/docs/Web/API/URL/URL) would succeed, and `false` for the values that would cause the constructor to throw.
+
+## Syntax
+
+```js-nolint
+URL.canParse(url)
+URL.canParse(url, base)
+```
+
+### Parameters
+
+- `url`
+ - : A string or any other object with a {{Glossary("stringifier")}} — including, for example, an {{htmlelement("a")}} or {{htmlelement("area")}} element — that represents an absolute or relative URL.
+ If `url` is a relative URL, `base` is required, and will be used as the base URL.
+ If `url` is an absolute URL, a given `base` will be ignored.
+- `base` {{optional_inline}}
+ - : A string representing the base URL to use in cases where `url` is a relative URL.
+ If not specified, it defaults to `undefined`.
+
+> **Note:** The `url` and `base` arguments will each be stringified from whatever value you pass, just like with other Web APIs that accept a string.
+> In particular, you can use an existing {{domxref("URL")}} object for either argument, and it will be stringified to the object's {{domxref("URL.href", "href")}} property.
+
+### Return value
+
+`true` if the URL can be parsed and is valid; `false` otherwise.
+
+## Examples
+
+This live example demonstrates how to use the `URL.canParse()` static method for a few different absolute and relative URL values.
+
+The first part of the example defines an HTML `` element to log to, along with a logging method `log()`.
+
+```html
+` view transition ended up looking like this:
@@ -184,13 +188,13 @@ figcaption {
}
```
-This works because by default, `::view-transition-group` transitions width and height between the old and new views. We just needed to set a fixed `height` on both states to make it work.
+This works because, by default, `::view-transition-group` transitions width and height between the old and new views. We just needed to set a fixed `height` on both states to make it work.
> **Note:** [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples.
### Controlling animations with JavaScript
-The {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns a {{domxref("ViewTransition")}} object instance, which contains several promise members allowing you to run JavaScript in response to different states of the transition being reached. For example, {{domxref("ViewTransition.ready")}} fulfills once the pseudo-element tree is created and the animation is about to start, whereas {{domxref("ViewTransition.finished")}} fulfills once the the animation is finished, and the new page view is visible and interactive to the user.
+The {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns a {{domxref("ViewTransition")}} object instance, which contains several promise members allowing you to run JavaScript in response to different states of the transition being reached. For example, {{domxref("ViewTransition.ready")}} fulfills once the pseudo-element tree is created and the animation is about to start, whereas {{domxref("ViewTransition.finished")}} fulfills once the animation is finished, and the new page view is visible and interactive to the user.
For example, the following JavaScript could be used to create a circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the {{domxref("Web Animations API", "Web Animations API", "", "nocode")}}.
@@ -212,7 +216,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -235,7 +239,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
@@ -302,3 +306,4 @@ This animation also requires the following CSS, to turn off the default CSS anim
## See also
- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [View Transitions API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/)
diff --git a/files/en-us/web/api/viewtimeline/endoffset/index.md b/files/en-us/web/api/viewtimeline/endoffset/index.md
new file mode 100644
index 000000000000000..104c7afed32fbd8
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/endoffset/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: endOffset property"
+short-title: endOffset
+slug: Web/API/ViewTimeline/endOffset
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.endOffset
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`endOffset`** read-only property of the {{domxref("ViewTimeline")}} interface returns a {{domxref("CSSNumericValue")}} representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Value
+
+A {{domxref("CSSNumericValue")}}.
+
+## Examples
+
+See the main {{domxref("ScrollTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/index.md b/files/en-us/web/api/viewtimeline/index.md
new file mode 100644
index 000000000000000..16be717f493f3cf
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/index.md
@@ -0,0 +1,175 @@
+---
+title: ViewTimeline
+slug: Web/API/ViewTimeline
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.ViewTimeline
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`ViewTimeline`** interface of the {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} represents a view progress timeline (see [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations) for more details).
+
+Pass a `ViewTimeline` instance to the {{domxref("Animation.Animation", "Animation()")}} constructor or the {{domxref("Element.animate()", "animate()")}} method to specify it as the timeline that will control the progress of the animation.
+
+{{InheritanceDiagram}}
+
+## Constructor
+
+- {{domxref("ViewTimeline.ViewTimeline", "ViewTimeline()")}} {{Experimental_Inline}}
+ - : Creates a new `ViewTimeline` object instance.
+
+## Instance properties
+
+_This interface also inherits the properties of its parent, {{domxref("ScrollTimeline")}}._
+
+- {{domxref("ViewTimeline.subject", "subject")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline and therefore the animation.
+- {{domxref("ViewTimeline.startOffset", "startOffset")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a {{domxref("CSSNumericValue")}} representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+- {{domxref("ViewTimeline.endOffset", "endOffset")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a {{domxref("CSSNumericValue")}} representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Instance methods
+
+_This interface inherits the methods of its parent, {{domxref("ScrollTimeline")}}._
+
+## Examples
+
+### Displaying the subject and offsets of a view progress timeline
+
+In this example, we animate an element with a `class` of `subject` along a view progress timeline — it animates when moved upwards through the document as it scrolls. We also output the `subject`, `startOffset`, and `endOffset` values to an output element in the top-right corner.
+
+#### HTML
+
+The HTML for the example is shown below.
+
+```html
+
+
Content
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
+ quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
+ interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
+ vivamus at augue.
+
+
+
+ Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
+ dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
+ duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
+ Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
+ arcu vitae elementum curabitur vitae nunc sed velit.
+
+
+
+
+
+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
+ cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
+ dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
+ tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
+ vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
+ quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
+ imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
+ scelerisque. Netus et malesuada fames ac.
+
+
+
+
`s, then create a new {{domxref("ViewTimeline")}}, associating it with the `subject` element to specify that the timeline progress is based on this element's visibility through its scrolling ancestor, setting a `block` axis, and setting `inset` values to adjust the position of the box in which the subject is deemed to be visible.
+
+We then animate the `subject` element with the Web Animations API. Last of all, we display the `subject`, `startOffset`, and `endOffset` values in the `output` element.
+
+```js
+const subject = document.querySelector(".subject");
+const output = document.querySelector(".output");
+
+const timeline = new ViewTimeline({
+ subject,
+ axis: "block",
+ inset: [CSS.px("200"), CSS.px("300")],
+});
+
+subject.animate(
+ {
+ opacity: [0, 1],
+ transform: ["scaleX(0)", "scaleX(1)"],
+ },
+ {
+ fill: "both",
+ timeline,
+ },
+);
+
+output.textContent += `Subject element: ${timeline.subject.nodeName}, `;
+output.textContent += `start offset: ${timeline.startOffset}, `;
+output.textContent += `end offset: ${timeline.endOffset}.`;
+```
+
+#### Result
+
+Scroll to see the subject element being animated.
+
+{{EmbedLiveSample("Tracking the progress of a view progress timeline", "100%", "480px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/startoffset/index.md b/files/en-us/web/api/viewtimeline/startoffset/index.md
new file mode 100644
index 000000000000000..78236d902e0a92c
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/startoffset/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: startOffset property"
+short-title: startOffset
+slug: Web/API/ViewTimeline/startOffset
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.startOffset
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`startOffset`** read-only property of the {{domxref("ViewTimeline")}} interface returns a {{domxref("CSSNumericValue")}} representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Value
+
+A {{domxref("CSSNumericValue")}}.
+
+## Examples
+
+See the main {{domxref("ScrollTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/subject/index.md b/files/en-us/web/api/viewtimeline/subject/index.md
new file mode 100644
index 000000000000000..783626d691c23af
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/subject/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: subject property"
+short-title: subject
+slug: Web/API/ViewTimeline/subject
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.subject
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`subject`** read-only property of the {{domxref("ViewTimeline")}} interface returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline.
+
+## Value
+
+An {{domxref("Element")}}.
+
+## Examples
+
+See the main {{domxref("ViewTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/viewtimeline/index.md b/files/en-us/web/api/viewtimeline/viewtimeline/index.md
new file mode 100644
index 000000000000000..292f1455d91f0ad
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/viewtimeline/index.md
@@ -0,0 +1,73 @@
+---
+title: "ViewTimeline: ViewTimeline() constructor"
+short-title: ViewTimeline()
+slug: Web/API/ViewTimeline/ViewTimeline
+page-type: web-api-constructor
+status:
+ - experimental
+browser-compat: api.ViewTimeline.ViewTimeline
+---
+
+{{APIRef("History API")}}{{SeeCompatTable}}
+
+The **`ViewTimeline()`** constructor creates a new {{domxref("ViewTimeline")}} object instance.
+
+## Syntax
+
+```js-nolint
+new ViewTimeline(options)
+```
+
+### Parameters
+
+- `options`
+
+ - : An object that can contain the following properties:
+
+ - `subject`
+ - : A reference to an {{domxref("Element")}} representing the subject element whose visibility within its nearest ancestor scrollable element (scroller) will drive the progress of the timeline.
+ - `axis` {{optional_inline}}
+
+ - : An enumerated value representing the scroll axis that will drive the progress of the timeline. Possible values are:
+
+ - `"block"`: The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `"y"`, while for vertical writing modes, it is the same as `"x"`.
+ - `"inline"`: The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `"x"`, while for vertical writing modes, this is the same as `"y"`.
+ - `"y"`: The scrollbar on the vertical axis of the scroll container.
+ - `"x"`: The scrollbar on the horizontal axis of the scroll container.
+
+ If omitted, `axis` defaults to `"block"`.
+
+ - `inset` {{optional_inline}}
+
+ - : A value or array of values representing an adjustment to the position of the scrollport (see {{glossary("Scroll container")}} for more details) in which the subject is deemed to be visible. Possible values are:
+
+ - `"auto"`: The default box position is used.
+ - A string: If a string is specified, it can consist of one or two values equal to `auto` or a CSS {{cssxref("length-percentage")}} value. To put it another way, the string should be a valid {{cssxref("view-timeline-inset")}} value.
+ - An array of one or two values, which can be `"auto"` or a suitable {{domxref("CSSNumericValue")}} to represent a length or percentage offset (for example `CSS.px()` or `CSS.percent()`. If an array is provided, the first value represents the start inset (which affects the {{domxref("ViewTimeline.endOffset")}} value) and the second value represents the end inset (which affects the {{domxref("ViewTimeline.startOffset")}} value).
+
+ If the array has only one value, it is duplicated.
+
+ If omitted, `inset` defaults to `auto`.
+
+### Return value
+
+A new {{domxref("ViewTimeline")}} object instance.
+
+## Examples
+
+See the main {{domxref("ViewTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtransition/finished/index.md b/files/en-us/web/api/viewtransition/finished/index.md
index 834b44ca476f799..d936d3d476a0679 100644
--- a/files/en-us/web/api/viewtransition/finished/index.md
+++ b/files/en-us/web/api/viewtransition/finished/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.finished
+title: "ViewTransition: finished property"
+short-title: finished
slug: Web/API/ViewTransition/finished
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.finished
---
@@ -28,17 +30,17 @@ Sometimes certain navigations will require specifically tailored transitions, fo
```js
async function handleTransition() {
if (isBackNavigation) {
- document.documentElement.classList.add('back-transition');
+ document.documentElement.classList.add("back-transition");
}
const transition = document.startViewTransition(() =>
- updateTheDOMSomehow(data)
+ updateTheDOMSomehow(data),
);
try {
await transition.finished;
} finally {
- document.documentElement.classList.remove('back-transition');
+ document.documentElement.classList.remove("back-transition");
}
}
```
diff --git a/files/en-us/web/api/viewtransition/index.md b/files/en-us/web/api/viewtransition/index.md
index 3a8d02f237c7089..36b23d570e0a85f 100644
--- a/files/en-us/web/api/viewtransition/index.md
+++ b/files/en-us/web/api/viewtransition/index.md
@@ -2,7 +2,8 @@
title: ViewTransition
slug: Web/API/ViewTransition
page-type: web-api-interface
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition
---
@@ -50,7 +51,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -73,7 +74,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
diff --git a/files/en-us/web/api/viewtransition/ready/index.md b/files/en-us/web/api/viewtransition/ready/index.md
index a20ad598856c9a1..622c2abfd86be0c 100644
--- a/files/en-us/web/api/viewtransition/ready/index.md
+++ b/files/en-us/web/api/viewtransition/ready/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.ready
+title: "ViewTransition: ready property"
+short-title: ready
slug: Web/API/ViewTransition/ready
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.ready
---
@@ -39,7 +41,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -62,7 +64,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
diff --git a/files/en-us/web/api/viewtransition/skiptransition/index.md b/files/en-us/web/api/viewtransition/skiptransition/index.md
index 2062297be85ebf0..2e2c7f8498ef99e 100644
--- a/files/en-us/web/api/viewtransition/skiptransition/index.md
+++ b/files/en-us/web/api/viewtransition/skiptransition/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.skipTransition()
+title: "ViewTransition: skipTransition() method"
+short-title: skipTransition()
slug: Web/API/ViewTransition/skipTransition
page-type: web-api-instance-method
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.skipTransition
---
diff --git a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
index 6280c5947c5199e..da85c39ae64357d 100644
--- a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
+++ b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.updateCallbackDone
+title: "ViewTransition: updateCallbackDone property"
+short-title: updateCallbackDone
slug: Web/API/ViewTransition/updateCallbackDone
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.updateCallbackDone
---
@@ -23,10 +25,9 @@ A promise.
// start new view transition
const transition = document.startViewTransition(() => displayNewImage());
-transition.updateCallbackDone
- .then(() => {
- // Respond to the DOM being updated successfully
- });
+transition.updateCallbackDone.then(() => {
+ // Respond to the DOM being updated successfully
+});
```
See [Transitions as an enhancement](https://developer.chrome.com/docs/web-platform/view-transitions/#transitions-as-an-enhancement) for a useful example.
diff --git a/files/en-us/web/api/virtualkeyboard/boundingrect/index.md b/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
index 46814f03dd2c323..575ce9e2c00e2c4 100644
--- a/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
+++ b/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.boundingRect
+title: "VirtualKeyboard: boundingRect property"
+short-title: boundingRect
slug: Web/API/VirtualKeyboard/boundingRect
page-type: web-api-instance-property
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.boundingRect
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`boundingRect`** property of the {{domxref("VirtualKeyboard")}} interface contains a {{domxref("DOMRect")}} indicating the position and size of the on-screen virtual keyboard that overlays the web page.
diff --git a/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md b/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
index adb159623cf14b8..49521dd3e19e9cf 100644
--- a/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
+++ b/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
@@ -1,5 +1,6 @@
---
title: "VirtualKeyboard: geometrychange event"
+short-title: geometrychange
slug: Web/API/VirtualKeyboard/geometrychange_event
page-type: web-api-event
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.geometrychange_event
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`geometrychange`** event of the {{domxref("VirtualKeyboard")}}
interface fires when the on-screen virtual keyboard is toggled between shown and hidden states.
@@ -34,7 +35,7 @@ The following code snippet uses the `geometrychange` event to detect when the vi
```js
if ("virtualKeyboard" in navigator) {
- navigator.overlaysContent = true;
+ navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
diff --git a/files/en-us/web/api/virtualkeyboard/hide/index.md b/files/en-us/web/api/virtualkeyboard/hide/index.md
index 4a866bdaa555a92..99f5619975135fc 100644
--- a/files/en-us/web/api/virtualkeyboard/hide/index.md
+++ b/files/en-us/web/api/virtualkeyboard/hide/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.hide()
+title: "VirtualKeyboard: hide() method"
+short-title: hide()
slug: Web/API/VirtualKeyboard/hide
page-type: web-api-instance-method
status:
@@ -7,11 +8,11 @@ status:
browser-compat: api.VirtualKeyboard.hide
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`hide()`** method of the {{domxref("VirtualKeyboard")}} interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the {{domxref("VirtualKeyboard_API", "VirtualKeyboard API", "", "nocode")}}.
-This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable).
+This method only works if the currently-focused element's [`virtualKeyboardPolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute is set to `manual` and [`inputmode`](/en-US/docs/Web/HTML/Global_attributes/inputmode) isn't set to `none`.
The `hide()` method always returns `undefined` and triggers a {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} event.
diff --git a/files/en-us/web/api/virtualkeyboard/index.md b/files/en-us/web/api/virtualkeyboard/index.md
index 06a1dcff5cb93b8..75e7ee908f4b430 100644
--- a/files/en-us/web/api/virtualkeyboard/index.md
+++ b/files/en-us/web/api/virtualkeyboard/index.md
@@ -7,7 +7,7 @@ status:
browser-compat: api.VirtualKeyboard
---
-{{SeeCompatTable}}{{APIRef("VirtualKeyboard API")}}
+{{SeeCompatTable}}{{APIRef("VirtualKeyboard API")}}{{securecontext_header}}
The **`VirtualKeyboard`** interface of the [VirtualKeyboard API](/en-US/docs/Web/API/VirtualKeyboard_API) is useful on devices that have on-screen virtual keyboards, such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
@@ -19,34 +19,34 @@ You access the `VirtualKeyboard` interface by using {{domxref("navigator.virtual
## Instance properties
-_The `VirtualKeyboard` interface doesn't inherit any properties._
+_The `VirtualKeyboard` interface inherits properties from its parent, {{domxref("EventTarget")}}._
- {{DOMxRef("VirtualKeyboard.boundingRect")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A {{domxref("DOMRect")}} that describes the geometry of the virtual keyboard.
- {{DOMxRef("VirtualKeyboard.overlaysContent")}} {{Experimental_Inline}}
- : A {{jsxref('Boolean')}} that defines whether the browser should stop handling the on-screen virtual keyboard.
-### Events
-
-- {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} {{Experimental_Inline}}
- - : Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.
-
## Instance methods
-_The `VirtualKeyboard` interface doesn't inherit any methods_.
+_The `VirtualKeyboard` interface inherits methods from its parent, {{domxref("EventTarget")}}._
- {{domxref('VirtualKeyboard.show()')}} {{experimental_inline}}
- : Show the virtual keyboard.
- {{domxref('VirtualKeyboard.hide()')}} {{experimental_inline}}
- : Hide the virtual keyboard.
+## Events
+
+- {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} {{Experimental_Inline}}
+ - : Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.
+
## Example
The following example demonstrates how to opt out of the automatic virtual keyboard behavior, and detect the geometry of the virtual keyboard in the web page:
```js
if ("virtualKeyboard" in navigator) {
- navigator.overlaysContent = true;
+ navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
diff --git a/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md b/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
index eec3f9f567a5971..f1570ce831cf4a8 100644
--- a/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
+++ b/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.overlaysContent
+title: "VirtualKeyboard: overlaysContent property"
+short-title: overlaysContent
slug: Web/API/VirtualKeyboard/overlaysContent
page-type: web-api-instance-property
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.overlaysContent
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`overlaysContent`** property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.
diff --git a/files/en-us/web/api/virtualkeyboard/show/index.md b/files/en-us/web/api/virtualkeyboard/show/index.md
index ebcec306234ce84..edf87254466d861 100644
--- a/files/en-us/web/api/virtualkeyboard/show/index.md
+++ b/files/en-us/web/api/virtualkeyboard/show/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.show()
+title: "VirtualKeyboard: show() method"
+short-title: show()
slug: Web/API/VirtualKeyboard/show
page-type: web-api-instance-method
status:
@@ -7,11 +8,11 @@ status:
browser-compat: api.VirtualKeyboard.show
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`show()`** method of the {{domxref("VirtualKeyboard")}} interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the `virtualkeyboardpolicy` attribute on `contenteditable` elements as explained in [Control the virtual keyboard on `contenteditable` elements](/en-US/docs/Web/API/VirtualKeyboard_API#control_the_virtual_keyboard_on_contenteditable_elements).
-This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable).
+This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable), and the currently-focused element's [`virtualKeyboardPolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute is set to `manual` and [`inputmode`](/en-US/docs/Web/HTML/Global_attributes/inputmode) isn't set to `none`.
The `show()` method always returns `undefined` and triggers a {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} event.
diff --git a/files/en-us/web/api/virtualkeyboard_api/index.md b/files/en-us/web/api/virtualkeyboard_api/index.md
index 741af611eea16dd..f91f38746cf775a 100644
--- a/files/en-us/web/api/virtualkeyboard_api/index.md
+++ b/files/en-us/web/api/virtualkeyboard_api/index.md
@@ -4,11 +4,10 @@ slug: Web/API/VirtualKeyboard_API
page-type: web-api-overview
status:
- experimental
-browser-compat:
- - api.VirtualKeyboard
+browser-compat: api.VirtualKeyboard
---
-{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}
+{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}{{securecontext_header}}
The VirtualKeyboard API provides developers control over the layout of their applications when the on-screen virtual keyboard appears and disappears on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
@@ -32,7 +31,7 @@ The VirtualKeyboard API consists of three parts:
- The {{domxref("VirtualKeyboard")}} interface, accessed through {{domxref('navigator.virtualKeyboard')}}, is used to opt out of the automatic virtual keyboard behavior, show or hide the virtual keyboard programmatically, as well as get the current position and size of the virtual keyboard.
- The `keyboard-inset-*` CSS environment variables provide information about the virtual keyboard's position and size.
-- The [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) attribute specifies whether the virtual keyboard should appear on `contenteditable` elements.
+- The [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute specifies whether the virtual keyboard should appear on `contenteditable` elements.
### Opt out of the automatic virtual keyboard behavior
@@ -87,9 +86,9 @@ The code snippet below uses the `keyboard-inset-height` CSS variable to reserve
### Control the virtual keyboard on `contenteditable` elements
-By default, elements using the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute also trigger the virtual keyboard when tapped or clicked. In certain situations, it may be desirable to prevent this behavior and instead show the virtual keyboard after a different event.
+By default, elements using the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute also trigger the virtual keyboard when tapped or clicked. In certain situations, it may be desirable to prevent this behavior and instead show the virtual keyboard after a different event.
-Set the [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) attribute to `manual` to prevent the default handling of the virtual keyboard in the browser, and instead handle it yourself by using the {{domxref("VirtualKeyboard")}} interface's `show()` and `hide()` methods.
+Set the [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute to `manual` to prevent the default handling of the virtual keyboard in the browser, and instead handle it yourself by using the {{domxref("VirtualKeyboard")}} interface's `show()` and `hide()` methods.
The code snippet below shows how to use the `virtualkeyboardpolicy` attribute and the `navigator.virtualKeyboard.show()` method to show the virtual keyboard on double-click instead:
@@ -112,6 +111,13 @@ The code snippet below shows how to use the `virtualkeyboardpolicy` attribute an
- {{domxref('VirtualKeyboard')}} {{experimental_inline}}
- : Provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
+## Extensions to other interfaces
+
+- {{domxref("Navigator.virtualKeyboard")}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Returns a reference to the {{DOMxRef("VirtualKeyboard")}} API, to take control of the on-screen virtual keyboard.
+- {{domxref("HTMLElement.virtualkeyboardpolicy")}} {{experimental_inline}}
+ - : A string indicating whether to use the browser's default policy for showing the virtual keyboard when the element is focused, or to handle showing the virtual keyboard manually.
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/visibilitystateentry/index.md b/files/en-us/web/api/visibilitystateentry/index.md
new file mode 100644
index 000000000000000..27f6e0f90ab2a7b
--- /dev/null
+++ b/files/en-us/web/api/visibilitystateentry/index.md
@@ -0,0 +1,83 @@
+---
+title: VisibilityStateEntry
+slug: Web/API/VisibilityStateEntry
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.VisibilityStateEntry
+---
+
+{{APIRef("Performance API")}}{{seecompattable}}
+
+The **`VisibilityStateEntry`** interface provides timings of page visibility state changes, i.e., when a tab changes from the foreground to the background or vice versa.
+
+This can be used to pinpoint visibility changes on the performance timeline, and cross-reference them against other performance entries such as "first-contentful-paint" (see {{domxref("PerformancePaintTiming")}}).
+
+There are two key visibility state change times that this API reports on:
+
+- `visible`: The time when the page becomes visible (i.e. when its tab moves into the foreground).
+- `hidden`: The time when the pages become hidden (i.e. when its tab moves into the background).
+
+The performance timeline will always have a "`visibility-state`" entry with a `startTime` of `0` and a `name` representing the initial page visibility state.
+
+> **Note:** Like other Performance APIs, this API extends {{domxref("PerformanceEntry")}}.
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+This interface has no properties but it extends the properties of {{domxref("PerformanceEntry")}} by qualifying and constraining them as follows:
+
+- {{domxref("PerformanceEntry.entryType")}} {{experimental_inline}}
+ - : Returns "`visibility-state`".
+- {{domxref("PerformanceEntry.name")}} {{experimental_inline}}
+ - : Returns either `"visible"` or `"hidden"`.
+- {{domxref("PerformanceEntry.startTime")}} {{experimental_inline}}
+ - : Returns the {{domxref("DOMHighResTimeStamp","timestamp")}} when the visibility state change occurred.
+- {{domxref("PerformanceEntry.duration")}} {{experimental_inline}}
+ - : Returns 0.
+
+## Instance methods
+
+This interface has no methods.
+
+## Examples
+
+### Basic usage
+
+The following function could be used to log a table of all "`visibility-state`" performance entries to the console:
+
+```js
+function getVisibilityStateEntries() {
+ const visibilityStateEntries =
+ performance.getEntriesByType("visibility-state");
+ console.table(visibilityStateEntries);
+}
+```
+
+### Correlating visibility state changes with paint timing
+
+The below function gets a reference to all "`visibility-state`" entries and the "`first-contentful-paint`" entry, then uses {{jsxref("Array.some()")}} to test whether any of the "`hidden`" visibility entries occurred before the first contentful paint:
+
+```js
+function wasHiddenBeforeFirstContentfulPaint() {
+ const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
+ const visibilityStateEntries =
+ performance.getEntriesByType("visibility-state");
+ return visibilityStateEntries.some(
+ (e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
+ );
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+[Page Visibility API](/en-US/docs/Web/API/Page_Visibility_API)
diff --git a/files/en-us/web/api/visualviewport/height/index.md b/files/en-us/web/api/visualviewport/height/index.md
index 9575397ba4ef9d5..e0fd634669187c4 100644
--- a/files/en-us/web/api/visualviewport/height/index.md
+++ b/files/en-us/web/api/visualviewport/height/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.height
+title: "VisualViewport: height property"
+short-title: height
slug: Web/API/VisualViewport/height
page-type: web-api-instance-property
browser-compat: api.VisualViewport.height
diff --git a/files/en-us/web/api/visualviewport/offsetleft/index.md b/files/en-us/web/api/visualviewport/offsetleft/index.md
index 40bfdaddcfcc34f..a499c0b8cfb8848 100644
--- a/files/en-us/web/api/visualviewport/offsetleft/index.md
+++ b/files/en-us/web/api/visualviewport/offsetleft/index.md
@@ -1,6 +1,7 @@
---
-title: VisualViewport.offsetleft
-slug: Web/API/VisualViewport/offsetleft
+title: "VisualViewport: offsetLeft property"
+short-title: offsetLeft
+slug: Web/API/VisualViewport/offsetLeft
page-type: web-api-instance-property
browser-compat: api.VisualViewport.offsetLeft
---
diff --git a/files/en-us/web/api/visualviewport/offsettop/index.md b/files/en-us/web/api/visualviewport/offsettop/index.md
index 85c2b0384ad5d0d..6dff431159272e7 100644
--- a/files/en-us/web/api/visualviewport/offsettop/index.md
+++ b/files/en-us/web/api/visualviewport/offsettop/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.offsetTop
+title: "VisualViewport: offsetTop property"
+short-title: offsetTop
slug: Web/API/VisualViewport/offsetTop
page-type: web-api-instance-property
browser-compat: api.VisualViewport.offsetTop
diff --git a/files/en-us/web/api/visualviewport/pageleft/index.md b/files/en-us/web/api/visualviewport/pageleft/index.md
index a95c17b0a6b8212..15df076b47f1ce0 100644
--- a/files/en-us/web/api/visualviewport/pageleft/index.md
+++ b/files/en-us/web/api/visualviewport/pageleft/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.pageLeft
+title: "VisualViewport: pageLeft property"
+short-title: pageLeft
slug: Web/API/VisualViewport/pageLeft
page-type: web-api-instance-property
browser-compat: api.VisualViewport.pageLeft
diff --git a/files/en-us/web/api/visualviewport/pagetop/index.md b/files/en-us/web/api/visualviewport/pagetop/index.md
index f8f5c508cc62d61..9f6d0e906cf522d 100644
--- a/files/en-us/web/api/visualviewport/pagetop/index.md
+++ b/files/en-us/web/api/visualviewport/pagetop/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.pageTop
+title: "VisualViewport: pageTop property"
+short-title: pageTop
slug: Web/API/VisualViewport/pageTop
page-type: web-api-instance-property
browser-compat: api.VisualViewport.pageTop
diff --git a/files/en-us/web/api/visualviewport/resize_event/index.md b/files/en-us/web/api/visualviewport/resize_event/index.md
index 7e66151ffb76557..2c246372b8679e8 100644
--- a/files/en-us/web/api/visualviewport/resize_event/index.md
+++ b/files/en-us/web/api/visualviewport/resize_event/index.md
@@ -1,5 +1,6 @@
---
title: "VisualViewport: resize event"
+short-title: resize
slug: Web/API/VisualViewport/resize_event
page-type: web-api-event
browser-compat: api.VisualViewport.resize_event
diff --git a/files/en-us/web/api/visualviewport/scale/index.md b/files/en-us/web/api/visualviewport/scale/index.md
index 94b3bdba70b3f78..4baef89c8796429 100644
--- a/files/en-us/web/api/visualviewport/scale/index.md
+++ b/files/en-us/web/api/visualviewport/scale/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.scale
+title: "VisualViewport: scale property"
+short-title: scale
slug: Web/API/VisualViewport/scale
page-type: web-api-instance-property
browser-compat: api.VisualViewport.scale
diff --git a/files/en-us/web/api/visualviewport/scroll_event/index.md b/files/en-us/web/api/visualviewport/scroll_event/index.md
index 660f3393822fe36..ed69b0c452c4643 100644
--- a/files/en-us/web/api/visualviewport/scroll_event/index.md
+++ b/files/en-us/web/api/visualviewport/scroll_event/index.md
@@ -1,5 +1,6 @@
---
title: "VisualViewport: scroll event"
+short-title: scroll
slug: Web/API/VisualViewport/scroll_event
page-type: web-api-event
browser-compat: api.VisualViewport.scroll_event
diff --git a/files/en-us/web/api/visualviewport/width/index.md b/files/en-us/web/api/visualviewport/width/index.md
index 2fa554355f3631f..36f3b7940a09663 100644
--- a/files/en-us/web/api/visualviewport/width/index.md
+++ b/files/en-us/web/api/visualviewport/width/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.width
+title: "VisualViewport: width property"
+short-title: width
slug: Web/API/VisualViewport/width
page-type: web-api-instance-property
browser-compat: api.VisualViewport.width
diff --git a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
index b5cc92e6133fd2b..ceb079b891892ae 100644
--- a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.cancelAnimationFrame()
+title: "VRDisplay: cancelAnimationFrame() method"
+short-title: cancelAnimationFrame()
slug: Web/API/VRDisplay/cancelAnimationFrame
page-type: web-api-instance-method
status:
@@ -60,7 +61,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -108,5 +109,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/capabilities/index.md b/files/en-us/web/api/vrdisplay/capabilities/index.md
index 86aee0ce0e88ce4..2d2b51558c2a03f 100644
--- a/files/en-us/web/api/vrdisplay/capabilities/index.md
+++ b/files/en-us/web/api/vrdisplay/capabilities/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.capabilities
+title: "VRDisplay: capabilities property"
+short-title: capabilities
slug: Web/API/VRDisplay/capabilities
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/depthfar/index.md b/files/en-us/web/api/vrdisplay/depthfar/index.md
index 2615572f2d9f733..5610a695133dbe4 100644
--- a/files/en-us/web/api/vrdisplay/depthfar/index.md
+++ b/files/en-us/web/api/vrdisplay/depthfar/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.depthFar
+title: "VRDisplay: depthFar property"
+short-title: depthFar
slug: Web/API/VRDisplay/depthFar
page-type: web-api-instance-property
status:
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/depthnear/index.md b/files/en-us/web/api/vrdisplay/depthnear/index.md
index a9fd97254b862ce..3a18302a4f1f596 100644
--- a/files/en-us/web/api/vrdisplay/depthnear/index.md
+++ b/files/en-us/web/api/vrdisplay/depthnear/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.depthNear
+title: "VRDisplay: depthNear property"
+short-title: depthNear
slug: Web/API/VRDisplay/depthNear
page-type: web-api-instance-property
status:
@@ -44,5 +45,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/displayid/index.md b/files/en-us/web/api/vrdisplay/displayid/index.md
index 06ebed6a9653efb..844fefe62d644c6 100644
--- a/files/en-us/web/api/vrdisplay/displayid/index.md
+++ b/files/en-us/web/api/vrdisplay/displayid/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.displayId
+title: "VRDisplay: displayId property"
+short-title: displayId
slug: Web/API/VRDisplay/displayId
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/displayname/index.md b/files/en-us/web/api/vrdisplay/displayname/index.md
index 6b7e263f7733ee9..e28d0e8c2fd9b7e 100644
--- a/files/en-us/web/api/vrdisplay/displayname/index.md
+++ b/files/en-us/web/api/vrdisplay/displayname/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.displayName
+title: "VRDisplay: displayName property"
+short-title: displayName
slug: Web/API/VRDisplay/displayName
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/exitpresent/index.md b/files/en-us/web/api/vrdisplay/exitpresent/index.md
index 7a9f066809f2bba..558cce008116f17 100644
--- a/files/en-us/web/api/vrdisplay/exitpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/exitpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.exitPresent()
+title: "VRDisplay: exitPresent() method"
+short-title: exitPresent()
slug: Web/API/VRDisplay/exitPresent
page-type: web-api-instance-method
status:
@@ -54,7 +55,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -93,5 +94,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/geteyeparameters/index.md b/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
index b0d6efde1ac9b35..8960a62396e4f3b 100644
--- a/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
+++ b/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getEyeParameters()
+title: "VRDisplay: getEyeParameters() method"
+short-title: getEyeParameters()
slug: Web/API/VRDisplay/getEyeParameters
page-type: web-api-instance-method
status:
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getframedata/index.md b/files/en-us/web/api/vrdisplay/getframedata/index.md
index 7503ee7a91f44c2..c06c4a30cf33333 100644
--- a/files/en-us/web/api/vrdisplay/getframedata/index.md
+++ b/files/en-us/web/api/vrdisplay/getframedata/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getFrameData()
+title: "VRDisplay: getFrameData() method"
+short-title: getFrameData()
slug: Web/API/VRDisplay/getFrameData
page-type: web-api-instance-method
status:
@@ -71,7 +72,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -80,7 +81,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -90,7 +91,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -120,5 +121,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getimmediatepose/index.md b/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
index 93e513f98b96c57..903fcae8e80201c 100644
--- a/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
+++ b/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getImmediatePose()
+title: "VRDisplay: getImmediatePose() method"
+short-title: getImmediatePose()
slug: Web/API/VRDisplay/getImmediatePose
page-type: web-api-instance-method
status:
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getlayers/index.md b/files/en-us/web/api/vrdisplay/getlayers/index.md
index fb1a9c921e0db1f..686226f6c68180c 100644
--- a/files/en-us/web/api/vrdisplay/getlayers/index.md
+++ b/files/en-us/web/api/vrdisplay/getlayers/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getLayers()
+title: "VRDisplay: getLayers() method"
+short-title: getLayers()
slug: Web/API/VRDisplay/getLayers
page-type: web-api-instance-method
status:
@@ -44,5 +45,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getpose/index.md b/files/en-us/web/api/vrdisplay/getpose/index.md
index da539ab4aec675b..d08f99bd8e3f009 100644
--- a/files/en-us/web/api/vrdisplay/getpose/index.md
+++ b/files/en-us/web/api/vrdisplay/getpose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getPose()
+title: "VRDisplay: getPose() method"
+short-title: getPose()
slug: Web/API/VRDisplay/getPose
page-type: web-api-instance-method
status:
@@ -67,5 +68,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/index.md b/files/en-us/web/api/vrdisplay/index.md
index b493ea1df90c851..e447fc0c9a1690f 100644
--- a/files/en-us/web/api/vrdisplay/index.md
+++ b/files/en-us/web/api/vrdisplay/index.md
@@ -90,5 +90,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/isconnected/index.md b/files/en-us/web/api/vrdisplay/isconnected/index.md
index 3bfc41fbe45a39d..5cd3f1e49bd8880 100644
--- a/files/en-us/web/api/vrdisplay/isconnected/index.md
+++ b/files/en-us/web/api/vrdisplay/isconnected/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.isConnected
+title: "VRDisplay: isConnected property"
+short-title: isConnected
slug: Web/API/VRDisplay/isConnected
page-type: web-api-instance-property
status:
@@ -53,5 +54,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/ispresenting/index.md b/files/en-us/web/api/vrdisplay/ispresenting/index.md
index d7d8bf74a99c3c8..d42849550818b12 100644
--- a/files/en-us/web/api/vrdisplay/ispresenting/index.md
+++ b/files/en-us/web/api/vrdisplay/ispresenting/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.isPresenting
+title: "VRDisplay: isPresenting property"
+short-title: isPresenting
slug: Web/API/VRDisplay/isPresenting
page-type: web-api-instance-property
status:
@@ -36,7 +37,7 @@ function onVRExitPresent() {
errMsg += `
${err.message}`;
}
VRSamplesUtil.addError(errMsg, 2000);
- }
+ },
);
}
```
@@ -55,5 +56,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
index c5053fc52c0239b..ac0964d4379fd87 100644
--- a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.requestAnimationFrame()
+title: "VRDisplay: requestAnimationFrame() method"
+short-title: requestAnimationFrame()
slug: Web/API/VRDisplay/requestAnimationFrame
page-type: web-api-instance-method
status:
@@ -71,7 +72,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -80,7 +81,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -90,7 +91,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -120,5 +121,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/requestpresent/index.md b/files/en-us/web/api/vrdisplay/requestpresent/index.md
index 189f819c0bc92ea..99c26fe13eb8fed 100644
--- a/files/en-us/web/api/vrdisplay/requestpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/requestpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.requestPresent()
+title: "VRDisplay: requestPresent() method"
+short-title: requestPresent()
slug: Web/API/VRDisplay/requestPresent
page-type: web-api-instance-method
status:
@@ -60,7 +61,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -99,5 +100,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/resetpose/index.md b/files/en-us/web/api/vrdisplay/resetpose/index.md
index 671a233440f0b2e..4f7fdd9db52035c 100644
--- a/files/en-us/web/api/vrdisplay/resetpose/index.md
+++ b/files/en-us/web/api/vrdisplay/resetpose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.resetPose()
+title: "VRDisplay: resetPose() method"
+short-title: resetPose()
slug: Web/API/VRDisplay/resetPose
page-type: web-api-instance-method
status:
@@ -55,5 +56,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/stageparameters/index.md b/files/en-us/web/api/vrdisplay/stageparameters/index.md
index 1454fc9ee8f8af1..cd4f916d646b94e 100644
--- a/files/en-us/web/api/vrdisplay/stageparameters/index.md
+++ b/files/en-us/web/api/vrdisplay/stageparameters/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.stageParameters
+title: "VRDisplay: stageParameters property"
+short-title: stageParameters
slug: Web/API/VRDisplay/stageParameters
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/submitframe/index.md b/files/en-us/web/api/vrdisplay/submitframe/index.md
index 8185e4f8f74c3ce..6a351c88ce74a78 100644
--- a/files/en-us/web/api/vrdisplay/submitframe/index.md
+++ b/files/en-us/web/api/vrdisplay/submitframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.submitFrame()
+title: "VRDisplay: submitFrame() method"
+short-title: submitFrame()
slug: Web/API/VRDisplay/submitFrame
page-type: web-api-instance-method
status:
@@ -14,7 +15,7 @@ The **`submitFrame()`** method of the {{domxref("VRDisplay")}} interface capture
> **Note:** This method was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
-The frame should subsequently be rendered using the {{domxref("VRPose")}} and matrices provided by the last call to {{domxref("getFrameData()")}}.
+The frame should subsequently be rendered using the {{domxref("VRPose")}} and matrices provided by the last call to {{domxref("VRDisplay.getFrameData()", "getFrameData()")}}.
## Syntax
@@ -69,7 +70,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -78,7 +79,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -88,7 +89,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -118,5 +119,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md b/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
index 19ed4c720e25b30..ebc74f1dc372cc8 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.canPresent
+title: "VRDisplayCapabilities: canPresent property"
+short-title: canPresent
slug: Web/API/VRDisplayCapabilities/canPresent
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
index 7f4370967954b04..51ff4b6cc3617b1 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasExternalDisplay
+title: "VRDisplayCapabilities: hasExternalDisplay property"
+short-title: hasExternalDisplay
slug: Web/API/VRDisplayCapabilities/hasExternalDisplay
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
index 17ec61b3eaccb8d..603a9be43b2090c 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasOrientation
+title: "VRDisplayCapabilities: hasOrientation property"
+short-title: hasOrientation
slug: Web/API/VRDisplayCapabilities/hasOrientation
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
index 7f09576ae13485a..ec4da601931bcec 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasPosition
+title: "VRDisplayCapabilities: hasPosition property"
+short-title: hasPosition
slug: Web/API/VRDisplayCapabilities/hasPosition
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/index.md b/files/en-us/web/api/vrdisplaycapabilities/index.md
index bf30a15304b0006..88135307318e838 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/index.md
@@ -65,5 +65,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md b/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
index e43845e49ae99bf..bd3c5065851c151 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.maxLayers
+title: "VRDisplayCapabilities: maxLayers property"
+short-title: maxLayers
slug: Web/API/VRDisplayCapabilities/maxLayers
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRDisplayCapabilities.maxLayers
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`maxLayers`** read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a number indicating the maximum number of {{domxref("VRLayerInit")}}s that the VR display can present at once (e.g. the maximum length of the array that {{domxref("Display.requestPresent()")}} can accept.)
+The **`maxLayers`** read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a number indicating the maximum number of {{domxref("VRLayerInit")}}s that the VR display can present at once (e.g. the maximum length of the array that {{domxref("VRDisplay.requestPresent()")}} can accept.)
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/display/index.md b/files/en-us/web/api/vrdisplayevent/display/index.md
index b323fee2b9cc7d7..6895dc463ec632b 100644
--- a/files/en-us/web/api/vrdisplayevent/display/index.md
+++ b/files/en-us/web/api/vrdisplayevent/display/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent.display
+title: "VRDisplayEvent: display property"
+short-title: display
slug: Web/API/VRDisplayEvent/display
page-type: web-api-instance-property
status:
@@ -23,7 +24,7 @@ A {{domxref("VRDisplay")}} object.
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/index.md b/files/en-us/web/api/vrdisplayevent/index.md
index ea2e347dae8207d..e56cf06d6affff4 100644
--- a/files/en-us/web/api/vrdisplayevent/index.md
+++ b/files/en-us/web/api/vrdisplayevent/index.md
@@ -33,7 +33,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -50,5 +50,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/reason/index.md b/files/en-us/web/api/vrdisplayevent/reason/index.md
index 918a3e34813e757..bae208a8b0a1472 100644
--- a/files/en-us/web/api/vrdisplayevent/reason/index.md
+++ b/files/en-us/web/api/vrdisplayevent/reason/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent.reason
+title: "VRDisplayEvent: reason property"
+short-title: reason
slug: Web/API/VRDisplayEvent/reason
page-type: web-api-instance-property
status:
@@ -28,7 +29,7 @@ A string representing the reason why the event was fired. The available reasons
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md b/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
index 19dc800ab802934..c3da54c21d05d5b 100644
--- a/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
+++ b/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent()
+title: "VRDisplayEvent: VRDisplayEvent() constructor"
+short-title: VRDisplayEvent()
slug: Web/API/VRDisplayEvent/VRDisplayEvent
page-type: web-api-constructor
status:
@@ -58,5 +59,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/fieldofview/index.md b/files/en-us/web/api/vreyeparameters/fieldofview/index.md
index da167b320f45a80..f11df39f9e52bee 100644
--- a/files/en-us/web/api/vreyeparameters/fieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/fieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.fieldOfView
+title: "VREyeParameters: fieldOfView property"
+short-title: fieldOfView
slug: Web/API/VREyeParameters/fieldOfView
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/index.md b/files/en-us/web/api/vreyeparameters/index.md
index 3f6da8f7322dbd4..a7cada66d945909 100644
--- a/files/en-us/web/api/vreyeparameters/index.md
+++ b/files/en-us/web/api/vreyeparameters/index.md
@@ -68,5 +68,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md b/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
index ca69d5793749ee3..7d68ac4dfbb187b 100644
--- a/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.maximumFieldOfView
+title: "VREyeParameters: maximumFieldOfView property"
+short-title: maximumFieldOfView
slug: Web/API/VREyeParameters/maximumFieldOfView
page-type: web-api-instance-property
status:
@@ -30,6 +31,5 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
- {{domxref("VRFieldOfView")}}
--
— demos, downloads, and other resources from the Mozilla VR team.
diff --git a/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md b/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
index f58502d5886a036..ac5e5b4cebe5927 100644
--- a/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.minimumFieldOfView
+title: "VREyeParameters: minimumFieldOfView property"
+short-title: minimumFieldOfView
slug: Web/API/VREyeParameters/minimumFieldOfView
page-type: web-api-instance-property
status:
@@ -30,6 +31,5 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
- {{domxref("VRFieldOfView")}}
--
— demos, downloads, and other resources from the Mozilla VR team.
diff --git a/files/en-us/web/api/vreyeparameters/offset/index.md b/files/en-us/web/api/vreyeparameters/offset/index.md
index d1e936eaafecab6..8a6d337fc339814 100644
--- a/files/en-us/web/api/vreyeparameters/offset/index.md
+++ b/files/en-us/web/api/vreyeparameters/offset/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.offset
+title: "VREyeParameters: offset property"
+short-title: offset
slug: Web/API/VREyeParameters/offset
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/renderheight/index.md b/files/en-us/web/api/vreyeparameters/renderheight/index.md
index 6a6f84b7cdd982d..6dca6826d5e8fdd 100644
--- a/files/en-us/web/api/vreyeparameters/renderheight/index.md
+++ b/files/en-us/web/api/vreyeparameters/renderheight/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.renderHeight
+title: "VREyeParameters: renderHeight property"
+short-title: renderHeight
slug: Web/API/VREyeParameters/renderHeight
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/renderwidth/index.md b/files/en-us/web/api/vreyeparameters/renderwidth/index.md
index e9081fd6d4eb85a..93256c6e612685d 100644
--- a/files/en-us/web/api/vreyeparameters/renderwidth/index.md
+++ b/files/en-us/web/api/vreyeparameters/renderwidth/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.renderWidth
+title: "VREyeParameters: renderWidth property"
+short-title: renderWidth
slug: Web/API/VREyeParameters/renderWidth
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/downdegrees/index.md b/files/en-us/web/api/vrfieldofview/downdegrees/index.md
index 094dd2ed7f5a693..63ce1790ad87ff0 100644
--- a/files/en-us/web/api/vrfieldofview/downdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/downdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.downDegrees
+title: "VRFieldOfView: downDegrees property"
+short-title: downDegrees
slug: Web/API/VRFieldOfView/downDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/index.md b/files/en-us/web/api/vrfieldofview/index.md
index 77c6a34cb679c5d..6b6df393ddbb181 100644
--- a/files/en-us/web/api/vrfieldofview/index.md
+++ b/files/en-us/web/api/vrfieldofview/index.md
@@ -90,5 +90,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/leftdegrees/index.md b/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
index db2fb9597aff133..b9d6b3574295c94 100644
--- a/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.leftDegrees
+title: "VRFieldOfView: leftDegrees property"
+short-title: leftDegrees
slug: Web/API/VRFieldOfView/leftDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/rightdegrees/index.md b/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
index 52996779591fc2e..234454ee8c392a4 100644
--- a/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.rightDegrees
+title: "VRFieldOfView: rightDegrees property"
+short-title: rightDegrees
slug: Web/API/VRFieldOfView/rightDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/updegrees/index.md b/files/en-us/web/api/vrfieldofview/updegrees/index.md
index bb4a16048ec401c..c72ea9cc2d7d820 100644
--- a/files/en-us/web/api/vrfieldofview/updegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/updegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.upDegrees
+title: "VRFieldOfView: upDegrees property"
+short-title: upDegrees
slug: Web/API/VRFieldOfView/upDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/index.md b/files/en-us/web/api/vrframedata/index.md
index 8215c09c97ff735..76c3e189e6c0f42 100644
--- a/files/en-us/web/api/vrframedata/index.md
+++ b/files/en-us/web/api/vrframedata/index.md
@@ -50,5 +50,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md b/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
index b268fa1ad42ef88..6b34a8062f2c668 100644
--- a/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.leftProjectionMatrix
+title: "VRFrameData: leftProjectionMatrix property"
+short-title: leftProjectionMatrix
slug: Web/API/VRFrameData/leftProjectionMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/leftviewmatrix/index.md b/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
index dbd737c5db4a6ce..ab6510a81d23788 100644
--- a/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.leftViewMatrix
+title: "VRFrameData: leftViewMatrix property"
+short-title: leftViewMatrix
slug: Web/API/VRFrameData/leftViewMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/pose/index.md b/files/en-us/web/api/vrframedata/pose/index.md
index c069fe980aadb56..8b077565bb9cb6e 100644
--- a/files/en-us/web/api/vrframedata/pose/index.md
+++ b/files/en-us/web/api/vrframedata/pose/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.pose
+title: "VRFrameData: pose property"
+short-title: pose
slug: Web/API/VRFrameData/pose
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md b/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
index 8bec17b4579f5f4..bd4c2ace6fb0375 100644
--- a/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.rightProjectionMatrix
+title: "VRFrameData: rightProjectionMatrix property"
+short-title: rightProjectionMatrix
slug: Web/API/VRFrameData/rightProjectionMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/rightviewmatrix/index.md b/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
index 36df11360da02c1..da903ff8e44ebd0 100644
--- a/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.rightViewMatrix
+title: "VRFrameData: rightViewMatrix property"
+short-title: rightViewMatrix
slug: Web/API/VRFrameData/rightViewMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/timestamp/index.md b/files/en-us/web/api/vrframedata/timestamp/index.md
index a8e549417a700c3..0d1571de9c5bb2b 100644
--- a/files/en-us/web/api/vrframedata/timestamp/index.md
+++ b/files/en-us/web/api/vrframedata/timestamp/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.timestamp
+title: "VRFrameData: timestamp property"
+short-title: timestamp
slug: Web/API/VRFrameData/timestamp
page-type: web-api-instance-property
status:
@@ -70,5 +71,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/vrframedata/index.md b/files/en-us/web/api/vrframedata/vrframedata/index.md
index 0c8e583a8a98263..3c30c2b3f6e3998 100644
--- a/files/en-us/web/api/vrframedata/vrframedata/index.md
+++ b/files/en-us/web/api/vrframedata/vrframedata/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData()
+title: "VRFrameData: VRFrameData() constructor"
+short-title: VRFrameData()
slug: Web/API/VRFrameData/VRFrameData
page-type: web-api-constructor
status:
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/index.md b/files/en-us/web/api/vrlayerinit/index.md
index 7ff41f684d8e8b9..bb0889b5fc9571d 100644
--- a/files/en-us/web/api/vrlayerinit/index.md
+++ b/files/en-us/web/api/vrlayerinit/index.md
@@ -55,10 +55,10 @@ if (navigator.getVRDisplays) {
{{domxref("VRLayerInit")}} objects look something like this:
-```
+```js
{
- leftBounds : [ /* … */ ],
- rightBounds: [ /* … */ ],
+ leftBounds : [/* … */],
+ rightBounds: [/* … */],
source: canvasReference
}
```
@@ -73,5 +73,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/leftbounds/index.md b/files/en-us/web/api/vrlayerinit/leftbounds/index.md
index 6ceae77d77da6f7..dc3dcb818e4c916 100644
--- a/files/en-us/web/api/vrlayerinit/leftbounds/index.md
+++ b/files/en-us/web/api/vrlayerinit/leftbounds/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.leftBounds
+title: "VRLayerInit: leftBounds property"
+short-title: leftBounds
slug: Web/API/VRLayerInit/leftBounds
page-type: web-api-instance-property
status:
@@ -35,5 +36,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/rightbounds/index.md b/files/en-us/web/api/vrlayerinit/rightbounds/index.md
index 4757920c1e2e896..d514419f9f2c5ff 100644
--- a/files/en-us/web/api/vrlayerinit/rightbounds/index.md
+++ b/files/en-us/web/api/vrlayerinit/rightbounds/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.rightBounds
+title: "VRLayerInit: rightBounds property"
+short-title: rightBounds
slug: Web/API/VRLayerInit/rightBounds
page-type: web-api-instance-property
status:
@@ -35,5 +36,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/source/index.md b/files/en-us/web/api/vrlayerinit/source/index.md
index 3520dca026abb8d..64de554ebdd8523 100644
--- a/files/en-us/web/api/vrlayerinit/source/index.md
+++ b/files/en-us/web/api/vrlayerinit/source/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.source
+title: "VRLayerInit: source property"
+short-title: source
slug: Web/API/VRLayerInit/source
page-type: web-api-instance-property
status:
@@ -28,5 +29,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/angularacceleration/index.md b/files/en-us/web/api/vrpose/angularacceleration/index.md
index ff22618c75451bc..c126d8d1349accf 100644
--- a/files/en-us/web/api/vrpose/angularacceleration/index.md
+++ b/files/en-us/web/api/vrpose/angularacceleration/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.angularAcceleration
+title: "VRPose: angularAcceleration property"
+short-title: angularAcceleration
slug: Web/API/VRPose/angularAcceleration
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.angularAcceleration
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`angularAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular acceleration vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+The **`angularAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular acceleration vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/angularvelocity/index.md b/files/en-us/web/api/vrpose/angularvelocity/index.md
index 65f50f9fa98b0a2..34274a846ca5acb 100644
--- a/files/en-us/web/api/vrpose/angularvelocity/index.md
+++ b/files/en-us/web/api/vrpose/angularvelocity/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.angularVelocity
+title: "VRPose: angularVelocity property"
+short-title: angularVelocity
slug: Web/API/VRPose/angularVelocity
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.angularVelocity
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`angularVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular velocity vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.
+The **`angularVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular velocity vector of the {{domxref("VRDisplay")}} at the current timestamp, in radians per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/index.md b/files/en-us/web/api/vrpose/index.md
index 5c505b79ef8748f..22488915b436829 100644
--- a/files/en-us/web/api/vrpose/index.md
+++ b/files/en-us/web/api/vrpose/index.md
@@ -47,5 +47,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/linearacceleration/index.md b/files/en-us/web/api/vrpose/linearacceleration/index.md
index 56f0d6dcc3a0a92..d0083455e2a4c30 100644
--- a/files/en-us/web/api/vrpose/linearacceleration/index.md
+++ b/files/en-us/web/api/vrpose/linearacceleration/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.linearAcceleration
+title: "VRPose: linearAcceleration property"
+short-title: linearAcceleration
slug: Web/API/VRPose/linearAcceleration
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.linearAcceleration
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`linearAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear acceleration vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+The **`linearAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear acceleration vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/linearvelocity/index.md b/files/en-us/web/api/vrpose/linearvelocity/index.md
index ca64e77472d3b12..f94dcf0c76e5f97 100644
--- a/files/en-us/web/api/vrpose/linearvelocity/index.md
+++ b/files/en-us/web/api/vrpose/linearvelocity/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.linearVelocity
+title: "VRPose: linearVelocity property"
+short-title: linearVelocity
slug: Web/API/VRPose/linearVelocity
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.linearVelocity
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`linearVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear velocity vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.
+The **`linearVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear velocity vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/orientation/index.md b/files/en-us/web/api/vrpose/orientation/index.md
index a923fdfc4f55e00..fa6a22fae141d37 100644
--- a/files/en-us/web/api/vrpose/orientation/index.md
+++ b/files/en-us/web/api/vrpose/orientation/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.orientation
+title: "VRPose: orientation property"
+short-title: orientation
slug: Web/API/VRPose/orientation
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.orientation
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.
+The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current timestamp, as a quarternion value.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/position/index.md b/files/en-us/web/api/vrpose/position/index.md
index e547adfe0635b05..a05d72765da28bb 100644
--- a/files/en-us/web/api/vrpose/position/index.md
+++ b/files/en-us/web/api/vrpose/position/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.position
+title: "VRPose: position property"
+short-title: position
slug: Web/API/VRPose/position
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.position
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`position`** read-only property of the {{domxref("VRPose")}} interface returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector.
+The **`position`** read-only property of the {{domxref("VRPose")}} interface returns the position of the {{domxref("VRDisplay")}} at the current timestamp as a 3D vector.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -46,5 +47,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/index.md b/files/en-us/web/api/vrstageparameters/index.md
index 1c27a5b57fbaf5d..07a1e2bfec20406 100644
--- a/files/en-us/web/api/vrstageparameters/index.md
+++ b/files/en-us/web/api/vrstageparameters/index.md
@@ -61,5 +61,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md b/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
index 1eb892c7abdd63e..63bf1c2551844b7 100644
--- a/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
+++ b/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sittingToStandingTransform
+title: "VRStageParameters: sittingToStandingTransform property"
+short-title: sittingToStandingTransform
slug: Web/API/VRStageParameters/sittingToStandingTransform
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sizex/index.md b/files/en-us/web/api/vrstageparameters/sizex/index.md
index f74cef9b4c3d614..5ad7c91d2ea6243 100644
--- a/files/en-us/web/api/vrstageparameters/sizex/index.md
+++ b/files/en-us/web/api/vrstageparameters/sizex/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sizeX
+title: "VRStageParameters: sizeX property"
+short-title: sizeX
slug: Web/API/VRStageParameters/sizeX
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sizey/index.md b/files/en-us/web/api/vrstageparameters/sizey/index.md
index 207028f36b27372..5ae9dac7b6aa6fb 100644
--- a/files/en-us/web/api/vrstageparameters/sizey/index.md
+++ b/files/en-us/web/api/vrstageparameters/sizey/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sizeY
+title: "VRStageParameters: sizeY property"
+short-title: sizeY
slug: Web/API/VRStageParameters/sizeY
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vttcue/align/index.md b/files/en-us/web/api/vttcue/align/index.md
index b2d3151f781c75a..1a8913a76311828 100644
--- a/files/en-us/web/api/vttcue/align/index.md
+++ b/files/en-us/web/api/vttcue/align/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.align
+title: "VTTCue: align property"
+short-title: align
slug: Web/API/VTTCue/align
page-type: web-api-instance-property
browser-compat: api.VTTCue.align
diff --git a/files/en-us/web/api/vttcue/getcueashtml/index.md b/files/en-us/web/api/vttcue/getcueashtml/index.md
index ff7f4179a95aeca..05ab2bdf34d27f6 100644
--- a/files/en-us/web/api/vttcue/getcueashtml/index.md
+++ b/files/en-us/web/api/vttcue/getcueashtml/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.getCueAsHTML()
+title: "VTTCue: getCueAsHTML() method"
+short-title: getCueAsHTML()
slug: Web/API/VTTCue/getCueAsHTML
page-type: web-api-instance-method
browser-compat: api.VTTCue.getCueAsHTML
diff --git a/files/en-us/web/api/vttcue/line/index.md b/files/en-us/web/api/vttcue/line/index.md
index f22bfbd78138c69..974fc59f6beb168 100644
--- a/files/en-us/web/api/vttcue/line/index.md
+++ b/files/en-us/web/api/vttcue/line/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.line
+title: "VTTCue: line property"
+short-title: line
slug: Web/API/VTTCue/line
page-type: web-api-instance-property
browser-compat: api.VTTCue.line
diff --git a/files/en-us/web/api/vttcue/linealign/index.md b/files/en-us/web/api/vttcue/linealign/index.md
index dda0662240dd794..e9da48bd8bdd134 100644
--- a/files/en-us/web/api/vttcue/linealign/index.md
+++ b/files/en-us/web/api/vttcue/linealign/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.lineAlign
+title: "VTTCue: lineAlign property"
+short-title: lineAlign
slug: Web/API/VTTCue/lineAlign
page-type: web-api-instance-property
browser-compat: api.VTTCue.lineAlign
diff --git a/files/en-us/web/api/vttcue/position/index.md b/files/en-us/web/api/vttcue/position/index.md
index 9e80b8cc267052f..ba681bcb0217d07 100644
--- a/files/en-us/web/api/vttcue/position/index.md
+++ b/files/en-us/web/api/vttcue/position/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.position
+title: "VTTCue: position property"
+short-title: position
slug: Web/API/VTTCue/position
page-type: web-api-instance-property
browser-compat: api.VTTCue.position
diff --git a/files/en-us/web/api/vttcue/positionalign/index.md b/files/en-us/web/api/vttcue/positionalign/index.md
index 6bbefeb986876f7..c53a01cec3cf1b2 100644
--- a/files/en-us/web/api/vttcue/positionalign/index.md
+++ b/files/en-us/web/api/vttcue/positionalign/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.positionAlign
+title: "VTTCue: positionAlign property"
+short-title: positionAlign
slug: Web/API/VTTCue/positionAlign
page-type: web-api-instance-property
browser-compat: api.VTTCue.positionAlign
diff --git a/files/en-us/web/api/vttcue/region/index.md b/files/en-us/web/api/vttcue/region/index.md
index ae3dbcbb8ac80f0..99e95ad82f8d899 100644
--- a/files/en-us/web/api/vttcue/region/index.md
+++ b/files/en-us/web/api/vttcue/region/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.region
+title: "VTTCue: region property"
+short-title: region
slug: Web/API/VTTCue/region
page-type: web-api-instance-property
browser-compat: api.VTTCue.region
diff --git a/files/en-us/web/api/vttcue/size/index.md b/files/en-us/web/api/vttcue/size/index.md
index 732ed0df460813f..e37d9b1a97c5119 100644
--- a/files/en-us/web/api/vttcue/size/index.md
+++ b/files/en-us/web/api/vttcue/size/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.size
+title: "VTTCue: size property"
+short-title: size
slug: Web/API/VTTCue/size
page-type: web-api-instance-property
browser-compat: api.VTTCue.size
diff --git a/files/en-us/web/api/vttcue/snaptolines/index.md b/files/en-us/web/api/vttcue/snaptolines/index.md
index 4909f51d5764330..5c10931f8176f54 100644
--- a/files/en-us/web/api/vttcue/snaptolines/index.md
+++ b/files/en-us/web/api/vttcue/snaptolines/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.snapToLines
+title: "VTTCue: snapToLines property"
+short-title: snapToLines
slug: Web/API/VTTCue/snapToLines
page-type: web-api-instance-property
browser-compat: api.VTTCue.snapToLines
diff --git a/files/en-us/web/api/vttcue/text/index.md b/files/en-us/web/api/vttcue/text/index.md
index bdc9257c2888c2f..801a1443a3198de 100644
--- a/files/en-us/web/api/vttcue/text/index.md
+++ b/files/en-us/web/api/vttcue/text/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.text
+title: "VTTCue: text property"
+short-title: text
slug: Web/API/VTTCue/text
page-type: web-api-instance-property
browser-compat: api.VTTCue.text
diff --git a/files/en-us/web/api/vttcue/vertical/index.md b/files/en-us/web/api/vttcue/vertical/index.md
index 3fc97f6589372a8..bd883cdec9154dd 100644
--- a/files/en-us/web/api/vttcue/vertical/index.md
+++ b/files/en-us/web/api/vttcue/vertical/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.vertical
+title: "VTTCue: vertical property"
+short-title: vertical
slug: Web/API/VTTCue/vertical
page-type: web-api-instance-property
browser-compat: api.VTTCue.vertical
diff --git a/files/en-us/web/api/vttcue/vttcue/index.md b/files/en-us/web/api/vttcue/vttcue/index.md
index d32c91118703829..ef83e8f231003a0 100644
--- a/files/en-us/web/api/vttcue/vttcue/index.md
+++ b/files/en-us/web/api/vttcue/vttcue/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue()
+title: "VTTCue: VTTCue() constructor"
+short-title: VTTCue()
slug: Web/API/VTTCue/VTTCue
page-type: web-api-constructor
browser-compat: api.VTTCue.VTTCue
diff --git a/files/en-us/web/api/wakelock/index.md b/files/en-us/web/api/wakelock/index.md
index d9abbf1406c8f4f..c66ff36565edda3 100644
--- a/files/en-us/web/api/wakelock/index.md
+++ b/files/en-us/web/api/wakelock/index.md
@@ -7,9 +7,9 @@ browser-compat: api.WakeLock
{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The **`WakeLock`** interface of the [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) prevents device screens from dimming or locking when an application needs to keep running.
+The **`WakeLock`** interface of the {{domxref("Screen Wake Lock API", "", "", "nocode")}} prevents device screens from dimming or locking when an application needs to keep running.
-The system wake lock is exposed through the global {{domxref('Navigator.wakeLock')}} property.
+The system wake lock is exposed through the {{domxref('Navigator.wakeLock')}} property.
## Instance methods
@@ -36,3 +36,7 @@ try {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelock/request/index.md b/files/en-us/web/api/wakelock/request/index.md
index 17798794bd6d2c6..f70cee32339850c 100644
--- a/files/en-us/web/api/wakelock/request/index.md
+++ b/files/en-us/web/api/wakelock/request/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLock.request()
+title: "WakeLock: request() method"
+short-title: request()
slug: Web/API/WakeLock/request
page-type: web-api-instance-method
browser-compat: api.WakeLock.request
@@ -9,8 +10,7 @@ browser-compat: api.WakeLock.request
The **`request()`** method of the
{{domxref("WakeLock")}} interface returns a {{jsxref("Promise")}} that resolves with a
-{{domxref("WakeLockSentinel")}} object, which allows control over screen dimming and
-locking.
+{{domxref("WakeLockSentinel")}} object, which allows control over screen dimming and locking.
## Syntax
@@ -20,13 +20,14 @@ request(type)
### Parameters
-- `type`
+- `type` {{optional_inline}}
- - : Options are as follows:
+ - : A string specifying the screen wake lock type, from among the following enumerated types:
- - `'screen'`
- - : Requests a screen wake lock. Prevents devices from
- dimming or locking the screen.
+ - `screen`
+ - : Prevents the screen from turning off. Only visible documents can acquire the screen wake lock.
+
+If no `type` parameter is explicitly specified, the `request()` method defaults to using the `screen` type.
### Return value
@@ -34,13 +35,13 @@ A {{jsxref("Promise")}} that resolves with a {{domxref("WakeLockSentinel")}} obj
### Exceptions
-- `NotAllowedError`
+- `NotAllowedError` {{domxref("DOMException")}}
- : Thrown when wake lock is not available, which can happen because:
- Use of this feature is blocked by a [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
- The document is not fully active.
- - The document is hidden.
+ - The document's visibility state is `hidden`.
- The {{Glossary("User Agent")}} could not acquire platform's wake lock.
## Examples
@@ -73,5 +74,4 @@ requestWakeLock();
## See also
-- {{DOMxRef("WakeLock")}}
-- {{DOMxRef("Navigator.wakeLock")}}
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/index.md b/files/en-us/web/api/wakelocksentinel/index.md
index e06e5093b633e9a..e499c425c306173 100644
--- a/files/en-us/web/api/wakelocksentinel/index.md
+++ b/files/en-us/web/api/wakelocksentinel/index.md
@@ -7,7 +7,7 @@ browser-compat: api.WakeLockSentinel
{{securecontext_header}}{{APIRef("Screen Wake Lock API")}}
-The **`WakeLockSentinel`** interface of the [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) provides a handle to the underlying platform wake lock and can be manually released and reacquired. An {{jsxref('Object')}} representing the wake lock is returned via the {{domxref('WakeLock.request()','navigator.wakelock.request()')}} method.
+The **`WakeLockSentinel`** interface of the {{domxref("Screen Wake Lock API", "", "", "nocode")}} provides a handle to the underlying platform wake lock and can be manually released and reacquired. An {{jsxref('Object')}} representing the wake lock is returned via the {{domxref('WakeLock.request()','navigator.wakeLock.request()')}} method.
An acquired `WakeLockSentinel` can be released manually via the {{domxref('WakeLockSentinel.release','release()')}} method, or automatically via the platform wake lock. This can happen if the document becomes inactive or looses visibility, if the device is low on power or the user turns on a power save mode. Releasing all `WakeLockSentinel` instances of a given wake lock type will cause the underlying platform wake lock to be released.
@@ -15,7 +15,7 @@ An acquired `WakeLockSentinel` can be released manually via the {{domxref('WakeL
## Instance properties
-_This interface provides the following properties._
+_Also inherits properties from its parent interface, {{DOMxRef("EventTarget")}}._
- {{domxref("WakeLockSentinel.released", "released")}} {{ReadOnlyInline}}
- : Returns a boolean indicating whether the `WakeLockSentinel` has been released.
@@ -24,18 +24,20 @@ _This interface provides the following properties._
- : Returns a string representation of the currently acquired `WakeLockSentinel` type.
Return values are:
- - `'screen'`: A screen wake lock. Prevents devices from dimming or locking the screen.
-
-## Events
-
-- {{domxref("WakeLockSentinel.release_event", "release")}}
- - : Fired when the {{domxref('WakeLockSentinel.release','release()')}} method is called or the wake lock is released by the user agent.
+ - `screen`: A screen wake lock. Prevents devices from dimming or locking the screen.
## Instance methods
+_Also inherits methods from its parent interface, {{DOMxRef("EventTarget")}}._
+
- {{domxref('WakeLockSentinel.release()', 'release()')}}
- : Releases the `WakeLockSentinel`, returning a {{jsxref("Promise")}} that is resolved once the sentinel has been successfully released.
+## Events
+
+- {{domxref("WakeLockSentinel.release_event", "release")}}
+ - : Fired when the {{domxref('WakeLockSentinel.release','release()')}} method is called or the wake lock is released by the user agent.
+
## Examples
In this example we create an asynchronous function which requests a `WakeLockSentinel`. Once acquired we listen for the `release` event which can be used to give appropriate UI feedback. The sentinel can be acquired or released via appropriate interactions.
@@ -78,3 +80,7 @@ wakeLockOffButton.addEventListener("click", () => {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/release/index.md b/files/en-us/web/api/wakelocksentinel/release/index.md
index 621b61aa0d77ea9..e3add30b5c44782 100644
--- a/files/en-us/web/api/wakelocksentinel/release/index.md
+++ b/files/en-us/web/api/wakelocksentinel/release/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLockSentinel.release()
+title: "WakeLockSentinel: release() method"
+short-title: release()
slug: Web/API/WakeLockSentinel/release
page-type: web-api-instance-method
browser-compat: api.WakeLockSentinel.release
@@ -24,7 +25,7 @@ None.
### Return value
-Returns a {{jsxref("Promise")}} that resolves with `undefined`
+Returns a {{jsxref("Promise")}} that resolves with `undefined`.
### Exceptions
@@ -52,5 +53,4 @@ wakeLockOffButton.addEventListener("click", () => {
## See also
-- {{DOMxRef("WakeLockSentinel")}}
-- {{DOMxRef("WakeLock.request", "navigator.wakeLock.request()")}}
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/release_event/index.md b/files/en-us/web/api/wakelocksentinel/release_event/index.md
index 5f90b832149a0bb..fb51fc39b1b8d0f 100644
--- a/files/en-us/web/api/wakelocksentinel/release_event/index.md
+++ b/files/en-us/web/api/wakelocksentinel/release_event/index.md
@@ -1,5 +1,6 @@
---
title: "WakeLockSentinel: release event"
+short-title: release
slug: Web/API/WakeLockSentinel/release_event
page-type: web-api-event
browser-compat: api.WakeLockSentinel.release_event
@@ -16,7 +17,7 @@ power save mode.
## Syntax
-Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event-handler property.
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("release", (event) => {});
@@ -46,3 +47,7 @@ wakeLock.addEventListener("release", () => {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/released/index.md b/files/en-us/web/api/wakelocksentinel/released/index.md
index 9aecc7bb4724cac..4729171661a1e90 100644
--- a/files/en-us/web/api/wakelocksentinel/released/index.md
+++ b/files/en-us/web/api/wakelocksentinel/released/index.md
@@ -1,23 +1,18 @@
---
-title: WakeLockSentinel.released
+title: "WakeLockSentinel: released property"
+short-title: released
slug: Web/API/WakeLockSentinel/released
page-type: web-api-instance-property
browser-compat: api.WakeLockSentinel.released
---
-{{APIRef("Screen Wake Lock API")}}
+{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The read-only **`released`** property of the
+The **`released`** read-only property of the
{{domxref("WakeLockSentinel")}} interface returns a boolean that indicates whether
a {{domxref("WakeLockSentinel")}} has been released yet.
-## Syntax
-
-```js-nolint
-const released = sentinel.released
-```
-
-### Value
+## Value
A boolean value, that is `false` until the
{{domxref("WakeLockSentinel")}} has been released (either through a call to
@@ -48,3 +43,7 @@ await sentinel.release();
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/type/index.md b/files/en-us/web/api/wakelocksentinel/type/index.md
index 1e4c3d90432dac3..a568ce371f8071d 100644
--- a/files/en-us/web/api/wakelocksentinel/type/index.md
+++ b/files/en-us/web/api/wakelocksentinel/type/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLockSentinel.type
+title: "WakeLockSentinel: type property"
+short-title: type
slug: Web/API/WakeLockSentinel/type
page-type: web-api-instance-property
browser-compat: api.WakeLockSentinel.type
@@ -7,14 +8,14 @@ browser-compat: api.WakeLockSentinel.type
{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The read-only **`type`** property of the
+The **`type`** read-only property of the
{{domxref("WakeLockSentinel")}} interface returns a string
representation of the currently acquired {{domxref("WakeLockSentinel")}} type.
-### Value
+## Value
A string representation of the currently acquired wake lock type.
-The type 'screen'` is a screen wake lock. It prevents devices from dimming or locking the screen.
+The type `screen` is a screen wake lock. It prevents devices from dimming or locking the screen.
## Examples
@@ -37,3 +38,7 @@ requestWakeLock();
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/waveshapernode/curve/index.md b/files/en-us/web/api/waveshapernode/curve/index.md
index 6f143016d7435d4..e9423b687ac20d8 100644
--- a/files/en-us/web/api/waveshapernode/curve/index.md
+++ b/files/en-us/web/api/waveshapernode/curve/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode.curve
+title: "WaveShaperNode: curve property"
+short-title: curve
slug: Web/API/WaveShaperNode/curve
page-type: web-api-instance-property
browser-compat: api.WaveShaperNode.curve
@@ -21,7 +22,7 @@ A {{jsxref("Float32Array")}}.
## Examples
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/index.md b/files/en-us/web/api/waveshapernode/index.md
index f509db7c79968eb..ef2bbc5ee34c301 100644
--- a/files/en-us/web/api/waveshapernode/index.md
+++ b/files/en-us/web/api/waveshapernode/index.md
@@ -60,7 +60,7 @@ _No specific method; inherits methods from its parent, {{domxref("AudioNode")}}_
## Example
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/oversample/index.md b/files/en-us/web/api/waveshapernode/oversample/index.md
index 536c20c5a492e55..367c8860f45295d 100644
--- a/files/en-us/web/api/waveshapernode/oversample/index.md
+++ b/files/en-us/web/api/waveshapernode/oversample/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode.oversample
+title: "WaveShaperNode: oversample property"
+short-title: oversample
slug: Web/API/WaveShaperNode/oversample
page-type: web-api-instance-property
browser-compat: api.WaveShaperNode.oversample
@@ -25,7 +26,7 @@ One of `'none'`, `'2x'`, or `'4x'`.
## Examples
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/waveshapernode/index.md b/files/en-us/web/api/waveshapernode/waveshapernode/index.md
index 32ca1925085b662..c9e48544d2e8c23 100644
--- a/files/en-us/web/api/waveshapernode/waveshapernode/index.md
+++ b/files/en-us/web/api/waveshapernode/waveshapernode/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode()
+title: "WaveShaperNode: WaveShaperNode() constructor"
+short-title: WaveShaperNode()
slug: Web/API/WaveShaperNode/WaveShaperNode
page-type: web-api-constructor
browser-compat: api.WaveShaperNode.WaveShaperNode
diff --git a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
index ccfcf0265e94dcf..270d0d9d0e02c70 100644
--- a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
+++ b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
@@ -2,10 +2,9 @@
title: Keyframe Formats
slug: Web/API/Web_Animations_API/Keyframe_Formats
page-type: guide
-browser-compat: api.Element.animate
---
-{{APIRef("Web Animations API")}}
+{{DefaultAPISidebar("Web Animations")}}
{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}, and {{domxref("KeyframeEffect.setKeyframes()")}} all accept objects formatted to represent a set of keyframes. There are several options to this format, which are explained below.
@@ -29,7 +28,7 @@ There are two different ways to format keyframes:
color: "#000",
},
],
- 2000
+ 2000,
);
```
@@ -38,7 +37,7 @@ There are two different ways to format keyframes:
```js
element.animate(
[{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
- 2000
+ 2000,
);
```
@@ -55,7 +54,7 @@ There are two different ways to format keyframes:
{ opacity: 0.1, easing: "ease-in" },
{ opacity: 0 },
],
- 2000
+ 2000,
);
```
@@ -69,7 +68,7 @@ There are two different ways to format keyframes:
opacity: [0, 1], // [ from, to ]
color: ["#fff", "#000"], // [ from, to ]
},
- 2000
+ 2000,
);
```
@@ -81,7 +80,7 @@ There are two different ways to format keyframes:
opacity: [0, 1], // offset: 0, 1
backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
},
- 2000
+ 2000,
);
```
@@ -94,7 +93,7 @@ There are two different ways to format keyframes:
offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
easing: ["ease-in", "ease-out"],
},
- 2000
+ 2000,
);
```
@@ -114,7 +113,7 @@ We have only specified the end state of the animation, and the beginning state i
## Attributes
-Keyframes may specify property-value pairs for any of the {{cssxref("CSS_animated_properties", "animatable CSS properties")}}. The property names are specified using camel-case so for example {{cssxref("background-color")}} becomes `backgroundColor` and {{cssxref("background-position-x")}} becomes `backgroundPositionX`. Shorthand values such as {{cssxref("margin")}} are also permitted.
+Keyframes may specify property-value pairs for any of the {{cssxref("CSS_animated_properties", "animatable CSS properties")}}. The property names are specified using {{Glossary("camel_case", "camel case")}} so for example {{cssxref("background-color")}} becomes `backgroundColor` and {{cssxref("background-position-x")}} becomes `backgroundPositionX`. Shorthand values such as {{cssxref("margin")}} are also permitted.
Two exceptional CSS properties are:
@@ -126,18 +125,10 @@ The following special attributes may also be specified:
- offset
- : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. If this value is `null` or missing, the keyframe will be evenly spaced between adjacent keyframes.
- easing
- - : The [timing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
+ - : The [easing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
- composite
- : The {{domxref("KeyframeEffect.composite")}} operation used to combine the values specified in this keyframe with the underlying value. This will be `auto` if the composite operation specified on the effect is being used.
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
## See also
- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
index 9860f56678a8aac..59d16b8a14594bb 100644
--- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -10,7 +10,7 @@ The Web Animations API lets us construct animations and control their playback w
## Meet the Web Animations API
-The [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) and [CSS Transitions](/en-US/docs/Web/CSS/CSS_Transitions), and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks, coercion, or {{domxref("Window.requestAnimationFrame()")}}.
+The [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) and [CSS Transitions](/en-US/docs/Web/CSS/CSS_transitions), and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks, coercion, or {{domxref("Window.requestAnimationFrame()")}}.
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques such as writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job. Let's see what it can do!
@@ -112,7 +112,7 @@ document.getElementById("alice").animate(
{
duration: 3000,
iterations: Infinity,
- }
+ },
);
```
@@ -125,7 +125,7 @@ document.getElementById("alice").animate(
{ color: "#431236", offset: 0.3 },
{ transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
],
- 3000
+ 3000,
);
```
@@ -150,7 +150,7 @@ const nommingCake = document
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.getComputedTiming().duration / 2,
- }
+ },
);
```
@@ -233,6 +233,35 @@ document.addEventListener("touchstart", goFaster);
The background elements also have `playbackRate`s that are impacted when you click or tap. What happens when you make Alice and the Red Queen run twice as fast? What happens when you let them slow down?
+## Persisting animation styles
+
+When animating elements, a common use case is to persist the final state of the animation, after the animation has finished. One method sometimes used for this is to set the animation's [fill mode](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to `forwards`. However, it is not recommended to use fill modes to persist the effect of an animation indefinitely, for two reasons:
+
+- The browser has to maintain the state of the animation while it is still active, so the animation continues to consume resources even though it is no longer animating. Note that this is somewhat alleviated by the browser [automatically removing filling animations](#automatically_removing_filling_animations).
+- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed.
+
+A better approach is to use the {{domxref("Animation.commitStyles()")}} method. This writes the computed values of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute, after which the element can be restyled normally.
+
+## Automatically removing filling animations
+
+It is possible to trigger a large number of animations on the same element. If they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. For this reason, browsers automatically remove filling animations after they are replaced by newer animations, unless the developer explicitly specifies to keep them.
+
+Animations are removed when all of the following are true:
+
+- The animation is filling (its `fill` is `forwards` if it is playing forwards, `backwards` if it is playing backwards, or `both`).
+- The animation is finished. (Note that because of the `fill` it will still be in effect.)
+- The animation's timeline is monotonically increasing. (This is always true for {{domxref("DocumentTimeline")}}; other timelines such as {{cssxref("scroll-timeline")}} can run backwards.)
+- The animation is not being controlled by declarative markup such as CSS.
+- Every styling effect of the animation's {{domxref("AnimationEffect")}} is being overridden by another animation that also satisfies all the conditions above. (Typically, when two animations would set the same style property of the same element, the one created last overrides the other.)
+
+The first four conditions ensure that, without intervention by JavaScript code, the animation's effect will never change or end. The last condition ensures that the animation will never actually affect the style of any element: it has been entirely replaced.
+
+When the animation is automatically removed, the animation's {{domxref("animation/remove_event", "remove")}} event fires.
+
+To prevent the browser from automatically removing animations, call the animation's {{domxref("Animation.persist", "persist()")}} method.
+
+The animation's {{domxref("animation.replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise.
+
## Getting information out of animations
Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That's impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("Document.getAnimations")}} method to loop over each animation on the page and halve their `playbackRate`s, like so:
@@ -267,7 +296,7 @@ const aliceChange = document
duration: 8000,
easing: "ease-in-out",
fill: "both",
- }
+ },
);
```
diff --git a/files/en-us/web/api/web_audio_api/advanced_techniques/index.md b/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
index d02bfd8e02edff0..a16efd82835b14a 100644
--- a/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
+++ b/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
@@ -8,7 +8,7 @@ page-type: guide
In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We will introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and looking for an introduction to their application with the Web Audio API, you've come to the right place.
-> **Note:** You can find the source code for the demo below on GitHub in the [step-sequencer](https://github.com/mdn/webaudio-examples/tree/master/step-sequencer) subdirectory of the MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) repo. You can also see the [live demo](https://mdn.github.io/webaudio-examples/step-sequencer/).
+> **Note:** You can find the source code for the demo below on GitHub in the [step-sequencer](https://github.com/mdn/webaudio-examples/tree/main/step-sequencer) subdirectory of the MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) repo. You can also see the [live demo](https://mdn.github.io/webaudio-examples/step-sequencer/).
## Demo
@@ -152,7 +152,7 @@ attackControl.addEventListener(
(ev) => {
attackTime = parseInt(ev.target.value, 10);
},
- false
+ false,
);
let releaseTime = 0.5;
@@ -162,7 +162,7 @@ releaseControl.addEventListener(
(ev) => {
releaseTime = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -271,7 +271,7 @@ hzControl.addEventListener(
(ev) => {
pulseHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
let lfoHz = 30;
@@ -281,7 +281,7 @@ lfoControl.addEventListener(
(ev) => {
lfoHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -418,7 +418,7 @@ durControl.addEventListener(
(ev) => {
noiseDuration = parseFloat(ev.target.value);
},
- false
+ false,
);
let bandHz = 1000;
@@ -428,7 +428,7 @@ bandControl.addEventListener(
(ev) => {
bandHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -553,7 +553,7 @@ rateControl.addEventListener(
(ev) => {
playbackRate = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -581,7 +581,7 @@ A common problem with digital audio applications is getting the sounds to play i
We could schedule our voices to play within a `for` loop; however, the biggest problem with this is updating while it is playing, and we've already implemented UI controls to do so. Also, it would be really nice to consider an instrument-wide BPM control. The best way to get our voices to play on the beat is to create a scheduling system, whereby we look ahead at when the notes will play and push them into a queue. We can start them at a precise time with the `currentTime` property and also consider any changes.
-> **Note:** This is a much stripped down version of [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/audio-scheduling/) article, which goes into this method with much more detail. There's no point repeating it all here, but we highly recommend reading this article and using this method. Much of the code here is taken from his [metronome example](https://github.com/cwilso/metronome/blob/master/js/metronome.js), which he references in the article.
+> **Note:** This is a much stripped down version of [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/articles/audio-scheduling) article, which goes into this method with much more detail. There's no point repeating it all here, but we highly recommend reading this article and using this method. Much of the code here is taken from his [metronome example](https://github.com/cwilso/metronome/blob/master/js/metronome.js), which he references in the article.
Let's start by setting up our default BPM (beats per minute), which will also be user-controllable via — you guessed it — another range input.
@@ -594,7 +594,7 @@ bpmControl.addEventListener(
(ev) => {
tempo = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
diff --git a/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index 2655267afdabb4a..14d5f0c7c7a9013 100644
--- a/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -100,7 +100,7 @@ If you use this call, you will get a mono buffer (single-channel buffer) that, w
The Web Audio API uses a planar buffer format. The left and right channels are stored like this:
-```
+```plain
LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)
```
@@ -108,7 +108,7 @@ This structure is widespread in audio processing, making it easy to process each
The alternative is to use an interleaved buffer format:
-```
+```plain
LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)
```
diff --git a/files/en-us/web/api/web_audio_api/best_practices/index.md b/files/en-us/web/api/web_audio_api/best_practices/index.md
index 2f58cb6f10cd9e6..533154afb5a9175 100644
--- a/files/en-us/web/api/web_audio_api/best_practices/index.md
+++ b/files/en-us/web/api/web_audio_api/best_practices/index.md
@@ -54,7 +54,7 @@ button.addEventListener(
const audioCtx = new AudioContext();
// Do something with the audio context
},
- false
+ false,
);
```
@@ -72,7 +72,7 @@ button.addEventListener(
audioCtx.resume();
}
},
- false
+ false,
);
```
diff --git a/files/en-us/web/api/web_audio_api/index.md b/files/en-us/web/api/web_audio_api/index.md
index 5db0d049f9b7533..fdefc9d7d61901a 100644
--- a/files/en-us/web/api/web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/index.md
@@ -213,9 +213,8 @@ You can find a number of examples at our [webaudio-example repo](https://github.
- [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
- [Web audio spatialization basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)
- [Controlling multiple parameters with ConstantSourceNode](/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode)
-- [Mixing Positional Audio and WebGL (2012)](https://web.dev/webaudio-positional-audio/)
-- [Developing Game Audio with the Web Audio API (2012)](https://auth.web.dev/webaudio-games/)
-- [Porting webkitAudioContext code to standards based AudioContext](/en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext)
+- [Mixing Positional Audio and WebGL (2012)](https://web.dev/articles/webaudio-positional-audio)
+- [Developing Game Audio with the Web Audio API (2012)](https://web.dev/articles/webaudio-games)
### Libraries
diff --git a/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md b/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
deleted file mode 100644
index 3599c27c713e9aa..000000000000000
--- a/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: Migrating from webkitAudioContext
-slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext
-page-type: guide
----
-
-{{DefaultAPISidebar("Web Audio API")}}
-
-In this article, we cover the differences in Web Audio API since it was first implemented in WebKit and how to update your code to use the modern Web Audio API.
-
-The Web Audio standard was first implemented in [WebKit](https://webkit.org/), and the implementation was built in parallel with the work on the [specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) of the API. As the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the WebKit (and Blink) implementations due to backwards compatibility reasons.
-
-New engines implementing the Web Audio spec (such as Gecko) will only implement the official, final version of the specification, which means that code using `webkitAudioContext` or old naming conventions in the Web Audio specification may not immediately work out of the box in a compliant Web Audio implementation. This article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based {{domxref("AudioContext")}}, which will work across different browser engines.
-
-> **Note:** There is a library called [webkitAudioContext monkeypatch](https://github.com/cwilso/webkitAudioContext-MonkeyPatch), which automatically fixes some of these changes to make most code targeting `webkitAudioContext` to work on the standards based `AudioContext` out of the box, but it currently doesn't handle all of the cases below. Please consult the [README file](https://github.com/cwilso/webkitAudioContext-MonkeyPatch/blob/gh-pages/README.md) for that library to see a list of APIs that are automatically handled by it.
-
-## Changes to the creator methods
-
-Three of the creator methods on `webkitAudioContext` have been renamed in {{domxref("AudioContext")}}.
-
-- `createGainNode()` has been renamed to {{domxref("createGain")}}.
-- `createDelayNode()` has been renamed to {{domxref("createDelay")}}.
-- `createJavaScriptNode()` has been renamed to {{domxref("createScriptProcessor")}}.
-
-These are simple renames that were made in order to improve the consistency of these method names on {{domxref("AudioContext")}}. If your code uses either of these names, like in the example below:
-
-```js
-// Old method names
-const gain = context.createGainNode();
-const delay = context.createDelayNode();
-const js = context.createJavaScriptNode(1024);
-```
-
-you can rename the methods to look like this:
-
-```js
-// New method names
-const gain = context.createGain();
-const delay = context.createDelay();
-const js = context.createScriptProcessor(1024);
-```
-
-The semantics of these methods remain the same in the renamed versions.
-
-## Changes to starting and stopping nodes
-
-In `webkitAudioContext`, there are two ways to start and stop {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}: the `noteOn()` and `noteOff()` methods, and the `start()` and `stop()` methods. ({{domxref("AudioBufferSourceNode")}} has yet another way of starting output: the `noteGrainOn()` method.) The `noteOn()`/`noteGrainOn()`/`noteOff()` methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the `noteOn()` and `noteGrainOn()` methods were consolidated into a single `start()` method, and the `noteOff()` method was renamed to the `stop()` method.
-
-In order to port your code, you can just rename the method that you're using. For example, if you have code like the below:
-
-```js
-const osc = context.createOscillator();
-osc.noteOn(1);
-osc.noteOff(1.5);
-
-const src = context.createBufferSource();
-src.noteGrainOn(1, 0.25);
-src.noteOff(2);
-```
-
-you can change it like this in order to port it to the standard AudioContext API:
-
-```js
-const osc = context.createOscillator();
-osc.start(1);
-osc.stop(1.5);
-
-const src = context.createBufferSource();
-src.start(1, 0.25);
-src.stop(2);
-```
-
-## Remove synchronous buffer creation
-
-In the old WebKit implementation of Web Audio, there were two versions of `createBuffer()`, one which created an initially empty buffer, and one which took an existing {{jsxref("ArrayBuffer")}} containing encoded audio, decoded it and returned the result in the form of an {{domxref("AudioBuffer")}}. The latter version of `createBuffer()` was potentially expensive, because it had to decode the audio buffer synchronously, and with the buffer being arbitrarily large, it could take a lot of time for this method to complete its work, and no other part of your web page's code could execute in the mean time.
-
-Because of these problems, this version of the `createBuffer()` method has been removed, and you should use the asynchronous `decodeAudioData()` method instead.
-
-The example below shows old code which downloads an audio file over the network, and then decoded it using `createBuffer()`:
-
-```js
-const xhr = new XMLHttpRequest();
-xhr.open("GET", "/path/to/audio.ogg", true);
-xhr.responseType = "arraybuffer";
-xhr.send();
-xhr.onload = () => {
- const decodedBuffer = context.createBuffer(xhr.response, false);
- if (decodedBuffer) {
- // Decoding was successful, do something useful with the audio buffer
- } else {
- alert("Decoding the audio buffer failed");
- }
-};
-```
-
-Converting this code to use `decodeAudioData()` is relatively simple, as can be seen below:
-
-```js
-const xhr = new XMLHttpRequest();
-xhr.open("GET", "/path/to/audio.ogg", true);
-xhr.responseType = "arraybuffer";
-xhr.send();
-xhr.onload = () => {
- context.decodeAudioData(
- xhr.response,
- (decodedBuffer) => {
- // Decoding was successful, do something useful with the audio buffer
- },
- () => {
- alert("Decoding the audio buffer failed");
- }
- );
-};
-```
-
-Note that the `decodeAudioData()` method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful. This means that you may need to restructure your code to run the part which happened after the `createBuffer()` call in the success callback, as you can see in the example above.
-
-## Renaming of AudioParam.setTargetValueAtTime
-
-The `setTargetValueAtTime()` method on the {{domxref("AudioParam")}} interface has been renamed to `setTargetAtTime()`. This is also a simple rename to improve the understandability of the API, and the semantics of the method are the same. If your code is using `setTargetValueAtTime()`, you can rename it to use `setTargetAtTime()`. For example, if we have code that looks like this:
-
-```js
-const gainNode = context.createGain();
-gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0);
-```
-
-you can rename the method, and be compliant with the standard, like so:
-
-```js
-const gainNode = context.createGain();
-gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0);
-```
-
-## Enumerated values that changed
-
-The original `webkitAudioContext` API used C-style number based enumerated values in the API. Those values have since been changed to use the Web IDL based enumerated values, which should be familiar because they are similar to things like the {{domxref("HTMLInputElement")}} property {{domxref("HTMLInputElement.type", "type")}}.
-
-### OscillatorNode.type
-
-{{domxref("OscillatorNode")}}'s type property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const osc = context.createOscillator();
-osc.type = osc.SINE; // sine waveform
-osc.type = osc.SQUARE; // square waveform
-osc.type = osc.SAWTOOTH; // sawtooth waveform
-osc.type = osc.TRIANGLE; // triangle waveform
-osc.setWaveTable(table);
-const isCustom = osc.type === osc.CUSTOM; // isCustom will be true
-```
-
-```js
-// New standard AudioContext code:
-const osc = context.createOscillator();
-osc.type = "sine"; // sine waveform
-osc.type = "square"; // square waveform
-osc.type = "sawtooth"; // sawtooth waveform
-osc.type = "triangle"; // triangle waveform
-osc.setPeriodicWave(table); // Note: setWaveTable has been renamed to setPeriodicWave!
-const isCustom = osc.type === "custom"; // isCustom will be true
-```
-
-### BiquadFilterNode.type
-
-{{domxref("BiquadFilterNode")}}'s type property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const filter = context.createBiquadFilter();
-filter.type = filter.LOWPASS; // lowpass filter
-filter.type = filter.HIGHPASS; // highpass filter
-filter.type = filter.BANDPASS; // bandpass filter
-filter.type = filter.LOWSHELF; // lowshelf filter
-filter.type = filter.HIGHSHELF; // highshelf filter
-filter.type = filter.PEAKING; // peaking filter
-filter.type = filter.NOTCH; // notch filter
-filter.type = filter.ALLPASS; // allpass filter
-```
-
-```js
-// New standard AudioContext code:
-const filter = context.createBiquadFilter();
-filter.type = "lowpass"; // lowpass filter
-filter.type = "highpass"; // highpass filter
-filter.type = "bandpass"; // bandpass filter
-filter.type = "lowshelf"; // lowshelf filter
-filter.type = "highshelf"; // highshelf filter
-filter.type = "peaking"; // peaking filter
-filter.type = "notch"; // notch filter
-filter.type = "allpass"; // allpass filter
-```
-
-### PannerNode.panningModel
-
-{{domxref("PannerNode")}}'s panningModel property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const panner = context.createPanner();
-panner.panningModel = panner.EQUALPOWER; // equalpower panning
-panner.panningModel = panner.HRTF; // HRTF panning
-```
-
-```js
-// New standard AudioContext code:
-const panner = context.createPanner();
-panner.panningModel = "equalpower"; // equalpower panning
-panner.panningModel = "HRTF"; // HRTF panning
-```
-
-### PannerNode.distanceModel
-
-{{domxref("PannerNode")}}'s `distanceModel` property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const panner = context.createPanner();
-panner.distanceModel = panner.LINEAR_DISTANCE; // linear distance model
-panner.distanceModel = panner.INVERSE_DISTANCE; // inverse distance model
-panner.distanceModel = panner.EXPONENTIAL_DISTANCE; // exponential distance model
-```
-
-```js
-// Mew standard AudioContext code:
-const panner = context.createPanner();
-panner.distanceModel = "linear"; // linear distance model
-panner.distanceModel = "inverse"; // inverse distance model
-panner.distanceModel = "exponential"; // exponential distance model
-```
-
-## Gain control moved to its own node type
-
-The Web Audio standard now controls all gain using the {{domxref("GainNode")}}. Instead of setting a `gain` property directly on an audio source, you connect the source to a gain node and then control the gain using that node's `gain` parameter.
-
-### AudioBufferSourceNode
-
-The `gain` attribute of {{domxref("AudioBufferSourceNode")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} to a gain node. See the following example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-src.gain.value = 0.5;
-src.connect(context.destination);
-src.noteOn(0);
-```
-
-```js
-// New standard AudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-const gain = context.createGain();
-src.connect(gain);
-gain.gain.value = 0.5;
-gain.connect(context.destination);
-src.start(0);
-```
-
-### AudioBuffer
-
-The `gain` attribute of {{domxref("AudioBuffer")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} that owns the buffer to a gain node. See the following example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-src.buffer.gain = 0.5;
-src.connect(context.destination);
-src.noteOn(0);
-```
-
-```js
-// New standard AudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-const gain = context.createGain();
-src.connect(gain);
-gain.gain.value = 0.5;
-gain.connect(context.destination);
-src.start(0);
-```
-
-## Removal of AudioBufferSourceNode.looping
-
-The `looping` attribute of {{domxref("AudioBufferSourceNode")}} has been removed. This attribute was an alias of the `loop` attribute, so you can just use the `loop` attribute instead. Instead of having code like this:
-
-```js
-const source = context.createBufferSource();
-source.looping = true;
-```
-
-you can change it to respect the last version of the specification:
-
-```js
-const source = context.createBufferSource();
-source.loop = true;
-```
-
-Note, the `loopStart` and `loopEnd` attributes are not supported in `webkitAudioContext`.
-
-## Changes to determining playback state
-
-The `playbackState` attribute of {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}} has been removed. Depending on why you used this attribute, you can use the following techniques to get the same information:
-
-- If you need to compare this attribute to `UNSCHEDULED_STATE`, you can basically remember whether you've called `start()` on the node or not.
-- If you need to compare this attribute to `SCHEDULED_STATE`, you can basically remember whether you've called `start()` on the node or not. You can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to `start()` to know whether playback has started or not.
-- If you need to compare this attribute to `PLAYING_STATE`, you can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to `start()` to know whether playback has started or not.
-- If you need to know when playback of the node is finished (which is the most significant use case of `playbackState`), there is a new ended event which you can use to know when playback is finished. Please see this code example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-// Some time later...
-const isFinished = src.playbackState === src.FINISHED_STATE;
-```
-
-```js
-// New AudioContext code:
-let isFinished = false;
-const src = context.createBufferSource();
-src.onended = (event) => {
- isFinished = true;
-};
-```
-
-The exact same changes have been applied to both {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}, so you can apply the same techniques to both kinds of nodes.
-
-## Removal of AudioContext.activeSourceCount
-
-The `activeSourceCount` attribute has been removed from {{domxref("AudioContext")}}. If you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above.
-
-Code using the `activeSourceCount` attribute of the {{domxref("AudioContext")}}, like this snippet:
-
-```js
-const src0 = context.createBufferSource();
-const src1 = context.createBufferSource();
-// Set buffers and other parameters...
-src0.start(0);
-src1.start(0);
-// Some time later...
-console.log(context.activeSourceCount);
-```
-
-could be rewritten like that:
-
-```js
-// Array to track the playing source nodes:
-const sources = [];
-
-// When starting the source, put it at the end of the array,
-// and set a handler to make sure it gets removed when the
-// AudioBufferSourceNode reaches its end.
-// First argument is the AudioBufferSourceNode to start, other arguments are
-// the argument to the |start()| method of the AudioBufferSourceNode.
-function startSource(src, ...startArgs) {
- src.onended = () => {
- sources.splice(sources.indexOf(src), 1);
- };
- sources.push(src);
- src.start.apply(src, startArgs);
-}
-
-function activeSources() {
- return sources.length;
-}
-
-const src0 = context.createBufferSource();
-const src1 = context.createBufferSource();
-
-// Set buffers and other parameters...
-startSource(src0, 0);
-startSource(src1, 0);
-
-// Some time later, query the number of sources...
-console.log(activeSources());
-```
-
-## Renaming of WaveTable
-
-The {{domxref("WaveTable")}} interface has been renamed to {{domxref("PeriodicWave")}}. Here is how you can port old code using `WaveTable` to the standard AudioContext API:
-
-```js
-// Old webkitAudioContext code:
-const osc = context.createOscillator();
-const table = context.createWaveTable(realArray, imaginaryArray);
-osc.setWaveTable(table);
-```
-
-```js
-// New standard AudioContext code:
-const osc = context.createOscillator();
-const table = context.createPeriodicWave(realArray, imaginaryArray);
-osc.setPeriodicWave(table);
-```
-
-## Removal of some of the AudioParam read-only attributes
-
-The following read-only attributes have been removed from AudioParam: `name`, `units`, `minValue`, and `maxValue`. These used to be informational attributes. Here is some information on how you can get these values if you need them:
-
-- The `name` attribute is a string representing the name of the {{domxref("AudioParam")}} object. For example, the name of {{domxref("GainNode.gain")}} is `"gain"`. You can track where the {{domxref("AudioParam")}} object is coming from in your code if you need this information.
-- The `minValue` and `maxValue` attributes are read-only values representing the nominal range for the {{domxref("AudioParam")}}. For example, for {{domxref("GainNode") }}, these values are 0 and 1, respectively. Note that these bounds are not enforced by the engine, and are merely used for informational purposes. As an example, it's perfectly valid to set a gain value to 2, or even -1. In order to find out these nominal values, you can consult the [specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html).
-- The `units` attribute as implemented in `webkitAudioContext` implementations is unused, and always returns 0. There is no reason why you should need this attribute.
-
-## Removal of MediaElementAudioSourceNode.mediaElement
-
-The `mediaElement` attribute of {{domxref("MediaElementAudioSourceNode")}} has been removed. You can keep a reference to the media element used to create this node if you need to access it later.
-
-## Removal of MediaStreamAudioSourceNode.mediaStream
-
-The `mediaStream` attribute of {{domxref("MediaStreamAudioSourceNode")}} has been removed. You can keep a reference to the media stream used to create this node if you need to access it later.
diff --git a/files/en-us/web/api/web_audio_api/simple_synth/index.md b/files/en-us/web/api/web_audio_api/simple_synth/index.md
index 86fe651ee472ea0..af964e70d2c19ae 100644
--- a/files/en-us/web/api/web_audio_api/simple_synth/index.md
+++ b/files/en-us/web/api/web_audio_api/simple_synth/index.md
@@ -96,7 +96,11 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
.key {
cursor: pointer;
- font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 16px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
border: 1px solid black;
border-radius: 5px;
width: 20px;
@@ -129,7 +133,8 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
background-color: #eef;
}
-.key:active {
+.key:active,
+.active {
background-color: #000;
color: #fff;
}
@@ -141,7 +146,11 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
.settingsBar {
padding-top: 8px;
- font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 14px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
position: relative;
vertical-align: middle;
width: 100%;
@@ -396,9 +405,9 @@ if (!Object.entries) {
(e, k) =>
concat(
e,
- typeof k === "string" && isEnumerable(O, k) ? [[k, O[k]]] : []
+ typeof k === "string" && isEnumerable(O, k) ? [[k, O[k]]] : [],
),
- []
+ [],
);
};
}
@@ -531,7 +540,7 @@ function notePressed(event) {
if (event.buttons & 1) {
const dataset = event.target.dataset;
- if (!dataset["pressed"]) {
+ if (!dataset["pressed"] && dataset["octave"]) {
const octave = Number(dataset["octave"]);
oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
dataset["pressed"] = "yes";
@@ -554,9 +563,12 @@ function noteReleased(event) {
if (dataset && dataset["pressed"]) {
const octave = Number(dataset["octave"]);
- oscList[octave][dataset["note"]].stop();
- delete oscList[octave][dataset["note"]];
- delete dataset["pressed"];
+
+ if (oscList[octave] && oscList[octave][dataset["note"]]) {
+ oscList[octave][dataset["note"]].stop();
+ delete oscList[octave][dataset["note"]];
+ delete dataset["pressed"];
+ }
}
}
```
@@ -575,6 +587,39 @@ function changeVolume(event) {
This sets the value of the main gain node's `gain` {{domxref("AudioParam")}} to the slider's new value.
+#### Keyboard support
+
+The code below adds [`keydown`](/en-US/docs/Web/API/Element/keydown_event) and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) event listeners to handle keyboard input. The `keydown` event handler calls `notePressed()` to start playing the note corresponding to the key that was pressed, and the `keyup` event handler calls `noteReleased()` to stop playing the note corresponding to the key that was released.
+
+```js-nolint
+const synthKeys = document.querySelectorAll(".key");
+const keyCodes = [
+ "Space",
+ "ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight",
+ "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter",
+ "Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight",
+ "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace",
+ "Escape",
+];
+function keyNote(event) {
+ const elKey = synthKeys[keyCodes.indexOf(event.code)];
+ if (elKey) {
+ if (event.type === "keydown") {
+ elKey.tabIndex = -1;
+ elKey.focus();
+ elKey.classList.add("active");
+ notePressed({ buttons: 1, target: elKey });
+ } else {
+ elKey.classList.remove("active");
+ noteReleased({ buttons: 1, target: elKey });
+ }
+ event.preventDefault();
+ }
+}
+addEventListener("keydown", keyNote);
+addEventListener("keyup", keyNote);
+```
+
### Result
Put all together, the result is a simple but working point-and-click musical keyboard:
diff --git a/files/en-us/web/api/web_audio_api/tools/index.md b/files/en-us/web/api/web_audio_api/tools/index.md
index 2ee84090ab158c5..a430a0b0137b6ed 100644
--- a/files/en-us/web/api/web_audio_api/tools/index.md
+++ b/files/en-us/web/api/web_audio_api/tools/index.md
@@ -28,4 +28,3 @@ _Add information for developers working in Safari._
- [Web Audio API](/en-US/docs/Web/API/Web_Audio_API)
- [Using the Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
-- [Writing Web Audio API code that works in every browser](/en-US/docs/Web/Guide/Audio_and_video_delivery/Web_Audio_API_cross_browser)
diff --git a/files/en-us/web/api/web_audio_api/using_audioworklet/index.md b/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
index c5974d8d6977d94..310b91c0788f9d3 100644
--- a/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
+++ b/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
@@ -28,7 +28,7 @@ Throughout the remainder of this article, we'll look at these steps in more deta
The example code found on this page is derived from [this working example](https://mdn.github.io/webaudio-examples/audioworklet/) which is part of MDN's [GitHub repository of Web Audio examples](https://github.com/mdn/webaudio-examples/). The example creates an oscillator node and adds white noise to it using an {{domxref("AudioWorkletNode")}} before playing the resulting sound out. Slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output.
-[**See the code**](https://github.com/mdn/webaudio-examples/tree/master/audioworklet)
+[**See the code**](https://github.com/mdn/webaudio-examples/tree/main/audioworklet)
[**Try it live**](https://mdn.github.io/webaudio-examples/audioworklet/)
@@ -94,7 +94,7 @@ const firstChannelByteCount = firstInputFirstChannel.length;
const firstByteOfFirstChannel = firstInputFirstChannel[0]; // (or inputList[0][0][0])
```
-The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is an array of `Float32Array` objects, which contain the samples for that channel.
+The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is a `Float32Array` object, which contains the samples for that channel.
How you use the inputs and how you generate the outputs depends very much on your processor. If your processor is just a generator, it can ignore the inputs and just replace the contents of the outputs with the generated data. Or you can process each input independently, applying an algorithm to the incoming data on each channel of each input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). Or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data).
@@ -178,7 +178,7 @@ To create an audio node that pumps blocks of audio data through an {{domxref("Au
1. Load and install the audio processor module
2. Create an {{domxref("AudioWorkletNode")}}, specifying the audio processor module to use by its name
-3. Connect inputs to the `AudioWorkletNode` and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("AudioContext.destination", "destination")}} property.
+3. Connect inputs to the `AudioWorkletNode` and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("BaseAudioContext/destination", "destination")}} property.
To use an audio worklet processor, you can use code similar to the following:
@@ -207,7 +207,7 @@ In order to ensure the context is usable, this starts by creating the context if
You can then create a new audio processor node by doing this:
```js
-let newProcessorNode = createMyAudioProcessor();
+let newProcessorNode = await createMyAudioProcessor();
```
If the returned value, `newProcessorNode`, is non-`null`, we have a valid audio context with its hiss processor node in place and ready to use.
@@ -256,9 +256,9 @@ process(inputList, outputList, parameters) {
const output = outputList[0];
const gain = parameters.gain;
- for (let channelNum = 0; channelNum < input.length; channel++) {
- const inputChannel = input[channel];
- const outputChannel = output[channel];
+ for (let channelNum = 0; channelNum < input.length; channelNum++) {
+ const inputChannel = input[channelNum];
+ const outputChannel = output[channelNum];
// If gain.length is 1, it's a k-rate parameter, so apply
// the first entry to every frame. Otherwise, apply each
diff --git a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
index 62b7ce131c2c6ab..dc18787febe524c 100644
--- a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
+++ b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
@@ -14,7 +14,7 @@ Our simple example for this guide provides a play/pause button that starts and p
-You can check out the [full demo here on Codepen](https://codepen.io/Rumyra/pen/oPxvYB/). Also see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/master/iirfilter-node). It includes some different coefficient values for different lowpass frequencies — you can change the value of the `filterNumber` constant to a value between 0 and 3 to check out the different available effects.
+You can check out the [full demo here on Codepen](https://codepen.io/Rumyra/pen/oPxvYB/). Also see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/main/iirfilter-node). It includes some different coefficient values for different lowpass frequencies — you can change the value of the `filterNumber` constant to a value between 0 and 3 to check out the different available effects.
## Browser support
@@ -32,7 +32,7 @@ When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("Biqua
With the IIRFIlter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.
-If you are looking to learn more there's some [information about the maths behind IIR filters here](http://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
+If you are looking to learn more there's some [information about the maths behind IIR filters here](https://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
If you want to play with the IIR filter node and need some values to help along the way, there's [a table of already calculated values here](https://www.dspguide.com/CH20.PDF); on pages 4 & 5 of the linked PDF the `an` values refer to the `feedForward` values and the `bn` values refer to the `feedback`. [musicdsp.org](https://www.musicdsp.org/en/latest/) is also a great resource if you want to read more about different filters and how they are implemented digitally.
@@ -101,7 +101,7 @@ playButton.addEventListener(
// …
}
},
- false
+ false,
);
```
@@ -129,7 +129,7 @@ filterButton.addEventListener(
// …
}
},
- false
+ false,
);
```
@@ -163,7 +163,7 @@ Now let's get our response data:
iirFilter.getFrequencyResponse(
myFrequencyArray,
magResponseOutput,
- phaseResponseOutput
+ phaseResponseOutput,
);
```
@@ -218,7 +218,7 @@ magResponseOutput.forEach((magResponseData, i) => {
} else {
canvasCtx.lineTo(
(width / totalArrayItems) * i,
- height - magResponseData * 100 - spacing
+ height - magResponseData * 100 - spacing,
);
}
});
diff --git a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
index 28147894df0fc28..9d0628a6266b481 100644
--- a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
@@ -20,7 +20,7 @@ Our boombox looks like this:
Note the retro cassette deck with a play button, and vol and pan sliders to allow you to alter the volume and stereo panning. We could make this a lot more complex, but this is ideal for simple learning at this stage.
-[Check out the final demo here on Codepen](https://codepen.io/Rumyra/pen/qyMzqN/), or see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/master/audio-basics).
+[Check out the final demo here on Codepen](https://codepen.io/Rumyra/pen/qyMzqN/), or see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/main/audio-basics).
## Browser support
@@ -122,7 +122,7 @@ playButton.addEventListener(
playButton.dataset.playing = "false";
}
},
- false
+ false,
);
```
@@ -134,7 +134,7 @@ audioElement.addEventListener(
() => {
playButton.dataset.playing = "false";
},
- false
+ false,
);
```
@@ -178,7 +178,7 @@ volumeControl.addEventListener(
() => {
gainNode.gain.value = volumeControl.value;
},
- false
+ false,
);
```
@@ -225,7 +225,7 @@ pannerControl.addEventListener(
() => {
panner.pan.value = pannerControl.value;
},
- false
+ false,
);
```
@@ -251,7 +251,7 @@ The [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/vo
-Another application developed specifically to demonstrate the Web Audio API is the [Violent Theremin](https://mdn.github.io/webaudio-examples/violent-theremin/), a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow ([see Violent Theremin source code](https://github.com/mdn/webaudio-examples/tree/master/violent-theremin)).
+Another application developed specifically to demonstrate the Web Audio API is the [Violent Theremin](https://mdn.github.io/webaudio-examples/violent-theremin/), a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow ([see Violent Theremin source code](https://github.com/mdn/webaudio-examples/tree/main/violent-theremin)).
diff --git a/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index e5733cb8e36e9c5..3c83b150c58affd 100644
--- a/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -188,14 +188,13 @@ As before, we now start a for loop and cycle through each value in the `dataArra
The one value that needs explaining is the vertical offset position we are drawing each bar at: `HEIGHT - barHeight / 2`. I am doing this because I want each bar to stick up from the bottom of the canvas, not down from the top, as it would if we set the vertical position to 0. Therefore, we instead set the vertical position each time to the height of the canvas minus `barHeight / 2`, so therefore each bar will be drawn from partway down the canvas, down to the bottom.
```js
- for (let i = 0; i < bufferLength; i++) {
- barHeight = dataArray[i] / 2;
+for (let i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i] / 2;
- canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
- canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight);
+ canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+ canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight);
- x += barWidth + 1;
- }
+ x += barWidth + 1;
}
```
diff --git a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index 7e5241d17c7a295..2e4ffaef03f8eaf 100644
--- a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -21,12 +21,12 @@ It's worth noting that you don't _have_ to move sound within a full 3D space eit
> **Note:** There's also a {{domxref("StereoPannerNode")}} designed to deal with the common use case of creating simple left and right stereo panning effects.
> This is much simpler to use, but obviously nowhere near as versatile.
-> If you just want a simple stereo panning effect, our [StereoPannerNode example](https://mdn.github.io/webaudio-examples/stereo-panner-node/) ([see source code](https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node)) should give you everything you need.
+> If you just want a simple stereo panning effect, our [StereoPannerNode example](https://mdn.github.io/webaudio-examples/stereo-panner-node/) ([see source code](https://github.com/mdn/webaudio-examples/tree/main/stereo-panner-node)) should give you everything you need.
## 3D boombox demo
To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic [Using the Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) guide.
-See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/spatialization/) (and see the [source code](https://github.com/mdn/webaudio-examples/tree/master/spatialization) also).
+See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/spatialization/) (and see the [source code](https://github.com/mdn/webaudio-examples/tree/main/spatialization) also).
@@ -176,7 +176,7 @@ We can move it left and right, up and down, and back and forth; we can also rota
The sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us.
We need to set up a few things for the interface.
-First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up [CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms) to actually do the movement.
+First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) to actually do the movement.
Finally, we'll set some bounds so our boombox doesn't move too far in any direction:
```js
@@ -463,7 +463,7 @@ moveControls.forEach((el) => {
}
moving = moveBoombox(direction);
},
- false
+ false,
);
window.addEventListener(
@@ -473,7 +473,7 @@ moveControls.forEach((el) => {
cancelAnimationFrame(moving.frameId);
}
},
- false
+ false,
);
});
```
@@ -529,7 +529,7 @@ playButton.addEventListener(
playButton.dataset.playing = "false";
}
},
- false
+ false,
);
```
@@ -544,7 +544,7 @@ The values can be hard to manipulate sometimes and depending on your use case it
> The panner node does some very involved maths under the hood;
> there are a [number of tests here](https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&aligned=true) so you can keep track of the status of the inner workings of this node across different platforms.
-Again, you can [check out the final demo here](https://mdn.github.io/webaudio-examples/spatialization/), and the [final source code is here](https://github.com/mdn/webaudio-examples/tree/master/spatialization).
+Again, you can [check out the final demo here](https://mdn.github.io/webaudio-examples/spatialization/), and the [final source code is here](https://github.com/mdn/webaudio-examples/tree/main/spatialization).
There is also a [Codepen demo too](https://codepen.io/Rumyra/pen/MqayoK?editors=0100).
If you are working with 3D games and/or WebXR it's a good idea to harness a 3D library to create such functionality, rather than trying to do this all yourself from first principles.
diff --git a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
index a191f06c8525b13..afac10ea54902f7 100644
--- a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
+++ b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
@@ -4,7 +4,7 @@ slug: Web/API/Web_Authentication_API/Attestation_and_Assertion
page-type: guide
---
-{{SeeCompatTable}}{{DefaultAPISidebar("Web Authentication API")}}
+{{DefaultAPISidebar("Web Authentication API")}}
There are two different types of certificates used in WebAuthn for registration and authentication. They have similar names and similar purposes, but understanding the differences may be an initial point of confusion. The sections below describe attestation, which happens during registration, and assertion which happens during authentication.
@@ -12,19 +12,21 @@ There are two different types of certificates used in WebAuthn for registration
When an authenticator registers a new key pair with a service, the authenticator signs the public key with an attestation certificate. The attestation certificate is built into the authenticator during manufacturing time and is specific to a device model. That is, all "Samsung Galaxy S8" phones, manufactured at a specific time or particular manufacturing run, have the same attestation certificate.
-The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic ArrayBuffers:
+The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic {{jsxref("ArrayBuffer")}} objects:
- **clientDataJSON** - An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate.
-- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. Contains authenticator data and an attestation statement. The authenticator data contains an attestedCredentialData field. The attestedCredentialData field contains the credentialId and credentialPublicKey. (The [authenticator data](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) is the same structure that is used in the AuthenticatorAssertionResponse. The attestedCredentialData is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse.)
+- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. This contains:
+ - [Authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data) containing an `attestedCredentialData` field, which in turn contains the `credentialId` and `credentialPublicKey`. The `attestedCredentialData` is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse.
+ - An attestation statement, which is optionally present depending on whether the relying party requests attestation. In general, relying parties aren't encouraged to request attestation, so it's more likely that this statement won't be present.
Different devices have different attestation formats. The [pre-defined attestation formats in WebAuthn](https://www.w3.org/TR/webauthn/#defined-attestation-formats) are:
- **Packed** - a generic attestation format that is commonly used by devices whose sole function is as a WebAuthn authenticator, such as security keys.
- **TPM** - the Trusted Platform Module (TPM) is a set of specifications from the Trusted Platform Group (TPG). This attestation format is commonly found in desktop computers and is used by Windows Hello as its preferred attestation format.
- **Android Key Attestation** - one of the features added in Android O was Android Key Attestation, which enables the Android operating system to attest to keys.
-- **Android SafetyNet** -prior to Android Key Attestation, the only option for Android devices was to create Android SafetyNet attestations
-- **FIDO U2F** - security keys that implement the FIDO U2F standard use this format
-- **none** - browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none`
+- **Android SafetyNet** -prior to Android Key Attestation, the only option for Android devices was to create Android SafetyNet attestations.
+- **FIDO U2F** - security keys that implement the FIDO U2F standard use this format.
+- **none** - browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none`.
The purpose of attestation is to cryptographically prove that a newly generated key pair came from a specific device. This provides a root of trust for a newly generated key pair as well as being able to identify the attributes of a device being used (how the private key is protected; if / what kind of biometric is being used; whether a device has been certified; etc.). It should be noted that while attestation provides the capability for a root of trust, validating the root of trust is frequently not necessary. When registering an authenticator for a new account, typically a Trust On First Use (TOFU) model applies; and when adding an authenticator to an existing account, a user has already been authenticated and has established a secure session.
@@ -35,7 +37,7 @@ When a user chooses to log into a service, the server sends a challenge and the
The assertion is returned through the WebAuthn API as the [AuthenticatorAssertionResponse](/en-US/docs/Web/API/AuthenticatorAssertionResponse). The assertion format is fairly simple as it contains four basic ArrayBuffers:
- [clientDataJSON](/en-US/docs/Web/API/AuthenticatorResponse/clientDataJSON) - The same as in attestation. An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate.
-- [authenticatorData](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) - data created and/or used by the authenticator
+- [authenticatorData](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) - data created and/or used by the authenticator (see also [authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data)).
- **signature** - a signature over the clientDataJSON and authenticatorData that can be verified with the public key that was created during registration.
- **userHandle** - Optional. (Nullable) A user identifier. This may be a username, or a hash of a username, etc. Used by a service to give a scope to credentials. Maximum length of 64 bytes. Older authenticators (U2F) do not support this output.
diff --git a/files/en-us/web/api/web_authentication_api/authenticator_data/index.md b/files/en-us/web/api/web_authentication_api/authenticator_data/index.md
new file mode 100644
index 000000000000000..6372de3a466ab74
--- /dev/null
+++ b/files/en-us/web/api/web_authentication_api/authenticator_data/index.md
@@ -0,0 +1,57 @@
+---
+title: Authenticator data
+slug: Web/API/Web_Authentication_API/Authenticator_data
+page-type: guide
+---
+
+{{DefaultAPISidebar("Web Authentication API")}}
+
+The authenticator data structure contains information from the authenticator about the processing of a credential creation or authentication request — such as the Relying Party ID Hash (`rpIdHash`), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator. This page explains what is contained in the data structure.
+
+## Accessing authenticator data
+
+Authenticator data is made available to the browser as an {{jsxref("ArrayBuffer")}}, and can be accessed in multiple ways. The two most convenient are:
+
+- In the {{domxref("AuthenticatorAssertionResponse.authenticatorData", "PublicKeyCredential.response.authenticatorData")}} property made available on the {{domxref("PublicKeyCredential")}} returned from a successful {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} (credential creation) call.
+- Via the {{domxref("AuthenticatorAttestationResponse.getAuthenticatorData", "PublicKeyCredential.response.getAuthenticatorData()")}} method made available on the {{domxref("PublicKeyCredential")}} returned from a successful {{domxref("CredentialsContainer.get", "navigator.credentials.get()")}} (authentication) call.
+
+## Data structure
+
+An authenticator data {{jsxref("ArrayBuffer")}} is at least 37 bytes in length, and contains the following fields:
+
+- **rpIdHash** (32 bytes)
+ - : The SHA-256 hash of the [Relying Party ID](https://w3c.github.io/webauthn/#relying-party-identifier) that the credential is scoped to. The server will ensure that this hash matches the SHA256 hash of its own relying party ID in order to prevent phishing or other man-in-the-middle attacks.
+- **flags** (1 bytes)
+
+ - : A bitfield that indicates various attributes that were asserted by the authenticator. The bits are as follows, where Bit 0 is the least significant bit and all bits not specifically mentioned below are "reserved for future use":
+
+ - Bit 0, User Presence (UP): If set (i.e., to `1`), the authenticator validated that the user was present through some Test of User Presence (TUP), such as touching a button on the authenticator.
+ - Bit 2, User Verification (UV): If set, the authenticator verified the actual user through a biometric, PIN, or other method.
+ - Bit 3, Backup Eligibility (BE): If set, the public key credential source used by the authenticator to generate an assertion is backup-eligible. This means that it can be backed up in some fashion (for example via cloud or local network sync) and as such may become present on an authenticator other than its generating authenticator. Backup-eligible credential sources are therefore also known as multi-device credentials.
+ - Bit 4, Backup State (BS): If set, the public key credential source is currently backed up (see Bit 3 for context).
+ - Bit 6, Attested Credential Data (AT): If set, the attested credential data will immediately follow the first 37 bytes of this `authenticatorData`.
+ - Bit 7, Extension Data (ED): If set, extension data is present. Extension data will follow attested credential data if it is present, or will immediately follow the first 37 bytes of the `authenticatorData` if no attested credential data is present.
+
+- **signCount** (4 bytes)
+ - : A signature counter, if supported by the authenticator (set to 0 otherwise). Servers may optionally use this counter to detect authenticator cloning.
+- **attestedCredentialData** (variable length)
+
+ - : The credential that was created. This is only present during a {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} call. This is a sequence of bytes with the following format:
+
+ - **AAGUID** (16 bytes): The Authenticator Attestation Globally Unique Identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator). A relying party can use this to find out the characteristics of the authenticator by looking up its metadata statement via the [FIDO metadata service](https://fidoalliance.org/metadata/). This is relevant in certain situations such as enterprise deployments or where regulatory requirements dictate a certain type of authenticator be used; it should be ignored otherwise.
+
+ - **_credentialIdLength_** (2 bytes): The length of the credential ID that immediately follows these bytes.
+ - **_credentialId_** (variable length): A unique identifier for this credential so that it can be requested for future authentications. The credential is "_credentialIdLength_" bytes long.
+ - **credentialPublicKey** (variable length): A [COSE](https://datatracker.ietf.org/doc/html/rfc8152)-encoded public key. This public key will be stored on the server associated with a user's account and be used for future authentications. Relying parties can retrieve the DER-encoded form of it without parsing the COSE-encoded authenticator data via the {{domxref("AuthenticatorAttestationResponse.getPublicKey()")}} method.
+
+- **extensions** (variable length)
+
+ - : An optional [CBOR](https://datatracker.ietf.org/doc/html/rfc7049) map containing the response outputs from extensions processed by the authenticator
+
+ Extensions are optional and different browsers may recognize different extensions. Processing extensions is always optional for the browser: if a browser does not recognize a given extension, it will just ignore it. For information on using extensions, and which ones are supported by which browsers, see [Web Authentication extensions](/en-US/docs/Web/API/Web_Authentication_API/WebAuthn_extensions).
+
+ > **Note:** The authenticator data only contains the results from extensions processed by the authenticator. The results from extensions processed by the browser (client) can be accessed via {{domxref("PublicKeyCredential.getClientExtensionResults")}}.
+
+## See also
+
+[Authenticator data definition in the WebAuthn specification](https://w3c.github.io/webauthn/#sctn-authenticator-data)
diff --git a/files/en-us/web/api/web_authentication_api/index.md b/files/en-us/web/api/web_authentication_api/index.md
index c8090cf7a4fc46d..f8af14503ec12ea 100644
--- a/files/en-us/web/api/web_authentication_api/index.md
+++ b/files/en-us/web/api/web_authentication_api/index.md
@@ -2,112 +2,179 @@
title: Web Authentication API
slug: Web/API/Web_Authentication_API
page-type: web-api-overview
-browser-compat:
- - api.Credential
- - api.CredentialsContainer
- - api.PublicKeyCredential
- - api.AuthenticatorResponse
- - api.AuthenticatorAttestationResponse
- - api.AuthenticatorAssertionResponse
+browser-compat: api.PublicKeyCredential
---
{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
-The Web Authentication API is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and/or secure second-factor authentication without SMS texts.
+The Web Authentication API (WebAuthn) is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication (MFA) without SMS texts.
-## Web authentication concepts and usage
+> **Note:** [Passkeys](https://passkeys.dev/) are a significant use case for web authentication; see [Create a passkey for passwordless logins](https://web.dev/articles/passkey-registration) and [Sign in with a passkey through form autofill](https://web.dev/articles/passkey-form-autofill) for implementation details. See also [Google Identity > Passwordless login with passkeys](https://developers.google.com/identity/passkeys).
-The Web Authentication API (also referred to as WebAuthn) uses [asymmetric (public-key)](https://en.wikipedia.org/wiki/Public-key_cryptography) instead of passwords or SMS texts for registering, authenticating, and [second-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) with websites. This has some benefits:
+## WebAuthn concepts and usage
+
+WebAuthn uses [asymmetric (public-key) cryptography](https://en.wikipedia.org/wiki/Public-key_cryptography) instead of passwords or SMS texts for registering, authenticating, and [multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) with websites. This has some benefits:
- **Protection against phishing:** An attacker who creates a fake login website can't login as the user because the signature changes with the [origin](/en-US/docs/Glossary/Origin) of the website.
- **Reduced impact of data breaches:** Developers don't need to hash the public key, and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs the private key.
- **Invulnerable to password attacks:** Some users might reuse passwords, and an attacker may obtain the user's password for another website (e.g. via a data breach). Also, text passwords are much easier to brute-force than a digital signature.
-Many websites already have pages that allow users to register new accounts or sign in to an existing account, and the Web Authentication API acts as a replacement or supplement to those on those existing webpages. Similar to the other forms of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API), the Web Authentication API has two basic methods that correspond to register and login:
+Many websites already have pages that allow users to register new accounts or sign into an existing account, and WebAuthn acts as a replacement or enhancement for the authentication part of the system. It extends the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API), abstracting communication between the user agent and an authenticator and providing the following new functionality:
+
+- When {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} is used with the `publicKey` option, the user agent creates new credentials via an authenticator — either for registering a new account or for associating a new asymmetric key pair with an existing account.
+ - When registering a new account, these credentials are stored on a server (also referred to as a service or a [relying party](https://en.wikipedia.org/wiki/Relying_party)) and can be subsequently used to log a user in.
+ - The asymmetric key pair is stored in the authenticator, which can then be used to authenticate a user with a relying party for example during MFA. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
+- When {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} is used with the `publicKey` option, the user agent uses an existing set of credentials to authenticate to a relying party (either as the primary login or to provide an additional factor during MFA as described above).
+
+In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user has the private key required for authentication without revealing any secrets over the network.
+
+> **Note:** The "challenge" must be a buffer of random information at least 16 bytes in size.
+
+### Creating a key pair and registering a user
-- {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - when used with the publicKey option, creates new credentials, either for registering a new account or for associating a new asymmetric key pair credentials with an existing account.
-- {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - when used with the publicKey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication.
+To illustrate how the credential creation process works, let's describe the typical flow that occurs when a user wants to register a credential to a relying party:
-> **Note:** Both `create()` and `get()` require a [secure context](/en-US/docs/Web/Security/Secure_Contexts) (i.e. the server is connected by HTTPS or is the localhost), and will not be available for use if the browser is not operating in a secure context.
+1. The relying party server sends user and relying party information to the web app handling the registration process, along with the "challenge", using an appropriate secure mechanism (for example [Fetch](/en-US/docs/Web/API/Fetch_API) or [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest)).
-In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.
+ > **Note:** The format for sharing information between the relying party server and the web app is up to the application.
+ > A recommended approach is to exchange {{glossary("JSON type representation")}} objects for credentials and credential options.
+ > Convenience methods have been created in `PublicKeyCredential` for converting from the JSON representations to the form required by the authentication APIs: {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "parseCreationOptionsFromJSON()")}}, {{domxref("PublicKeyCredential.parseRequestOptionsFromJSON_static", "parseRequestOptionsFromJSON()")}} and {{domxref("PublicKeyCredential.toJSON()")}}.
-In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:
+2. The web app initiates generation of a new credential via the authenticator, on behalf of the relying party, via a {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} call. This call is passed a `publicKey` option specifying device capabilities, e.g., whether the device provides its own user authentication (for example with biometrics).
-1. **Server** - the Web Authentication API is intended to register new credentials on a server (also referred to as a service or a [relying party](https://en.wikipedia.org/wiki/Relying_party)) and later use those same credentials on that same server to authenticate a user.
-2. **Authenticator** - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
+ A typical `create()` call might look like so:
-### Registration
+ ```js
+ let credential = await navigator.credentials.create({
+ publicKey: {
+ challenge: new Uint8Array([117, 61, 252, 231, 191, 241, ...]),
+ rp: { id: "acme.com", name: "ACME Corporation" },
+ user: {
+ id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
+ name: "jamiedoe",
+ displayName: "Jamie Doe"
+ },
+ pubKeyCredParams: [ {type: "public-key", alg: -7} ]
+ }
+ });
+ ```
-A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.
+ The parameters of the `create()` call are passed to the authenticator, along with a SHA-256 hash that is signed to ensure that it isn't tampered with.
-
+3. After the authenticator obtains user consent, it generates a key pair and returns the public key and optional signed attestation to the web app. This is provided when the {{jsxref("Promise")}} returned by the `create()` call fulfills, in the form of a {{domxref("PublicKeyCredential")}} object instance (the {{domxref("PublicKeyCredential.response")}} property contains the attestation information).
-_Figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action._
+4. The web app forwards the {{domxref("PublicKeyCredential")}} to the server, again using an appropriate mechanism.
-First (labeled step 0 in the diagram), the application makes the initial registration request. The protocol and format of this request are outside the scope of the Web Authentication API.
+5. The server stores the public key, coupled with the user identity, to remember the credential for future authentications. During this process, it performs a series of checks to ensure that the registration was complete and not tampered with. These include:
-After this, the registration steps are:
+ 1. Verifying that the challenge is the same as the challenge that was sent.
+ 2. Ensuring that the origin was the origin expected.
+ 3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generated the key par in the first place.
-1. **Server Sends Challenge, User Info, and Relying Party Info** - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be [REST](/en-US/docs/Glossary/REST) over https (probably using [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) or [Fetch](/en-US/docs/Web/API/Fetch_API)), but they could also be [SOAP](/en-US/docs/Glossary/SOAP), [RFC 2549](https://datatracker.ietf.org/doc/html/rfc2549) or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the [create()](/en-US/docs/Web/API/CredentialsContainer/create) call, typically with little or no modification and returns a [Promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. **Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.**
-2. **Browser Calls authenticatorMakeCredential() on Authenticator** - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
-3. **Authenticator Creates New Key Pair and Attestation** - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.
-4. **Authenticator Returns Data to Browser** - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.
-5. **Browser Creates Final Data, Application sends response to Server** - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be base64 encoded or similar).
-6. **Server Validates and Finalizes Registration** - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include:
+> **Warning:** Attestation provides a way for a relying party to determine the provenance of an authenticator. Relying parties should not attempt to maintain allowlists of authenticators.
- 1. Verifying that the challenge is the same as the challenge that was sent
- 2. Ensuring that the origin was the origin expected
- 3. Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of the authenticator
+### Authenticating a user
- A complete list of validation steps [can be found in the Web Authentication API specification](https://w3c.github.io/webauthn/#registering-a-new-credential). Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use — that is, whenever the user desires to use the public key for authentication.
+After a user has registered with WebAuthn, they can authenticate (i.e., login) with the service. The authentication flow looks similar to the registration flow, the main differences being that authentication:
-### Authentication
+1. Doesn't require user or relying party information
+2. Creates an assertion using the previously-generated key pair for the service, rather than the authenticator's key pair.
-After a user has registered with web authentication, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the description of authentication below is a broad overview rather than getting into all the options and features of the Web Authentication API. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .
+A typical authentication flow is as follows:
-
+1. The relying party generates a "challenge" and sends it to the user agent using an appropriate secure mechanism, along with a list of relying party and user credentials. It can also indicate where to look for the credential, e.g., on a local built-in authenticator, or on an external one over USB, BLE, etc.
-_Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action._
+2. The browser asks the authenticator to sign the challenge via a {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} call, which is passed the credentials in a `publicKey` option.
-First (labeled step 0 in the diagram), the application makes the initial authentication request. The protocol and format of this request are outside the scope of the Web Authentication API.
+ A typical `get()` call might look like so:
-After this, the authentication steps are:
+ ```js
+ let credential = await navigator.credentials.get({
+ publicKey: {
+ challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
+ rpId: "acme.com",
+ allowCredentials: [{
+ type: "public-key",
+ id: new Uint8Array([64, 66, 25, 78, 168, 226, 174, ...])
+ }],
+ userVerification: "required",
+ }
+ });
+ ```
-1. **Server Sends Challenge** - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be [REST](/en-US/docs/Glossary/REST) over https (probably using [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) or [Fetch](/en-US/docs/Web/API/Fetch_API)), but they could also be [SOAP](/en-US/docs/Glossary/SOAP), [RFC 2549](https://datatracker.ietf.org/doc/html/rfc2549) or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the [get()](/en-US/docs/Web/API/CredentialsContainer/get) call, typically with little or no modification. **Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.**
-2. **Browser Calls authenticatorGetCredential() on Authenticator** - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
-3. **Authenticator Creates an Assertion** - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
-4. **Authenticator Returns Data to Browser** - The authenticator returns the authenticatorData and assertion signature back to the browser.
-5. **Browser Creates Final Data, Application sends response to Server** - The browser resolves the [Promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
-6. **Server Validates and Finalizes Authentication** - Upon receiving the result of the authentication request, the server performs validation of the response such as:
+ The parameters of the `get()` call are passed to the authenticator to handle the authentication.
+
+3. If the authenticator contains one of the given credentials and is able to successfully sign the challenge, it returns a signed assertion to the web app after receiving user consent. This is provided when the {{jsxref("Promise")}} returned by the `get()` call fulfills, in the form of a {{domxref("PublicKeyCredential")}} object instance (the {{domxref("PublicKeyCredential.response")}} property contains the assertion information).
+
+4. The web app forwards the signed assertion to the relying party server for the relying party to validate. The validation checks include:
1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
3. Checking that the Relying Party ID is the one expected for this service.
- A full list of the [steps for validating an assertion can be found in the Web Authentication API specification](https://w3c.github.io/webauthn/#verifying-assertion). Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the Web Authentication API specification, but one option would be to drop a new cookie for the user session.
+5. Once verified by the server, the authentication flow is considered successful.
+
+## Controlling access to the API
+
+The availability of WebAuthn can be controlled using a [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy), specifying two directives in particular:
+
+- {{httpheader("Permissions-Policy/publickey-credentials-create", "publickey-credentials-create")}}: Controls the availability of {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} with the `publicKey` option.
+- {{httpheader("Permissions-Policy/publickey-credentials-get", "publickey-credentials-get")}}: Controls the availability of {{domxref("CredentialsContainer.get", "navigator.credentials.get()")}} with the `publicKey` option.
+
+Both directives have a default allowlist value of `"self"`, meaning that by default these methods can be used in top-level document contexts. In addition, `get()` can be used in nested browsing contexts loaded from the same origin as the top-most document; `create()` on the other hand cannot be used in {{htmlelement("iframe")}}s.
+
+> **Note:** Where a policy forbids use of these methods, the {{jsxref("Promise", "promises")}} returned by them will reject with a `SecurityError` {{domxref("DOMException")}}.
+
+### Basic access control
+
+If you wish to allow access to a specific subdomain only, you could provide it like this:
+
+```http
+Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
+Permissions-Policy: publickey-credentials-create=("https://subdomain.example.com")
+```
+
+### Allowing embedded `get()` calls in an `
+```
+
+> **Note:** Where a policy forbids use of WebOTP `get()`, {{jsxref("Promise", "promises")}} returned by it will reject with a `SecurityError` {{domxref("DOMException")}}.
## Interfaces
- {{domxref("OTPCredential")}}
- - : Extends {{domxref("Credential")}} and contains the attributes that are returned when a new one-time password is created.
+ - : Returned when a WebOTP `get()` call fulfills; includes a `code` property that contains the retrieved OTP.
+
+## Extensions to other interfaces
+
+- {{domxref("CredentialsContainer.get()")}}, the `otp` option
+ - : Calling `get()` with an `otp` option instructs the user agent to attempt to retrieve an OTP from the underlying system's SMS app.
## Examples
-In this example, when an SMS message arrives, and the user grants permission, an {{domxref("OTPCredential")}} object is returned with a one-time password. This password is then prefilled into the form field, and the form submitted.
+In this example, when an SMS message arrives and the user grants permission, an {{domxref("OTPCredential")}} object is returned with an OTP. This password is then prefilled into the verification form field, and the form is submitted.
+
+[Try this demo using a phone](https://web-otp.glitch.me/).
-[Try the demo using a phone here](https://glitch.com/edit/#!/web-otp?path=views%2Findex.html%3A55%3A8).
+The form field includes an [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute with the value of `one-time-code`. This is not needed for the WebOTP API to work, but it is worth including. As a result, Safari will prompt the user to autofill this field with the OTP when a correctly-formatted SMS is received, even though the WebOTP API isn't fully supported in Safari.
```html
```
+The JavaScript is as follows:
+
```js
+// Detect feature support via OTPCredential availability
if ("OTPCredential" in window) {
window.addEventListener("DOMContentLoaded", (e) => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
+ // Set up an AbortController to use with the OTP request
const ac = new AbortController();
const form = input.closest("form");
if (form) {
+ // Abort the OTP request if the user attempts to submit the form manually
form.addEventListener("submit", (e) => {
ac.abort();
});
}
+ // Request the OTP via get()
navigator.credentials
.get({
otp: { transport: ["sms"] },
signal: ac.signal,
})
.then((otp) => {
+ // When the OTP is received by the app client, enter it into the form
+ // input and submit the form automatically
input.value = otp.code;
if (form) form.submit();
})
@@ -58,11 +156,22 @@ if ("OTPCredential" in window) {
}
```
+Another good use for the {{domxref("AbortController")}} is to cancel the `get()` request after a certain amount of time:
+
+```js
+setTimeout(() => {
+ // abort after 30 seconds
+ ac.abort();
+}, 30 * 1000);
+```
+
+If the user becomes distracted or navigates somewhere else, it is good to cancel the request so that they don't get presented with a permission prompt that is no longer relevant to them.
+
## Specifications
{{Specifications}}
## See also
-- [Verify phone numbers on the web with WebOTP](https://web.dev/web-otp/)
-- [Fill OTP forms within cross-origin iframes with WebOTP API](https://web.dev/web-otp-iframe/)
+- [Verify phone numbers on the web with WebOTP](https://developer.chrome.com/docs/identity/web-apis/web-otp) on developer.chrome.com (2023)
+- [Fill OTP forms within cross-origin iframes with WebOTP API](https://web.dev/articles/web-otp-iframe)
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
index acc6ce0863e846b..2aa96243ae56171 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
@@ -1,7 +1,6 @@
---
title: Creating a peer connection
-slug: >-
- Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/Create_a_peer_connection
+slug: Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/Create_a_peer_connection
page-type: guide
---
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/index.md
index b16653654628f7b..70140d2992e28c2 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/index.md
@@ -22,7 +22,7 @@ In the last article we set up our server, but it doesn't do anything yet because
host: location.hostname,
debug: 1,
path: "/myapp",
- }
+ },
);
```
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
index f0134fe0259457b..18ada05d9362536 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/index.md
@@ -35,7 +35,7 @@ Before you get started, you'll want to make sure you've [installed node](https:/
3. [Create a Peer Connection](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/Create_a_peer_connection)
4. [Creating a Call](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/Creating_a_call)
5. [Answer a Call](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/Answer_a_call)
- 6. [End a Call](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Connect_peers/End_a_call)
+ 6. [End a Call](/en-US/docs/Web/API/WebRTC_API/build_a_phone_with_peerjs/connect_peers/End_a_call)
3. [Deployment and Further Reading](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Deployment_and_further_reading)
diff --git a/files/en-us/web/api/webrtc_api/connectivity/webrtc-complete-diagram.png b/files/en-us/web/api/webrtc_api/connectivity/webrtc-complete-diagram.png
index b1de07aaa89d700..d5d841f0e470d82 100644
Binary files a/files/en-us/web/api/webrtc_api/connectivity/webrtc-complete-diagram.png and b/files/en-us/web/api/webrtc_api/connectivity/webrtc-complete-diagram.png differ
diff --git a/files/en-us/web/api/webrtc_api/high-level_guide/index.md b/files/en-us/web/api/webrtc_api/high-level_guide/index.md
deleted file mode 100644
index 7bcb360fd309683..000000000000000
--- a/files/en-us/web/api/webrtc_api/high-level_guide/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: High-level guides
-slug: Web/API/WebRTC_API/High-level_guide
-page-type: guide
----
-
-[WebRTC](/en-US/docs/Web/API/WebRTC_API) (Web Real-Time Communications) is a broad, multi-component system for setting up and operating complex audio, video, and data channels across networks among two or more peers on the Web. The high-level guides listed below introduce WebRTC technology from a top-down perspective, describing the overall architecture, the life cycle of a WebRTC connection, and basic security and technological issues you might run into as you explore and build Web content or apps using the WebRTC API.
-
-In addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know which parts of the overall suite of WebRTC features can be safely used given your target audience.
-
-{{LandingPageListSubpages}}
-
-When you're ready to explore WebRTC in more depth, be sure to take a look at our [Low-level guide to WebRTC](/en-US/docs/Web/API/WebRTC_API/Low-level_guide).
diff --git a/files/en-us/web/api/webrtc_api/index.md b/files/en-us/web/api/webrtc_api/index.md
index a33af9ed90ddf9c..25b4d23ce4e144b 100644
--- a/files/en-us/web/api/webrtc_api/index.md
+++ b/files/en-us/web/api/webrtc_api/index.md
@@ -47,7 +47,7 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W
- {{DOMxRef("RTCSessionDescription")}}
- : Represents the parameters of a session. Each `RTCSessionDescription` consists of a description {{DOMxRef("RTCSessionDescription.type", "type")}} indicating which part of the offer/answer negotiation process it describes and of the {{Glossary("SDP")}} descriptor of the session.
- {{DOMxRef("RTCStatsReport")}}
- - : Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{DOMxRef("RTCPeerConnection.getStats()")}}. Details about using WebRTC statistics can be found in [WebRTC Statistics API](/en-US/docs/Web/API/WebRTC_Statistics_API).
+ - : Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{DOMxRef("RTCPeerConnection.getStats()")}}.
- {{DOMxRef("RTCIceCandidate")}}
- : Represents a candidate Interactive Connectivity Establishment ({{Glossary("ICE")}}) server for establishing an {{DOMxRef("RTCPeerConnection")}}.
- {{DOMxRef("RTCIceTransport")}}
@@ -63,13 +63,6 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W
- {{DOMxRef("RTCSctpTransport")}}
- : Provides information which describes a Stream Control Transmission Protocol (**{{Glossary("SCTP")}}**) transport and also provides a way to access the underlying Datagram Transport Layer Security (**{{Glossary("DTLS")}}**) transport over which SCTP packets for all of an [`RTCPeerConnection`](/en-US/docs/Web/API/RTCPeerConnection)'s data channels are sent and received.
-#### Dictionaries
-
-- {{DOMxRef("RTCIceServer")}}
- - : Defines how to connect to a single {{Glossary("ICE")}} server (such as a {{Glossary("STUN")}} or {{Glossary("TURN")}} server).
-- {{DOMxRef("RTCRtpContributingSource")}}
- - : Contains information about a given contributing source (CSRC) including the most recent time a packet that the source contributed was played out.
-
#### Events
- {{domxref("RTCDataChannel.bufferedamountlow_event", "bufferedamountlow")}}
@@ -114,6 +107,8 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W
- : The state of the `RTCIceTransport` has changed.
- {{domxref("RTCSctpTransport.statechange_event", "statechange")}}
- : The state of the `RTCSctpTransport` has changed.
+- {{DOMxRef("DedicatedWorkerGlobalScope.rtctransform_event", "rtctransform")}}
+ - : An encoded video or audio frame is ready to process using a transform stream in a worker.
#### Types
@@ -135,7 +130,7 @@ These APIs are used to manage user identity and security, in order to authentica
### Telephony
-These interfaces and events are related to interactivity with Public-Switched Telephone Networks (PTSNs). They're primarily used to send tone dialing sounds—or packets representing those tones—across the network to the remote peer.
+These interfaces and events are related to interactivity with Public-Switched Telephone Networks (PSTNs). They're primarily used to send tone dialing sounds—or packets representing those tones—across the network to the remote peer.
#### Interfaces
@@ -149,6 +144,33 @@ These interfaces and events are related to interactivity with Public-Switched Te
- {{domxref("RTCDTMFSender.tonechange_event", "tonechange")}}
- : Either a new {{Glossary("DTMF")}} tone has begun to play over the connection, or the last tone in the `RTCDTMFSender`'s {{domxref("RTCDTMFSender.toneBuffer", "toneBuffer")}} has been sent and the buffer is now empty. The event's type is {{domxref("RTCDTMFToneChangeEvent")}}.
+### Encoded Transforms
+
+These interfaces and events are used to process incoming and outgoing encoded video and audio frames using a transform stream running in a worker.
+
+#### Interfaces
+
+- {{DOMxRef("RTCRtpScriptTransform")}}
+ - : An interface for inserting transform stream(s) running in a worker into the RTC pipeline.
+- {{DOMxRef("RTCRtpScriptTransformer")}}
+ - : The worker-side counterpart of an `RTCRtpScriptTransform` that passes options from the main thread, along with a readable stream and writeable stream that can be used to pipe encoded frames through a {{DOMxRef("TransformStream")}}.
+- {{DOMxRef("RTCEncodedVideoFrame")}}
+ - : Represents an encoded video frame to be transformed in the RTC pipeline.
+- {{DOMxRef("RTCEncodedAudioFrame")}}
+ - : Represents an encoded audio frame to be transformed in the RTC pipeline.
+
+#### Properties
+
+- {{DOMxRef("RTCRtpReceiver.transform")}}
+ - : A property used to insert a transform stream into the receiver pipeline for incoming encoded video and audio frames.
+- {{DOMxRef("RTCRtpSender.transform")}}
+ - : A property used to insert a transform stream into the sender pipeline for outgoing encoded video and audio frames.
+
+#### Events
+
+- {{DOMxRef("DedicatedWorkerGlobalScope.rtctransform_event", "rtctransform")}}
+ - : An RTC transform is ready to run in the worker, or an encoded video or audio frame is ready to process.
+
## Guides
- [Introduction to WebRTC protocols](/en-US/docs/Web/API/WebRTC_API/Protocols)
@@ -167,10 +189,12 @@ These interfaces and events are related to interactivity with Public-Switched Te
- : This guide covers how you can use a peer connection and an associated {{DOMxRef("RTCDataChannel")}} to exchange arbitrary data between two peers.
- [Using DTMF with WebRTC](/en-US/docs/Web/API/WebRTC_API/Using_DTMF)
- : WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{DOMxRef("RTCDTMFSender")}} interface. This guide shows how to do so.
+- [Using WebRTC Encoded Transforms](/en-US/docs/Web/API/WebRTC_API/Using_Encoded_Transforms)
+ - : This guide shows how a web application can modify incoming and outgoing WebRTC encoded video and audio frames, using a {{DOMxRef("TransformStream")}} running into a worker.
## Tutorials
-- [Improving compatibility using WebRTC adapter.js](/en-US/docs/Web/API/WebRTC_API/adapter.js)
+- [Improving compatibility using WebRTC adapter.js](#interoperability)
- : The WebRTC organization [provides on GitHub the WebRTC adapter](https://github.com/webrtc/adapter/) to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.
- [A simple RTCDataChannel sample](/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
- : The {{DOMxRef("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the [WebSocket API](/en-US/docs/Web/API/WebSockets_API), so that the same programming model can be used for each.
@@ -212,4 +236,3 @@ These interfaces and events are related to interactivity with Public-Switched Te
- [Peering Through the WebRTC Fog with SocketPeer](https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/)
- [Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics](https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/)
- [Web media technologies](/en-US/docs/Web/Media)
-- [WebRTC Statistics API](/en-US/docs/Web/API/WebRTC_Statistics_API)
diff --git a/files/en-us/web/api/webrtc_api/protocols/index.md b/files/en-us/web/api/webrtc_api/protocols/index.md
index 203155151eb45b7..b94415c64a2e475 100644
--- a/files/en-us/web/api/webrtc_api/protocols/index.md
+++ b/files/en-us/web/api/webrtc_api/protocols/index.md
@@ -50,5 +50,5 @@ SDP consists of one or more lines of UTF-8 text, each beginning with a one-chara
To learn more about SDP, see the following useful resources:
-- Specification: {{RFC(4566, "SDP: Session Description Protocol")}}
+- Specification: {{RFC(8866, "SDP: Session Description Protocol")}}
- [IANA registry of SDP parameters](https://www.iana.org/assignments/sip-parameters/sip-parameters.xhtml)
diff --git a/files/en-us/web/api/webrtc_api/session_lifetime/index.md b/files/en-us/web/api/webrtc_api/session_lifetime/index.md
index 4c88b8ae3a92a2f..aaf6172e8e34d23 100644
--- a/files/en-us/web/api/webrtc_api/session_lifetime/index.md
+++ b/files/en-us/web/api/webrtc_api/session_lifetime/index.md
@@ -30,7 +30,7 @@ Why, you may wonder, is something fundamental to the process of establishing a W
In particular, if a developer already has a method in place for connecting two devices, it doesn't make sense for them to have to use another one, defined by the specification, just for WebRTC. Since WebRTC doesn't live in a vacuum, there is likely other connectivity in play, so it makes sense to avoid having to add additional connection channels for signaling if an existing one can be used.
-In order to exchange signaling information, you can choose to send JSON objects back and forth over a WebSocket connection, or you could use XMPP or SIP over an appropriate channel, or you could use {{domxref("XMLHttpRequest")}} over {{Glossary("HTTPS")}} with polling, or any other combination of technologies you can come up with. You could even use email as the signaling channel.
+In order to exchange signaling information, you can choose to send JSON objects back and forth over a WebSocket connection, or you could use XMPP or SIP over an appropriate channel, or you could use {{domxref("fetch()")}} over {{Glossary("HTTPS")}} with polling, or any other combination of technologies you can come up with. You could even use email as the signaling channel.
It's also worth noting that the channel for performing signaling doesn't even need to be over the network. One peer can output a data object that can be printed out, physically carried (on foot or by carrier pigeon) to another device, entered into that device, and a response then output by that device to be returned on foot, and so forth, until the WebRTC peer connection is open. It'd be very high latency but it could be done.
diff --git a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
index 725e38854531547..a52863ce5cee369 100644
--- a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
+++ b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
@@ -18,7 +18,7 @@ In this article, we will further enhance the [WebSocket chat](https://webrtc-fro
Establishing a WebRTC connection between two devices requires the use of a **signaling server** to resolve how to connect them over the internet. A signaling server's job is to serve as an intermediary to let two peers find and establish a connection while minimizing exposure of potentially private information as much as possible. How do we create this server and how does the signaling process actually work?
-First we need the signaling server itself. WebRTC doesn't specify a transport mechanism for the signaling information. You can use anything you like, from [WebSocket](/en-US/docs/Web/API/WebSockets_API) to {{domxref("XMLHttpRequest")}} to carrier pigeons to exchange the signaling information between the two peers.
+First we need the signaling server itself. WebRTC doesn't specify a transport mechanism for the signaling information. You can use anything you like, from [WebSocket](/en-US/docs/Web/API/WebSockets_API) to {{domxref("fetch()")}} to carrier pigeons to exchange the signaling information between the two peers.
It's important to note that the server doesn't need to understand or interpret the signaling data content. Although it's {{Glossary("SDP")}}, even this doesn't matter so much: the content of the message going through the signaling server is, in effect, a black box. What does matter is when the {{Glossary("ICE")}} subsystem instructs you to send signaling data to the other peer, you do so, and the other peer knows how to receive this information and deliver it to its own ICE subsystem. All you have to do is channel the information back and forth. The contents don't matter at all to the signaling server.
@@ -233,7 +233,7 @@ function invite(evt) {
if (clickedUsername === myUsername) {
alert(
- "I'm afraid I can't let you talk to yourself. That would be weird."
+ "I'm afraid I can't let you talk to yourself. That would be weird.",
);
return;
}
@@ -282,7 +282,7 @@ function handleGetUserMediaError(e) {
case "NotFoundError":
alert(
"Unable to open your call because no camera and/or microphone" +
- "were found."
+ "were found.",
);
break;
case "SecurityError":
@@ -450,6 +450,16 @@ Any errors are caught and passed to `handleGetUserMediaError()`, described in [H
> **Note:** As is the case with the caller, once the `setLocalDescription()` fulfillment handler has run, the browser begins firing {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} events that the callee must handle, one for each candidate that needs to be transmitted to the remote peer.
+Finally, the caller handles the answer message it received by creating a new {{domxref("RTCSessionDescription")}} object representing the callee's session description and passing it into
+{{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}.
+
+```js
+function handleVideoAnswerMsg(msg) {
+ const desc = new RTCSessionDescription(msg.sdp);
+ myPeerConnection.setRemoteDescription(desc).catch(reportError);
+}
+```
+
##### Sending ICE candidates
The ICE negotiation process involves each peer sending candidates to the other, repeatedly, until it runs out of potential ways it can support the `RTCPeerConnection`'s media transport needs. Since ICE doesn't know about your signaling server, your code handles transmission of each candidate in your handler for the {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} event.
@@ -608,11 +618,11 @@ After pulling references to the two {{HTMLElement("video")}} elements, we check
Then for both the incoming and outgoing {{HTMLElement("video")}} elements, we remove their [`src`](/en-US/docs/Web/HTML/Element/video#src) and [`srcObject`](/en-US/docs/Web/HTML/Element/video#srcobject) attributes using their {{domxref("Element.removeAttribute", "removeAttribute()")}} methods. This completes the disassociation of the streams from the video elements.
-Finally, we set the {{domxref("HTMLElement.disabled", "disabled")}} property to `true` on the "Hang Up" button, making it unclickable while there is no call underway; then we set `targetUsername` to `null` since we're no longer talking to anyone. This allows the user to call another user, or to receive an incoming call.
+Finally, we set the {{domxref("HTMLButtonElement.disabled", "disabled")}} property to `true` on the "Hang Up" button, making it unclickable while there is no call underway; then we set `targetUsername` to `null` since we're no longer talking to anyone. This allows the user to call another user, or to receive an incoming call.
#### Dealing with state changes
-There are a number of additional events you can set listeners for which notifying your code of a variety of state changes. We use three of them: {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}, {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}, and {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}.
+There are a number of additional events for which you can set listeners to notify your code of a variety of state changes. We use three of them: {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}, {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}, and {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}.
##### ICE connection state
diff --git a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
index 800859de685c3ad..934684c4352e269 100644
--- a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
+++ b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
@@ -93,7 +93,7 @@ function startup() {
}
```
-This is quite straightforward. We declare variables and grab references to all the page elements we'll need to access, then set {{domxref("EventListener", "event listeners")}} on the three buttons.
+This is quite straightforward. We declare variables and grab references to all the page elements we'll need to access, then set {{domxref("EventTarget/addEventListener", "event listeners")}} on the three buttons.
### Establishing a connection
@@ -151,12 +151,12 @@ localConnection
.createOffer()
.then((offer) => localConnection.setLocalDescription(offer))
.then(() =>
- remoteConnection.setRemoteDescription(localConnection.localDescription)
+ remoteConnection.setRemoteDescription(localConnection.localDescription),
)
.then(() => remoteConnection.createAnswer())
.then((answer) => remoteConnection.setLocalDescription(answer))
.then(() =>
- localConnection.setRemoteDescription(remoteConnection.localDescription)
+ localConnection.setRemoteDescription(remoteConnection.localDescription),
)
.catch(handleCreateDescriptionError);
```
@@ -249,7 +249,7 @@ Our example's remote peer, on the other hand, ignores the status change events,
function handleReceiveChannelStatusChange(event) {
if (receiveChannel) {
console.log(
- `Receive channel's status has changed to ${receiveChannel.readyState}`
+ `Receive channel's status has changed to ${receiveChannel.readyState}`,
);
}
}
diff --git a/files/en-us/web/api/webrtc_api/using_data_channels/index.md b/files/en-us/web/api/webrtc_api/using_data_channels/index.md
index 6d73824c92cb2ee..8b7c98a75f48aa2 100644
--- a/files/en-us/web/api/webrtc_api/using_data_channels/index.md
+++ b/files/en-us/web/api/webrtc_api/using_data_channels/index.md
@@ -69,15 +69,15 @@ This can complicate things, since you don't necessarily know what the size limit
When two users running Firefox are communicating on a data channel, the message size limit is much larger than when Firefox and Chrome are communicating because Firefox implements a now deprecated technique for sending large messages in multiple SCTP messages, which Chrome does not. Chrome will instead see a series of messages that it believes are complete, and will deliver them to the receiving `RTCDataChannel` as multiple messages.
-Messages smaller than 16kiB can be sent without concern, as all major user agents handle them the same way. Beyond that, things get more complicated.
+Messages smaller than 16 KiB can be sent without concern, as all major user agents handle them the same way. Beyond that, things get more complicated.
### Concerns with large messages
-Currently, it's not practical to use `RTCDataChannel` for messages larger than 64kiB (16kiB if you want to support cross-browser exchange of data). The problem arises from the fact that SCTP—the protocol used for sending and receiving data on an `RTCDataChannel`—was originally designed for use as a signaling protocol. It was expected that messages would be relatively small. Support for messages larger than the network layer's [MTU](https://en.wikipedia.org/wiki/Maximum_transmission_unit) was added almost as an afterthought, in case signaling messages needed to be larger than the MTU. This feature requires that each piece of the message have consecutive sequence numbers, so they have to be transmitted one after another, without any other data interleaved between them.
+Currently, it's not practical to use `RTCDataChannel` for messages larger than 64 KiB (16 KiB if you want to support cross-browser exchange of data). The problem arises from the fact that SCTP—the protocol used for sending and receiving data on an `RTCDataChannel`—was originally designed for use as a signaling protocol. It was expected that messages would be relatively small. Support for messages larger than the network layer's [MTU](https://en.wikipedia.org/wiki/Maximum_transmission_unit) was added almost as an afterthought, in case signaling messages needed to be larger than the MTU. This feature requires that each piece of the message have consecutive sequence numbers, so they have to be transmitted one after another, without any other data interleaved between them.
This eventually became a problem. Over time, various applications (including those implementing WebRTC) began to use SCTP to transmit larger and larger messages. Eventually it was realized that when the messages become too large, it's possible for the transmission of a large message to block all other data transfers on that data channel—including critical signaling messages.
-This will become an issue when browsers properly support the current standard for supporting larger messages—the end-of-record (EOR) flag that indicates when a message is the last one in a series that should be treated as a single payload. This is implemented in Firefox 57, but is not yet implemented in Chrome (see [Chromium Bug 7774](https://bugs.chromium.org/p/webrtc/issues/detail?id=7774)). With EOR support in place, `RTCDataChannel` payloads can be much larger (officially up to 256kiB, but Firefox's implementation caps them at a whopping 1GiB). Even at 256kiB, that's large enough to cause noticeable delays in handling urgent traffic. If you go even larger, the delays can become untenable unless you are certain of your operational conditions.
+This will become an issue when browsers properly support the current standard for supporting larger messages—the end-of-record (EOR) flag that indicates when a message is the last one in a series that should be treated as a single payload. This is implemented in Firefox 57, but is not yet implemented in Chrome (see [Chromium Bug 7774](https://bugs.chromium.org/p/webrtc/issues/detail?id=7774)). With EOR support in place, `RTCDataChannel` payloads can be much larger (officially up to 256 KiB, but Firefox's implementation caps them at a whopping 1 GiB). Even at 256 KiB, that's large enough to cause noticeable delays in handling urgent traffic. If you go even larger, the delays can become untenable unless you are certain of your operational conditions.
In order to resolve this issue, a new system of **stream schedulers** (usually referred to as the "SCTP ndata specification") has been designed to make it possible to interleave messages sent on different streams, including streams used to implement WebRTC data channels. This [proposal](https://datatracker.ietf.org/doc/html/draft-ietf-tsvwg-sctp-ndata) is still in IETF draft form, but once implemented, it will make it possible to send messages with essentially no size limitations, since the SCTP layer will automatically interleave the underlying sub-messages to ensure that every channel's data has the opportunity to get through.
diff --git a/files/en-us/web/api/webrtc_api/using_dtmf/index.md b/files/en-us/web/api/webrtc_api/using_dtmf/index.md
index 996c67b8259f87f..6534be8406630ea 100644
--- a/files/en-us/web/api/webrtc_api/using_dtmf/index.md
+++ b/files/en-us/web/api/webrtc_api/using_dtmf/index.md
@@ -97,7 +97,7 @@ These are, in order:
- `hasAddTrack`
- : Because some browsers have not yet implemented {{domxref("RTCPeerConnection.addTrack()")}}, therefore requiring the use of the obsolete {{domxref("RTCPeerConnection.addStream", "addStream()")}} method, we use this Boolean to determine whether or not the user agent supports `addTrack()`; if it doesn't, we'll fall back to `addStream()`. This gets figured out in `connectAndDial()`, as shown in [Starting the connection process](#starting_the_connection_process).
- `mediaConstraints`
- - : An object conforming to the {{domxref("MediaConstraints")}} dictionary specifying the constraints to use when starting the connection. We want an audio-only connection, so `video` is `false`, while `audio` is `true`.
+ - : An object specifying the constraints to use when starting the connection. We want an audio-only connection, so `video` is `false`, while `audio` is `true`.
- `offerOptions`
- : An object providing options to specify when calling {{domxref("RTCPeerConnection.createOffer()")}}. In this case, we state that we want to receive audio but not video.
- `dialButton` and `logElement`
@@ -175,7 +175,7 @@ function gotStream(stream) {
} else {
log(
"Your browser doesn't support RTCPeerConnection.addTrack(). Falling " +
- "back to the
deprecated addStream() method…"
+ "back to the
deprecated addStream() method…",
);
callerPC.addStream(stream);
}
@@ -186,7 +186,7 @@ function gotStream(stream) {
log(
"Your browser doesn't support RTCPeerConnection.getSenders(), so " +
"falling back to use
deprecated createDTMFSender() " +
- "instead."
+ "instead.",
);
dtmfSender = callerPC.createDTMFSender(audioTracks[0]);
}
@@ -238,7 +238,7 @@ The [`tonechange`](/en-US/docs/Web/API/RTCDTMFSender/tonechange_event) event is
In this example, we log to the screen which tone just finished playing. In a more advanced application, you might update the user interface, for example, to indicate which note is currently playing.
-On the other hand, if the tone buffer is empty, our example is designed to disconnect the call. This is done by stopping each stream on both the caller and the receiver by iterating over each `RTCPeerConnection`'s track list (as returned by its {{domxref("RTCPeerConnection.getTracks", "getTracks()")}} method) and calling each track's {{domxref("MediaStreamTrack.stop", "stop()")}} method.
+On the other hand, if the tone buffer is empty, our example is designed to disconnect the call. This is done by stopping each stream on both the caller and the receiver by iterating over each `RTCPeerConnection`'s track list (as returned by its {{domxref("MediaStream.getTracks", "getTracks()")}} method) and calling each track's {{domxref("MediaStreamTrack.stop", "stop()")}} method.
Once both the caller's and the receiver's media tracks are all stopped, we pause the {{HTMLElement("audio")}} element and set its {{domxref("HTMLMediaElement.srcObject", "srcObject")}} to `null`. This detaches the audio stream from the {{HTMLElement("audio")}} element.
@@ -299,7 +299,7 @@ function handleCallerNegotiationNeeded() {
})
.then(() => {
log(
- "Setting receiver's remote description to the same as caller's local"
+ "Setting receiver's remote description to the same as caller's local",
);
return receiverPC.setRemoteDescription(callerPC.localDescription);
})
@@ -369,7 +369,7 @@ If `event.candidate` is `null`, that indicates that there are no more candidates
#### Adding media to the receiver
-When the receiver begins to receive media, an event is delivered to the receiver's {{domxref("RTCPeerConnection")}}, `receiverPC`. As explained in [Starting the connection process](#starting_the_connection_process), the current WebRTC specification uses the {{domxref("RTCPeerConnection.track_event", "track")}} event for this, but some browsers haven't been updated to support this yet, so we also need to handle the {{domxref("RTCPeerConnection/addstream_event", "addstream")}} event. The `handleReceiverTrackEvent()` and `handleReceiverAddStreamEvent()` methods, shown below, handle these.
+When the receiver begins to receive media, an event is delivered to the receiver's {{domxref("RTCPeerConnection")}}, `receiverPC`. As explained in [Starting the connection process](#starting_the_connection_process), the current WebRTC specification uses the {{domxref("RTCPeerConnection.track_event", "track")}} event for this. Since some browsers haven't been updated to support this yet, we also need to handle the {{domxref("RTCPeerConnection/addstream_event", "addstream")}} event. This is demonstrated in the `handleReceiverTrackEvent()` and `handleReceiverAddStreamEvent()` methods below.
```js
function handleReceiverTrackEvent(event) {
@@ -383,7 +383,7 @@ function handleReceiverAddStreamEvent(event) {
The `track` event includes a {{domxref("RTCTrackEvent.streams", "streams")}} property containing an array of the streams the track is a member of (one track can be part of many streams). We take the first stream and attach it to the {{HTMLElement("audio")}} element.
-The `addstream` event includes a {{domxref("RTCTrackEvent.stream", "stream")}} property specifying a single stream added to the track. We attach it to the `
` element.
+The `addstream` event includes a {{domxref("MediaStreamEvent.stream", "stream")}} property specifying a single stream added to the track. We attach it to the `` element.
#### Logging
@@ -397,11 +397,11 @@ function log(msg) {
### Result
-You can try this example here. When you click the "Dial" button, you should see a series of logging messages output, then the dialing will begin. If your browser plays the tones audibly as part of its user experience, you should hear them as they're transmitted.
+You can try this example here. When you click the "Dial" button, you should see a series of logging messages output; then the dialing will begin. If your browser plays the tones audibly as part of its user experience, you should hear them as they're transmitted.
{{ EmbedLiveSample('Simple_example', 600, 500, "", "", "", "microphone") }}
-Once transmission of the tones is complete, the connection is closed. You can click "Dial" again to reconnect and send the tones again.
+Once transmission of the tones is complete, the connection is closed. You can click "Dial" again to reconnect and send the tones.
## See also
diff --git a/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md
new file mode 100644
index 000000000000000..114a9b6e1cafd76
--- /dev/null
+++ b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md
@@ -0,0 +1,293 @@
+---
+title: Using WebRTC Encoded Transforms
+slug: Web/API/WebRTC_API/Using_Encoded_Transforms
+page-type: guide
+browser-compat: api.RTCRtpReceiver.transform
+---
+
+{{DefaultAPISidebar("WebRTC")}}
+
+WebRTC Encoded Transforms provide a mechanism to inject a high performance [Stream API](/en-US/docs/Web/API/Streams_API) for modifying encoded video and audio frame into the incoming and outgoing WebRTC pipelines.
+This enables use cases such as end-to-end encryption of encoded frames by third-party code.
+
+The API defines both main thread and worker side objects.
+The main-thread interface is a {{domxref("RTCRtpScriptTransform")}} instance, which on construction specifies the {{domxref("Worker")}} that is to implement the transformer code.
+The transform running in the worker is inserted into the incoming or outgoing WebRTC pipeline by adding the `RTCRtpScriptTransform` to {{domxref("RTCRtpReceiver.transform")}} or {{domxref("RTCRtpSender.transform")}}, respectively.
+
+A counterpart {{domxref("RTCRtpScriptTransformer")}} object is created in the worker thread, which has a {{domxref("ReadableStream")}} `readable` property, a {{domxref("WritableStream")}} `writable` property, and an `options` object passed from the associated {{domxref("RTCRtpScriptTransform")}} constructor.
+Encoded video frames ({{domxref("RTCEncodedVideoFrame")}}) or audio frames ({{domxref("RTCEncodedAudioFrame")}}) from the WebRTC pipeline are enqueued on `readable` for processing.
+
+The `RTCRtpScriptTransformer` is made available to code as the `transformer` property of the {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} event, which is fired at the worker global scope whenever an encoded frame is enqueued for processing (and initially on construction of the corresponding {{domxref("RTCRtpScriptTransform")}}).
+The worker code must implement a handler for the event that reads encoded frames from `transformer.readable`, modifies them as needed, and writes them to `transformer.writable` in the same order and without any duplication.
+
+While the interface doesn't place any other restrictions on the implementation, a natural way to transform the frames is to create a [pipe chain](/en-US/docs/Web/API/Streams_API/Concepts#pipe_chains) that sends frames enqueued on the `event.transformer.readable` stream through an {{DOMxRef("TransformStream")}} to the `event.transformer.writable` stream.
+We can use the `event.transformer.options` property to configure any transform code that depends on whether the transform is enqueuing incoming frames from the packetizer or outgoing frames from a codec.
+
+The {{domxref("RTCRtpScriptTransformer")}} interface also provides methods that can be used when sending encoded video to get the codec to generate a "key" frame, and when receiving video to request that a new key frame be sent.
+These may be useful to allow a recipient to start viewing the video more quickly, if (for example) they join a conference call when delta frames are being sent.
+
+The following examples provide more specific examples of how to use the framework using a {{DOMxRef("TransformStream")}} based implementation.
+
+## Test if encoded transforms are supported
+
+Test if [encoded transforms are supported](#browser_compatibility) by checking for the existence of {{domxref("RTCRtpSender.transform")}} (or {{domxref("RTCRtpReceiver.transform")}}):
+
+```js
+const supportsEncodedTransforms =
+ window.RTCRtpSender && "transform" in RTCRtpSender.prototype;
+```
+
+## Adding a transform for outgoing frames
+
+A transform running in a worker is inserted into the outgoing WebRTC pipeline by assigning its corresponding `RTCRtpScriptTransform` to the {{domxref("RTCRtpSender.transform")}} for an outgong track.
+
+This example shows how you might stream video from a user's webcam over WebRTC, adding a WebRTC encoded transform to modify the outgoing streams.
+The code assumes that there is an {{domxref("RTCPeerConnection")}} called `peerConnection` that is already connected to a remote peer.
+
+First we get a {{domxref("MediaStreamTrack")}}, using {{domxref("MediaDevices/getUserMedia", "getUserMedia()")}} to get a video {{domxref("MediaStream")}} from a media device, and then the {{domxref("MediaStream.getTracks()")}} method to get the first {{domxref("MediaStreamTrack")}} in the stream.
+
+The track is added to the peer connection using {{domxref("RTCPeerConnection/addTrack()", "addTrack()")}}, which starts streaming it to the remote peer.
+The `addTrack()` method returns the {{domxref("RTCRtpSender")}} that is being used to send the track.
+
+```js
+// Get Video stream and MediaTrack
+const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+const [track] = stream.getTracks();
+const videoSender = peerConnection.addTrack(track, stream);
+```
+
+An `RTCRtpScriptTransform` is then constructed taking a worker script, which defines the transform, and an optional object that can be used to pass arbitrary messages to the worker (in this case we've used a `name` property with value "senderTransform" to tell the worker that this transform will be added to the outbound stream).
+We add the transform to the outgoing pipeline by assigning it to the {{domxref("RTCRtpSender.transform")}} property.
+
+```js
+// Create a worker containing a TransformStream
+const worker = new Worker("worker.js");
+videoSender.transform = new RTCRtpScriptTransform(worker, {
+ name: "senderTransform",
+});
+```
+
+The [Using separate sender and receiver transforms](#using_separate_sender_and_receiver_transforms) section below shows how the `name` might be used in a worker.
+
+Note that you can add the transform at any time, but by adding it immediately after calling `addTrack()` the transform will get the first encoded frame that is sent.
+
+## Adding a transform for incoming frames
+
+A transform running in a worker is inserted into the incoming WebRTC pipeline by assigning its corresponding `RTCRtpScriptTransform` to the {{domxref("RTCRtpReceiver.transform")}} for an incoming track.
+
+This example shows how you add a transform to modify an incoming stream.
+The code assumes that there is an {{domxref("RTCPeerConnection")}} called `peerConnection` that is already connected to a remote peer.
+
+First we add an `RTCPeerConnection` [`track` event](/en-US/docs/Web/API/RTCPeerConnection/track_event) handler to catch the event when the peer starts receiving a new track.
+Within the handler we construct an `RTCRtpScriptTransform` and add it to `event.receiver.transform` (`event.receiver` is a {{domxref("RTCRtpReceiver")}}).
+As in the previous section, the constructor takes an object with `name` property, but here we use `receiverTransform` as the value to tell the worker that frames are incoming.
+
+```js
+peerConnection.ontrack = (event) => {
+ const worker = new Worker("worker.js");
+ event.receiver.transform = new RTCRtpScriptTransform(worker, {
+ name: "receiverTransform",
+ });
+ received_video.srcObject = event.streams[0];
+};
+```
+
+Note again that you can add the transform stream at any time.
+However by adding it in the `track` event handler ensures that the transform stream will get the first encoded frame for the track.
+
+## Worker implementation
+
+The worker script must implement a handler for the {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} event, creating a [pipe chain](/en-US/docs/Web/API/Streams_API/Concepts#pipe_chains) that pipes the `event.transformer.readable` ({{DOMxRef("ReadableStream")}}) stream through a {{DOMxRef("TransformStream")}} to the `event.transformer.writable` ({{DOMxRef("WritableStream")}}) stream.
+
+A worker might support transforming incoming or outgoing encoded frames, or both, and the transform might be hard coded, or configured at run-time using information passed from the web application.
+
+### Basic WebRTC Encoded Transform
+
+The example below shows a basic WebRTC Encoded transform, which negates all bits in queued frames.
+It does not use or need options passed in from the main thread because the same algorithm can be used in the sender pipeline to negate the bits and in the receiver pipeline to restore them.
+
+The code implements an event handler for the `rtctransform` event.
+This constructs a {{DOMxRef("TransformStream")}}, then pipes through it using {{domxref("ReadableStream.pipeThrough()")}}, and finally pipes to `event.transformer.writable` using {{domxref("ReadableStream.pipeTo()")}}.
+
+```js
+addEventListener("rtctransform", (event) => {
+ const transform = new TransformStream({
+ start() {}, // Called on startup.
+ flush() {}, // Called when the stream is about to be closed.
+ async transform(encodedFrame, controller) {
+ // Reconstruct the original frame.
+ const view = new DataView(encodedFrame.data);
+
+ // Construct a new buffer
+ const newData = new ArrayBuffer(encodedFrame.data.byteLength);
+ const newView = new DataView(newData);
+
+ // Negate all bits in the incoming frame
+ for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
+ newView.setInt8(i, ~view.getInt8(i));
+ }
+
+ encodedFrame.data = newData;
+ controller.enqueue(encodedFrame);
+ },
+ });
+ event.transformer.readable
+ .pipeThrough(transform)
+ .pipeTo(event.transformer.writable);
+});
+```
+
+The implementation of the WebRTC encoded transform is similar to a "generic" {{DOMxRef("TransformStream")}}, but with some important differences.
+Like the generic stream, its [constructor](/en-US/docs/Web/API/TransformStream/TransformStream#parameters) takes an object that defines an _optional_ [`start()`](/en-US/docs/Web/API/TransformStream/TransformStream#startcontroller) method, which is called on construction, [`flush()`](/en-US/docs/Web/API/TransformStream/TransformStream#flushcontroller) method, which is called as the stream is about to be closed, and [`transform()`](/en-US/docs/Web/API/TransformStream/TransformStream#transformchunk_controller) method, which is called every time there is a chunk to be processed.
+Unlike the generic constructor any `writableStrategy` or `readableStrategy` properties that are passed in the constructor object are ignored, and the queuing strategy is entirely managed by the user agent.
+
+The `transform()` method also differs in that it is passed either an {{domxref("RTCEncodedVideoFrame")}} or {{domxref("RTCEncodedAudioFrame")}} rather than a generic "chunk".
+The actual code shown here for the method isn't notable other than it demonstrates how to convert the frame to a form where you can modify it and enqueue it afterwards on the stream.
+
+### Using separate sender and receiver transforms
+
+The previous example works if the transform function is the same when sending and receiving, but in many cases the algorithms will be different.
+You could use separate worker scripts for the sender and receiver, or handle both cases in one worker as shown below.
+
+If the worker is used for both sender and receiver, it needs to know whether the current encoded frame is outgoing from a codec, or incoming from the packetizer.
+This information can be specified using the second option in the [`RTCRtpScriptTransform` constructor](/en-US/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform).
+For example, we can define a separate `RTCRtpScriptTransform` for the sender and receiver, passing the same worker, and an options object with property `name` that indicates whether the transform is used in the sender or receiver (as shown in previous sections above).
+The information is then available in the worker in `event.transformer.options`.
+
+In this example we implement the `onrtctransform` event handler on the global dedicated worker scope object.
+The value of the `name` property is used to determine which `TransformStream` to construct (the actual constructor methods are not shown).
+
+```js
+// Code to instantiate transform and attach them to sender/receiver pipelines.
+onrtctransform = (event) => {
+ let transform;
+ if (event.transformer.options.name == "senderTransform")
+ transform = createSenderTransform(); // returns a TransformStream
+ else if (event.transformer.options.name == "receiverTransform")
+ transform = createReceiverTransform(); // returns a TransformStream
+ else return;
+ event.transformer.readable
+ .pipeThrough(transform)
+ .pipeTo(event.transformer.writable);
+};
+```
+
+Note that the code to create the pipe chain is the same as in the previous example.
+
+### Runtime communication with the transform
+
+The [`RTCRtpScriptTransform` constructor](/en-US/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform) allows you to pass options and transfer objects to the worker.
+In the previous example we passed static information, but sometimes you might want to modify the transform algorithm in the worker at runtime, or get information back from the worker.
+For example, a WebRTC conference call that supports encryption might need to add a new key to the algorithm used by the transform.
+
+While it is possible to share information between the worker running the tranform code and the main thread using {{domxref("Worker.postMessage()")}}, it is generally easier to share a {{domxref("MessageChannel")}} as an [`RTCRtpScriptTransform` constructor](/en-US/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform) option, because then the channel context is directly available in the `event.transformer.options` when you are handling a new encoded frame.
+
+The code below creates a {{domxref("MessageChannel")}} and [transfers](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) its second port to the worker.
+The main thread and transform can subsequently communicate using the first and second ports.
+
+```js
+// Create a worker containing a TransformStream
+const worker = new Worker("worker.js");
+
+// Create a channel
+// Pass channel.port2 to the transform as a constructor option
+// and also transfer it to the worker
+const channel = new MessageChannel();
+const transform = new RTCRtpScriptTransform(
+ worker,
+ { purpose: "encrypt", port: channel.port2 },
+ [channel.port2],
+);
+
+// Use the port1 to send a string.
+// (we can send and transfer basic types/objects).
+channel.port1.postMessage("A message for the worker");
+channel.port1.start();
+```
+
+In the worker the port is available as `event.transformer.options.port`.
+The code below shows how you might listen on the port's `message` event to get messages from the main thread.
+You can also use the port to send messages back to the main thread.
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ // The message payload is in 'event.data';
+ console.log(event.data);
+};
+```
+
+### Triggering a key frame
+
+Raw video is rarely sent or stored because it consumes a lot of space and bandwidth to represent each frame as a complete image.
+Instead, codecs periodically generate a "key frame" that contains enough infomation to construct a full image, and between key frames sends "delta frames" that just include the changes since the last delta frame.
+While this is far more efficient that sending raw video, it means that in order to display the image associated with a particular delta frame, you need the last key frame and all subsequent delta frames.
+
+This can cause a delay for new users joining a WebRTC conference application, because they can't display video until they have received their first key frame.
+Similarly, if an encoded transform was used to encrypt frames, the recipient would not be able to display video until they get the first key frame encrypted with their key.
+
+In order to ensure that a new key frame can be sent as early as possible when needed, the {{domxref("RTCRtpScriptTransformer")}} object in `event.transformer` has two methods: {{domxref("RTCRtpScriptTransformer.generateKeyFrame()")}}, which causes the codec to generate a key frame, and {{domxref("RTCRtpScriptTransformer.sendKeyFrameRequest()")}}, which a receiver can use to request a key frame from the sender.
+
+The example below shows how the main thread might pass an encryption key to a sender transform, and trigger the codec to generate a key frame.
+Note that the main thread doesn't have direct access to the {{domxref("RTCRtpScriptTransformer")}} object, so it needs to pass the key and restriction identifier ("rid") to the worker (the "rid" is a stream id, which indicates the encoder that must generat the key frame).
+Here we do that with a `MessageChannel`, using the same pattern as in the previous section.
+The code assumes there is already a peer connection, and that `videoSender` is an {{domxref("RTCRtpSender")}}.
+
+```js
+const worker = new Worker("worker.js");
+const channel = new MessageChannel();
+
+videoSender.transform = new RTCRtpScriptTransform(
+ worker,
+ { name: "senderTransform", port: channel.port2 },
+ [channel.port2],
+);
+
+// Post rid and new key to the sender
+channel.port1.start();
+channel.port1.postMessage({
+ rid: "1",
+ key: "93ae0927a4f8e527f1gce6d10bc6ab6c",
+});
+```
+
+The {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} event handler in the worker gets the port and uses it to listen for `message` events from the main thread.
+If an event is received it gets the `rid` and `key`, and then calls `generateKeyFrame()`.
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ const { rid, key } = event.data;
+ // key is used by the transformer to encrypt frames (not shown)
+
+ // Get codec to generate a new key frame using the rid
+ // Here 'rcevent' is the rtctransform event.
+ rcevent.transformer.generateKeyFrame(rid);
+};
+```
+
+The code for a receiver to request a new key frame would be almost identical, except that "rid" isn't specified.
+Here is the code for just the port message handler:
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ const { key } = event.data;
+ // key is used by the transformer to decrypt frames (not shown)
+
+ // Request sender to emit a key frame.
+ transformer.sendKeyFrameRequest();
+};
+```
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("RTCRtpScriptTransform")}}
+- {{domxref("RTCRtpReceiver.transform")}}
+- {{domxref("RTCRtpSender.transform")}}
+- {{domxref("DedicatedWorkerGlobalScope.rtctransform_event")}}
+- {{domxref("RTCTransformEvent")}}
+- {{domxref("RTCRtpScriptTransformer")}}
+- {{domxref("RTCEncodedVideoFrame")}}
+- {{domxref("RTCEncodedAudioFrame")}}
diff --git a/files/en-us/web/api/webrtc_statistics_api/index.md b/files/en-us/web/api/webrtc_statistics_api/index.md
deleted file mode 100644
index b498b27c2041795..000000000000000
--- a/files/en-us/web/api/webrtc_statistics_api/index.md
+++ /dev/null
@@ -1,528 +0,0 @@
----
-title: WebRTC Statistics API
-slug: Web/API/WebRTC_Statistics_API
-page-type: web-api-overview
-browser-compat: api.RTCStatsReport
----
-
-{{DefaultAPISidebar("WebRTC")}}
-
-The WebRTC API has a vast array of statistics available, covering the entire breadth of the WebRTC connectivity system, from sender to receiver and peer to peer.
-
-## Collecting statistics
-
-You can collect statistics at various levels throughout the WebRTC hierarchy of objects. Most broadly, you can call {{domxref("RTCPeerConnection.getStats", "getStats()")}} on an {{domxref("RTCPeerConnection")}} to get statistics for the connection overall. In this example, a new {{domxref("RTCPeerConnection")}} is created, and then {{domxref("setInterval()")}} is used to set the function `getConnectionStats()` to be called every second.
-
-That function, in turn, uses {{domxref("RTCPeerConnection.getStats", "getStats()")}} to obtain statistics for the connection and to make use of that data.
-
-```js
-try {
- myPeerConnection = new RTCPeerConnection(pcOptions);
-
- statsInterval = setInterval(getConnectionStats, 1000);
- /* add event handlers, etc. */
-} catch (err) {
- console.error(`Error creating RTCPeerConnection: ${err}`);
-}
-
-function getConnectionStats() {
- myPeerConnection.getStats(null).then((stats) => {
- let statsOutput = "";
-
- stats.forEach((report) => {
- if (report.type === "inbound-rtp" && report.kind === "video") {
- Object.keys(report).forEach((statName) => {
- statsOutput += `${statName}: ${report[statName]}
-
- Mapping of statistic category names to the dictionaries they implement
-
-
-
-
- Statistic category name
-
- Description
- Dictionaries implemented
-
-
-
-
- candidate-pair
- Statistics describing the change from one
- {{domxref("RTCIceTransport")}} to another, such as during an
- ICE restart .
-
-
-
-
- {{domxref("RTCIceCandidatePairStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- certificate
- Statistics about a certificate being used by an
- {{domxref("RTCIceTransport")}}.
-
-
-
-
- {{domxref("RTCCertificateStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- codec
- Statistics about a specific codec being used by streams being sent or
- received by this connection.
-
-
- {{domxref("RTCCodecStats")}}
-
-
- csrc
- Statistics for a single contributing source (CSRC) that contributed to
- one of the connection's inbound RTP streams.
-
-
-
-
- {{domxref("RTCRtpContributingSourceStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- data-channel
- Statistics related to one {{domxref("RTCDataChannel")}} on
- the connection.
-
-
-
-
- {{domxref("RTCDataChannelStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- ice-server
- Statistics about the connection to an {{Glossary("ICE")}} server
- ({{Glossary("STUN")}} or {{Glossary("TURN")}}.
-
-
-
-
- {{domxref("RTCIceServerStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- inbound-rtp
- Statistics describing the state of one of the connection's inbound data
- streams.
-
-
-
-
- {{domxref("RTCInboundRtpStreamStats")}}
-
-
- {{domxref("RTCReceivedRtpStreamStats")}}
-
-
- {{domxref("RTCRtpStreamStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- local-candidate
- Statistics about a local ICE candidate associated with the connection's
- {{domxref("RTCIceTransport")}}s.
-
-
-
-
- {{domxref("RTCIceCandidateStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- media-source
- Statistics about the media produced by the
- {{domxref("MediaStreamTrack")}} attached to an RTP sender. The
- dictionary this key maps to depends on the track's
- {{domxref("MediaStreamTrack.kind", "kind")}}.
-
-
-
-
- {{domxref("RTCAudioSourceStats")}}
- or {{domxref("RTCVideoSourceStats")}}
-
-
- {{domxref("RTCMediaSourceStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
- {{domxref("RTCAudioSourceStats")}}
- or {{domxref("RTCVideoSourceStats")}}
-
-
-
- outbound-rtp
- Statistics describing the state of one of the outbound data streams on
- this connection.
-
-
-
-
- {{domxref("RTCOutboundRtpStreamStats")}}
-
-
- {{domxref("RTCSentRtpStreamStats")}}
-
-
- {{domxref("RTCRtpStreamStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- peer-connection
- Statistics describing the state of the
- {{domxref("RTCPeerConnection")}}.
-
-
-
-
- {{domxref("RTCPeerConnectionStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- receiver
- Statistics related to a specific
- {{domxref("RTCRtpReceiver")}} and the media associated with
- that receiver. The specific type of object representing the statistics
- depends on the media kind.
-
-
-
-
- {{domxref("RTCAudioReceiverStats")}}
- or {{domxref("RTCVideoReceiverStats")}}
-
-
- {{domxref("RTCAudioHandlerStats")}}
- or {{domxref("RTCVideoHandlerStats")}}
-
-
- {{domxref("RTCMediaHandlerStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- remote-candidate
- Statistics about a remote ICE candidate associated with the connection's
- {{domxref("RTCIceTransport")}}s.
-
-
-
-
- {{domxref("RTCIceCandidateStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- remote-inbound-rtp
- Statistics describing the state of the inbound data stream from the
- perspective of the remote peer.
-
-
-
-
- {{domxref("RTCRemoteInboundRtpStreamStats")}}
-
-
- {{domxref("RTCReceivedRtpStreamStats")}}
-
-
- {{domxref("RTCRtpStreamStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- remote-outbound-rtp
- Statistics describing the state of the outbound data stream from the
- perspective of the remote peer.
-
-
-
-
- {{domxref("RTCRemoteOutboundRtpStreamStats")}}
-
-
- {{domxref("RTCSentRtpStreamStats")}}
-
-
- {{domxref("RTCRtpStreamStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- sctp-transportStatistics about an {{domxref("RTCSctpTransport")}}.
-
-
-
- {{domxref("RTCSctpTransportStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- sender
- Statistics related to a specific {{domxref("RTCRtpSender")}}
- and the media associated with that sender. The type of object
- representing this statistic depends on the kind of the
- media.
-
-
-
-
- {{domxref("RTCAudioSenderStats")}}
- or {{domxref("RTCVideoSenderStats")}}
-
-
- {{domxref("RTCAudioHandlerStats")}}
- or {{domxref("RTCVideoHandlerStats")}}
-
-
- {{domxref("RTCMediaHandlerStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-
-
- stream {{deprecated_inline}}
- Statistics about a particular media
- {{domxref("MediaStream")}}. This has been obsoleted since the
- transition to WebRTC being track-based rather than stream-based.
-
-
-
-
- {{domxref("RTCMediaStreamStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- track {{deprecated_inline}}
-
- Statistics related to a specific
- {{domxref("MediaStreamTrack")}}'s attachment to one of the
- connection's senders or receivers. The referenced object's type
- depends on the track type.
-
-
-
- Note: These statistics have all been moved to
- media-source, sender,
- receiver, outbound-rtp, and
- inbound-rtp, and this statistic category type is thus
- obsolete and shouldn't be used anymore.
-
-
-
-
-
- {{domxref("RTCSenderVideoTrackAttachmentStats")}}
- or {{domxref("RTCSenderAudioTrackAttachmentStats")}}
- or
- {{domxref("RTCReceiverVideoTrackAttachmentStats")}}
- or
- {{domxref("RTCReceiverAudioTrackAttachmentStats")}}
-
-
- {{domxref("RTCMediaHandlerStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
- transceiver
- Statistics related to a specific
- {{domxref("RTCRtpTransceiver")}}.
-
-
-
-
- {{domxref("RTCRtpTransceiverStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
- transportStatistics about a transport used by the connection.
-
-
-
- {{domxref("RTCTransportStats")}}
-
- {{domxref("RTCStats")}}
-
-
-
-
-
-
-
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
diff --git a/files/en-us/web/api/websocket/binarytype/index.md b/files/en-us/web/api/websocket/binarytype/index.md
index 5c9847fbe70d8de..c9a2bd0e0b937af 100644
--- a/files/en-us/web/api/websocket/binarytype/index.md
+++ b/files/en-us/web/api/websocket/binarytype/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.binaryType
+title: "WebSocket: binaryType property"
+short-title: binaryType
slug: Web/API/WebSocket/binaryType
page-type: web-api-instance-property
browser-compat: api.WebSocket.binaryType
diff --git a/files/en-us/web/api/websocket/bufferedamount/index.md b/files/en-us/web/api/websocket/bufferedamount/index.md
index 73a3651a60daa73..f7dc1d361961a10 100644
--- a/files/en-us/web/api/websocket/bufferedamount/index.md
+++ b/files/en-us/web/api/websocket/bufferedamount/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.bufferedAmount
+title: "WebSocket: bufferedAmount property"
+short-title: bufferedAmount
slug: Web/API/WebSocket/bufferedAmount
page-type: web-api-instance-property
browser-compat: api.WebSocket.bufferedAmount
diff --git a/files/en-us/web/api/websocket/close/index.md b/files/en-us/web/api/websocket/close/index.md
index 2bf92b38f923d89..4710806c6b8185e 100644
--- a/files/en-us/web/api/websocket/close/index.md
+++ b/files/en-us/web/api/websocket/close/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.close()
+title: "WebSocket: close() method"
+short-title: close()
slug: Web/API/WebSocket/close
page-type: web-api-instance-method
browser-compat: api.WebSocket.close
diff --git a/files/en-us/web/api/websocket/close_event/index.md b/files/en-us/web/api/websocket/close_event/index.md
index 6bdee7a1c5e0876..99fb97037c9382d 100644
--- a/files/en-us/web/api/websocket/close_event/index.md
+++ b/files/en-us/web/api/websocket/close_event/index.md
@@ -1,5 +1,6 @@
---
title: "WebSocket: close event"
+short-title: close
slug: Web/API/WebSocket/close_event
page-type: web-api-event
browser-compat: api.WebSocket.close_event
diff --git a/files/en-us/web/api/websocket/error_event/index.md b/files/en-us/web/api/websocket/error_event/index.md
index 23bfe1b5ea3d43b..a2083aff7ece14c 100644
--- a/files/en-us/web/api/websocket/error_event/index.md
+++ b/files/en-us/web/api/websocket/error_event/index.md
@@ -1,5 +1,6 @@
---
title: "WebSocket: error event"
+short-title: error
slug: Web/API/WebSocket/error_event
page-type: web-api-event
browser-compat: api.WebSocket.error_event
diff --git a/files/en-us/web/api/websocket/extensions/index.md b/files/en-us/web/api/websocket/extensions/index.md
index fbbce6aba377a95..371f8151d96f3f2 100644
--- a/files/en-us/web/api/websocket/extensions/index.md
+++ b/files/en-us/web/api/websocket/extensions/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.extensions
+title: "WebSocket: extensions property"
+short-title: extensions
slug: Web/API/WebSocket/extensions
page-type: web-api-instance-property
browser-compat: api.WebSocket.extensions
diff --git a/files/en-us/web/api/websocket/message_event/index.md b/files/en-us/web/api/websocket/message_event/index.md
index c8c00c87944deb3..e95a950ac2a9b9e 100644
--- a/files/en-us/web/api/websocket/message_event/index.md
+++ b/files/en-us/web/api/websocket/message_event/index.md
@@ -1,5 +1,6 @@
---
title: "WebSocket: message event"
+short-title: message
slug: Web/API/WebSocket/message_event
page-type: web-api-event
browser-compat: api.WebSocket.message_event
@@ -30,15 +31,19 @@ A {{domxref("MessageEvent")}}. Inherits from {{domxref("Event")}}.
_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
- {{domxref("MessageEvent.data", "data")}} {{ReadOnlyInline}}
- - : The data sent by the message emitter.
+ - : The data sent by the message emitter. The type of this property depends on the type of the WebSocket message and the value of {{domxref("WebSocket.binaryType")}}.
+ - If the message type is "text", then this field is a string.
+ - If the message type is "binary" type, then the type of this property can be inferred from the `binaryType` of this socket:
+ - {{jsxref("ArrayBuffer")}} if `binaryType` is `"arraybuffer"`,
+ - {{domxref("Blob")}} if `binaryType` is `"blob"`. This does not have an associated media type ({{domxref("Blob.type")}} is `""`).
- {{domxref("MessageEvent.origin", "origin")}} {{ReadOnlyInline}}
- : A string representing the origin of the message emitter.
+
+Other properties from the {{domxref("MessageEvent")}} interface are present, but do not pertain to the WebSocket API and are left at their default values:
+
- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{ReadOnlyInline}}
- - : A string representing a unique ID for the event.
- {{domxref("MessageEvent.source", "source")}} {{ReadOnlyInline}}
- - : A `MessageEventSource` (which can be a {{domxref("Window")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
- {{domxref("MessageEvent.ports", "ports")}} {{ReadOnlyInline}}
- - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
## Examples
diff --git a/files/en-us/web/api/websocket/open_event/index.md b/files/en-us/web/api/websocket/open_event/index.md
index f6218f4d01c3877..61a50968d148fab 100644
--- a/files/en-us/web/api/websocket/open_event/index.md
+++ b/files/en-us/web/api/websocket/open_event/index.md
@@ -1,5 +1,6 @@
---
title: "WebSocket: open event"
+short-title: open
slug: Web/API/WebSocket/open_event
page-type: web-api-event
browser-compat: api.WebSocket.open_event
diff --git a/files/en-us/web/api/websocket/protocol/index.md b/files/en-us/web/api/websocket/protocol/index.md
index 70bb675c2416a7c..32274d0175914e0 100644
--- a/files/en-us/web/api/websocket/protocol/index.md
+++ b/files/en-us/web/api/websocket/protocol/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.protocol
+title: "WebSocket: protocol property"
+short-title: protocol
slug: Web/API/WebSocket/protocol
page-type: web-api-instance-property
browser-compat: api.WebSocket.protocol
diff --git a/files/en-us/web/api/websocket/readystate/index.md b/files/en-us/web/api/websocket/readystate/index.md
index dc9124fa92a9975..84a06740de081a4 100644
--- a/files/en-us/web/api/websocket/readystate/index.md
+++ b/files/en-us/web/api/websocket/readystate/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.readyState
+title: "WebSocket: readyState property"
+short-title: readyState
slug: Web/API/WebSocket/readyState
page-type: web-api-instance-property
browser-compat: api.WebSocket.readyState
diff --git a/files/en-us/web/api/websocket/send/index.md b/files/en-us/web/api/websocket/send/index.md
index 55e33dfd51a99d7..cf54b40cfdaf035 100644
--- a/files/en-us/web/api/websocket/send/index.md
+++ b/files/en-us/web/api/websocket/send/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.send()
+title: "WebSocket: send() method"
+short-title: send()
slug: Web/API/WebSocket/send
page-type: web-api-instance-method
browser-compat: api.WebSocket.send
@@ -36,10 +37,10 @@ send(data)
`bufferedAmount` by the requisite number of bytes.
- {{domxref("Blob")}}
- : Specifying a `Blob` enqueues the blob's raw data to be transmitted in
- a binary frame. The value of `bufferedAmount` is increased by the byte
- size of that raw data.
+ a binary frame (the {{domxref("Blob.type")}} is ignored).
+ The value of `bufferedAmount` is increased by the byte size of that raw data.
- {{jsxref("TypedArray")}} or a {{jsxref("DataView")}}
- - : You can send any [JavaScript typed array](/en-US/docs/Web/JavaScript/Typed_arrays) object as a binary frame;
+ - : You can send any [JavaScript typed array](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) object as a binary frame;
its binary data contents are queued in the buffer,
increasing the value of `bufferedAmount` by the requisite number of bytes.
diff --git a/files/en-us/web/api/websocket/url/index.md b/files/en-us/web/api/websocket/url/index.md
index f0c76a93f6c9b99..30aa8f1ea9622e7 100644
--- a/files/en-us/web/api/websocket/url/index.md
+++ b/files/en-us/web/api/websocket/url/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket.url
+title: "WebSocket: url property"
+short-title: url
slug: Web/API/WebSocket/url
page-type: web-api-instance-property
browser-compat: api.WebSocket.url
diff --git a/files/en-us/web/api/websocket/websocket/index.md b/files/en-us/web/api/websocket/websocket/index.md
index 00a42b0f28175b2..213afcba7bc91c6 100644
--- a/files/en-us/web/api/websocket/websocket/index.md
+++ b/files/en-us/web/api/websocket/websocket/index.md
@@ -1,5 +1,6 @@
---
-title: WebSocket()
+title: "WebSocket: WebSocket() constructor"
+short-title: WebSocket()
slug: Web/API/WebSocket/WebSocket
page-type: web-api-constructor
browser-compat: api.WebSocket.WebSocket
diff --git a/files/en-us/web/api/websockets_api/index.md b/files/en-us/web/api/websockets_api/index.md
index 1f6160bd557183e..171536cb59bfbf5 100644
--- a/files/en-us/web/api/websockets_api/index.md
+++ b/files/en-us/web/api/websockets_api/index.md
@@ -26,6 +26,7 @@ The **WebSocket API** is an advanced technology that makes it possible to open a
- [Writing WebSocket servers](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
- [Writing a WebSocket server in C#](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_server)
- [Writing a WebSocket server in Java](/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java)
+- [Writing a WebSocket server in JavaScript (Deno)](/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)
## Tools
@@ -49,11 +50,6 @@ The **WebSocket API** is an advanced technology that makes it possible to open a
- [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/): gives Flask applications access to low latency bi-directional communications between the clients and the server.
- [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket is a [Go](https://go.dev/) implementation of the WebSocket protocol.
-## Related Topics
-
-- [AJAX](/en-US/docs/Web/Guide/AJAX)
-- [JavaScript](/en-US/docs/Web/JavaScript)
-
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
index 14ca787f77a5c80..a38285b5cd53842 100644
--- a/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
+++ b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
@@ -115,7 +115,7 @@ After a successful handshake, client can send messages to the server, but now th
If we send "abcdef", we get these bytes:
-```
+```plain
129 134 167 225 225 210 198 131 130 182 194 135
```
diff --git a/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
new file mode 100644
index 000000000000000..c4b5c06a94f6f89
--- /dev/null
+++ b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
@@ -0,0 +1,129 @@
+---
+title: Writing a WebSocket server in JavaScript (Deno)
+slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno
+page-type: guide
+---
+
+{{DefaultAPISidebar("Websockets API")}}
+
+This example shows you how to create a WebSocket API server using Deno, with an accompanying web page.
+
+Deno is a JavaScript runtime which supports TypeScript compiling and caching on the fly. Deno has built-in formatter, linter, test runner and more, and also implements many web APIs. By being compliant with the web standards, all Deno-specific APIs are implemented under the `Deno` namespace.
+
+The [Deno website](https://deno.com/) provides instructions for installing Deno.
+
+Deno version at the time of writing: `1.36`.
+
+## Code
+
+The code will be contained in two files, one for the server, and one for the client.
+
+### Server
+
+Create a `main.js` file. This file will contain the code for a simple HTTP server which will also serve the client HTML.
+
+```js
+Deno.serve({
+ port: 80,
+ handler: async (request) => {
+ // If the request is a websocket upgrade,
+ // we need to use the Deno.upgradeWebSocket helper
+ if (request.headers.get("upgrade") === "websocket") {
+ const { socket, response } = Deno.upgradeWebSocket(request);
+
+ socket.onopen = () => {
+ console.log("CONNECTED");
+ };
+ socket.onmessage = (event) => {
+ console.log(`RECEIVED: ${event.data}`);
+ socket.send("pong");
+ };
+ socket.onclose = () => console.log("DISCONNECTED");
+ socket.onerror = (error) => console.error("ERROR:", error);
+
+ return response;
+ } else {
+ // If the request is a normal HTTP request,
+ // we serve the client HTML file.
+ const file = await Deno.open("./index.html", { read: true });
+ return new Response(file.readable);
+ }
+ },
+});
+```
+
+`Deno.upgradeWebSocket()` upgrades the connection to a WebSocket connection, which is explained further in [Protocol upgrade mechanism](/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism).
+
+[`Deno.serve()`](https://deno.land/api@v1.36.4?s=Deno.serve) uses `Deno.listen()` and `Deno.serveHttp()` under the hood, and is a higher-level interface to easily set up a HTTP server. Without it, the code would look something like this.
+
+```js
+for await (const conn of Deno.listen({ port: 80 })) {
+ for await (const { request, respondWith } of Deno.serveHttp(conn)) {
+ respondWith(handler(request));
+ }
+}
+```
+
+### Client
+
+Create an `index.html` file. This file will contain a script that will ping the server every five seconds after a connection has been made.
+
+```html
+
+WebSocket Test
+Sends a ping every five seconds
+
+
+```
+
+## Running the code
+
+With the two files, run the app using Deno.
+
+```sh
+deno run --allow-net=0.0.0.0:80 --allow-read=./index.html main.js
+```
+
+Deno requires us to give explicit permissions for what we can access on the host machine.
+
+- `--allow-net=0.0.0.0:80` allows the app to attach to localhost on port 80
+- `--allow-read=./index.html` allows access to the HTML file for the client
+
+## See also
+
+- [Writing WebSocket servers](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
diff --git a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
index 479bfe3a0d5c531..b30e405e9d5e87d 100644
--- a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -36,7 +36,7 @@ This may happen if you attempt to use an insecure connection (most {{Glossary("u
### Connection errors
-If an error occurs while attempting to connect, first a simple event with the name `error` is sent to the {{domxref("WebSocket")}} object (thereby invoking its {{domxref("WebSocket.onerror", "onerror")}} handler), and then the {{domxref("CloseEvent")}} is sent to the `WebSocket` object (thereby invoking its {{domxref("WebSocket.onclose", "onclose")}} handler) to indicate the reason for the connection's closing.
+If an error occurs while attempting to connect, first a simple event with the name `error` is sent to the {{domxref("WebSocket")}} object (thereby invoking its {{domxref("WebSocket/error_event", "onerror")}} handler), and then the {{domxref("CloseEvent")}} is sent to the `WebSocket` object (thereby invoking its {{domxref("WebSocket/close_event", "onclose")}} handler) to indicate the reason for the connection's closing.
The browser may also output to its console a more descriptive error message as well as a closing code as defined in [RFC 6455, Section 7.4](https://datatracker.ietf.org/doc/html/rfc6455#section-7.4) through the {{domxref("CloseEvent")}}.
@@ -48,7 +48,7 @@ A custom protocol of "protocolOne" is named in the request for the socket in thi
```js
const exampleSocket = new WebSocket(
"wss://www.example.com/socketserver",
- "protocolOne"
+ "protocolOne",
);
```
@@ -80,7 +80,7 @@ exampleSocket.send("Here's some text that the server is urgently awaiting!");
You can send data as a string, {{ domxref("Blob") }}, or {{jsxref("ArrayBuffer")}}.
As establishing a connection is asynchronous and prone to failure there is no guarantee that calling the `send()` method immediately after creating a WebSocket object will be successful.
-We can at least be sure that attempting to send data only takes place once a connection is established by defining an {{domxref("WebSocket.onopen", "onopen")}} event handler to do the work:
+We can at least be sure that attempting to send data only takes place once a connection is established by defining an {{domxref("WebSocket/open_event", "onopen")}} event handler to do the work:
```js
exampleSocket.onopen = (event) => {
@@ -117,7 +117,7 @@ function sendText() {
WebSockets is an event-driven API; when messages are received, a `message`
event is sent to the `WebSocket` object. To handle it, add an event listener
-for the `message` event, or use the {{domxref("WebSocket.onmessage",
+for the `message` event, or use the {{domxref("WebSocket/message_event",
"onmessage")}} event handler. To begin listening for incoming data, you can do something
like this:
diff --git a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
index 5d8c95e3a9484e4..776e9d8fbd64761 100644
--- a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
@@ -74,13 +74,13 @@ Methods:
- Writes bytes from buffer, offset and size determine length of message.
```cs
- Write(Byte[] buffer, int offset, int size)
+ Write(byte[] buffer, int offset, int size)
```
- Reads bytes to `buffer`. `offset` and `size` determine the length of the message.
```cs
- Read(Byte[] buffer, int offset, int size)
+ Read(byte[] buffer, int offset, int size)
```
Let us extend our example.
@@ -96,7 +96,7 @@ NetworkStream stream = client.GetStream();
while (true) {
while (!stream.DataAvailable);
- Byte[] bytes = new Byte[client.Available];
+ byte[] bytes = new byte[client.Available];
stream.Read(bytes, 0, bytes.Length);
}
@@ -117,7 +117,7 @@ while(client.Available < 3)
// wait for enough bytes to be available
}
-Byte[] bytes = new Byte[client.Available];
+byte[] bytes = new byte[client.Available];
stream.Read(bytes, 0, bytes.Length);
@@ -145,7 +145,7 @@ if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
{
const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
- Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
+ byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
+ "Connection: Upgrade" + eol
+ "Upgrade: websocket" + eol
+ "Sec-WebSocket-Accept: " + Convert.ToBase64String(
@@ -167,7 +167,7 @@ After a successful handshake, the client will send encoded messages to the serve
If we send "MDN", we get these bytes:
-```
+```plain
129 131 61 84 35 6 112 16 109
```
@@ -207,12 +207,12 @@ where _D_ is the decoded message array, _E_ is the encoded message array, _M_ is
Example in C#:
```cs
-Byte[] decoded = new Byte[3];
-Byte[] encoded = new Byte[3] {112, 16, 109};
-Byte[] mask = new Byte[4] {61, 84, 35, 6};
+byte[] decoded = new byte[3];
+byte[] encoded = new byte[3] {112, 16, 109};
+byte[] mask = new byte[4] {61, 84, 35, 6};
for (int i = 0; i < encoded.Length; i++) {
- decoded[i] = (Byte)(encoded[i] ^ mask[i % 4]);
+ decoded[i] = (byte)(encoded[i] ^ mask[i % 4]);
}
```
@@ -251,7 +251,7 @@ class Server {
while (client.Available < 3); // match against "get"
byte[] bytes = new byte[client.Available];
- stream.Read(bytes, 0, client.Available);
+ stream.Read(bytes, 0, bytes.Length);
string s = Encoding.UTF8.GetString(bytes);
if (Regex.IsMatch(s, "^GET", RegexOptions.IgnoreCase)) {
@@ -279,7 +279,7 @@ class Server {
mask = (bytes[1] & 0b10000000) != 0; // must be true, "All messages from the client to the server have this bit set"
int opcode = bytes[0] & 0b00001111, // expecting 1 - text message
offset = 2;
- ulong msglen = bytes[1] & 0b01111111;
+ ulong msglen = bytes[1] & (ulong)0b01111111;
if (msglen == 126) {
// bytes are reversed because websocket will print them in Big-Endian, whereas
@@ -319,7 +319,7 @@ class Server {
### client.html
```html
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --
+ ::
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+The example loads both the .xsl (`xslStylesheet`) and the .xml (`xmlDoc`) files into memory. The .xsl file is then imported (`xsltProcessor.importStylesheet(xslStylesheet)`) and the transformation run (`xsltProcessor.transformToFragment(xmlDoc, document)`). This allows fetching of data after the page has been loaded, without initiating a fresh page load.
+
+#### JavaScript
+
+```js
+async function init() {
+ const parser = new DOMParser();
+ const xsltProcessor = new XSLTProcessor();
+
+ // Load the XSLT file, example1.xsl
+ const xslResponse = await fetch("example1.xsl");
+ const xslText = await xslResponse.text();
+ const xslStylesheet = parser.parseFromString(xslText, "application/xml");
+ xsltProcessor.importStylesheet(xslStylesheet);
+
+ // Load the XML file, example1.xml
+ const xmlResponse = await fetch("example1.xml");
+ const xmlText = await xmlResponse.text();
+ const xmlDoc = parser.parseFromString(xmlText, "application/xml");
+
+ const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
+
+ document.getElementById("example").textContent = "";
+ document.getElementById("example").appendChild(fragment);
+}
+
+init();
+```
+
+### Advanced example
+
+This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslloaded` variable to true once it has finished loading the file. Using the {{domxref("XSLTProcessor.getParameter()")}} method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using {{domxref("XSLTProcessor.setParameter()")}}.
+
+The XSLT file has a parameter called `myOrder` that JavaScript sets to change the sorting method. The `xsl:sort` element's order attribute can access the value of the parameter using `$myOrder`. However, the value needs to be an XPATH expression and not a string, so `{$myOrder}` is used. Using {} evaluates the content as an XPath expression.
+
+Once the transformation is complete, the result is appended to the document, as shown in this example.
+
+#### XHTML
+
+```html
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
+
+
+
+
+
+
+
+```
## Specifications
@@ -79,4 +328,7 @@ _This are no properties for this interface._
## See also
-- [Using the Mozilla JavaScript interface to XSL Transformations](/en-US/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations)
+- [XSLT](/en-US/docs/Web/XSLT)
+- [What kind of language is XSLT?](https://developer.ibm.com/technologies/web-development/) at [IBM developer](https://developer.ibm.com/)
+- [XSLT Tutorial](https://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html) at [zvon.org](https://www.zvon.org/)
+- [XPath Tutorial](https://www.zvon.org/xxl/XPathTutorial/General/examples.html) at [zvon.org](https://www.zvon.org/)
diff --git a/files/en-us/web/api/xsltprocessor/introduction/index.md b/files/en-us/web/api/xsltprocessor/introduction/index.md
index 367d7053bac8c60..000192dc16a6b7d 100644
--- a/files/en-us/web/api/xsltprocessor/introduction/index.md
+++ b/files/en-us/web/api/xsltprocessor/introduction/index.md
@@ -4,6 +4,8 @@ slug: Web/API/XSLTProcessor/Introduction
page-type: guide
---
+{{APIRef("XSLT")}}
+
One noticeable trend in W3C standards has been the effort to separate content from style. This would allow the same style to be reused for multiple content, as well as simplify maintenance and allow a quick (only modify one file) way to change the look of content.
CSS (Cascade Style Sheets) was one of the first ways proposed by the W3C. CSS is a simple way to apply style rules to a web document. These style rules define how the document (the content) should be laid out. However, it has several limitations, such as lack of programming structures and ability to create complex layout models. CSS also has limited support for changing the position of an element.
diff --git a/files/en-us/web/api/xsltprocessor/removeparameter/index.md b/files/en-us/web/api/xsltprocessor/removeparameter/index.md
new file mode 100644
index 000000000000000..a457f4e5545293f
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/removeparameter/index.md
@@ -0,0 +1,45 @@
+---
+title: "XSLTProcessor: removeParameter() method"
+short-title: removeParameter()
+slug: Web/API/XSLTProcessor/removeParameter
+page-type: web-api-instance-method
+browser-compat: api.XSLTProcessor.removeParameter
+---
+
+{{APIRef("XSLT")}}
+
+The `removeParameter()` method of the {{domxref("XSLTProcessor")}} interface removes the parameter (``) and its value from the stylesheet imported in the processor.
+
+## Syntax
+
+```js-nolint
+removeParameter(namespaceURI, localName)
+```
+
+### Parameters
+
+- `namespaceURI`
+ - : The namespace associated with the parameter name. A ["null"](/en-US/docs/Web/JavaScript/Reference/Operators/null) value is treated the same as the empty string (`""`).
+- `localName`
+ - : The name of the parameter in the associated namespace.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("XSLTProcessor.getParameter()")}}
+- {{domxref("XSLTProcessor.setParameter()")}}
+- {{domxref("XSLTProcessor.clearParameters()")}}
+- {{domxref("XSLTProcessor.reset()")}}
diff --git a/files/en-us/web/api/xsltprocessor/reset/index.md b/files/en-us/web/api/xsltprocessor/reset/index.md
new file mode 100644
index 000000000000000..26dfeab9fd55275
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/reset/index.md
@@ -0,0 +1,42 @@
+---
+title: "XSLTProcessor: reset() method"
+short-title: reset()
+slug: Web/API/XSLTProcessor/reset
+page-type: web-api-instance-method
+browser-compat: api.XSLTProcessor.reset
+---
+
+{{APIRef("XSLT")}}
+
+The `reset()` method of the {{domxref("XSLTProcessor")}} interface removes all parameters (``) and the XSLT stylesheet from the processor. The `XSLTProcessor` will then be in its original state when it was created.
+
+## Syntax
+
+```js-nolint
+reset()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("XSLTProcessor.getParameter()")}}
+- {{domxref("XSLTProcessor.setParameter()")}}
+- {{domxref("XSLTProcessor.removeParameter()")}}
+- {{domxref("XSLTProcessor.clearParameters()")}}
diff --git a/files/en-us/web/api/xsltprocessor/resources/index.md b/files/en-us/web/api/xsltprocessor/resources/index.md
deleted file mode 100644
index dfa0bf9dc3a28c8..000000000000000
--- a/files/en-us/web/api/xsltprocessor/resources/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Resources
-slug: Web/API/XSLTProcessor/Resources
-page-type: guide
----
-
-## Resources
-
-- [What kind of language is XSLT?](https://developer.ibm.com/technologies/web-development/) at [IBM developer](https://developer.ibm.com/)
-- [XSLT Tutorial](https://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html) at [zvon.org](https://www.zvon.org/)
-- [XPath Tutorial](https://www.zvon.org/xxl/XPathTutorial/General/examples.html) at [zvon.org](https://www.zvon.org/)
-- [Using the Mozilla JavaScript interface to do XSL Transformations](/en-US/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations) at [mozilla.org](https://www.mozilla.org/)
-- [Mozilla.org's XSLT Project Page](/en-US/docs/Web/XSLT), which includes a frequently encountered issues section.
diff --git a/files/en-us/web/api/xsltprocessor/setparameter/index.md b/files/en-us/web/api/xsltprocessor/setparameter/index.md
new file mode 100644
index 000000000000000..386169b8014e2ec
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/setparameter/index.md
@@ -0,0 +1,48 @@
+---
+title: "XSLTProcessor: setParameter() method"
+short-title: setParameter()
+slug: Web/API/XSLTProcessor/setParameter
+page-type: web-api-instance-method
+browser-compat: api.XSLTProcessor.setParameter
+---
+
+{{APIRef("XSLT")}}
+
+The `setParameter()` method of the {{domxref("XSLTProcessor")}} interface sets the value of a parameter (``) in the stylesheet imported in the processor.
+
+## Syntax
+
+```js-nolint
+setParameter(namespaceURI, localName, value)
+```
+
+### Parameters
+
+- `namespaceURI`
+ - : The namespace associated with the parameter name. A ["null"](/en-US/docs/Web/JavaScript/Reference/Operators/null) value is treated the same as the empty string (`""`).
+- `localName`
+ - : The name of the parameter in the associated namespace.
+- `value`
+ - : The value of the parameter.
+ > **Note:** Firefox supports any kind of parameter. Chrome, Edge and Safari only support string parameters.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("XSLTProcessor.getParameter()")}}
+- {{domxref("XSLTProcessor.removeParameter()")}}
+- {{domxref("XSLTProcessor.clearParameters()")}}
+- {{domxref("XSLTProcessor.reset()")}}
diff --git a/files/en-us/web/api/xsltprocessor/transformtodocument/index.md b/files/en-us/web/api/xsltprocessor/transformtodocument/index.md
new file mode 100644
index 000000000000000..04e400630a4ddb1
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/transformtodocument/index.md
@@ -0,0 +1,46 @@
+---
+title: "XSLTProcessor: transformToDocument() method"
+short-title: transformToDocument()
+slug: Web/API/XSLTProcessor/transformToDocument
+page-type: web-api-instance-method
+browser-compat: api.XSLTProcessor.transformToDocument
+---
+
+{{APIRef("XSLT")}}
+
+The `transformToDocument()` method of the {{domxref("XSLTProcessor")}} interface transforms the provided {{DOMxRef("Node")}} source to a {{domxref("Document")}} using the XSLT stylesheet associated with `XSLTProcessor`.
+
+## Syntax
+
+```js-nolint
+transformToDocument(source)
+```
+
+### Parameters
+
+- `source`
+ - : The {{DOMxRef("Node")}} source to apply the XSLT stylesheet to.
+
+### Return value
+
+A {{domxref("Document")}}. The actual interface depends on the [output method](https://www.w3.org/TR/1999/REC-xslt-19991116#output) of the stylesheet:
+
+| Output method | Result interface |
+| ------------- | ------------------------------------------------------------------------------------------------------ |
+| `html` | {{domxref("HTMLDocument")}} |
+| `xml` | {{domxref("XMLDocument")}} |
+| `text` | {{domxref("XMLDocument")}} with a single root element `` with the text as a child |
+
+## Examples
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("XSLTProcessor.transformToDocument()")}}
diff --git a/files/en-us/web/api/xsltprocessor/transformtofragment/index.md b/files/en-us/web/api/xsltprocessor/transformtofragment/index.md
new file mode 100644
index 000000000000000..9aad7954487af00
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/transformtofragment/index.md
@@ -0,0 +1,42 @@
+---
+title: "XSLTProcessor: transformToFragment() method"
+short-title: transformToFragment()
+slug: Web/API/XSLTProcessor/transformToFragment
+page-type: web-api-instance-method
+browser-compat: api.XSLTProcessor.transformToFragment
+---
+
+{{APIRef("XSLT")}}
+
+The `transformToFragment()` method of the {{domxref("XSLTProcessor")}} interface transforms a provided {{DOMxRef("Node")}} source to a {{domxref("DocumentFragment")}} using the XSLT stylesheet associated with the `XSLTProcessor`.
+
+## Syntax
+
+```js-nolint
+transformToFragment(source, document)
+```
+
+### Parameters
+
+- `source`
+ - : The {{DOMxRef("Node")}} source to apply the XSLT stylesheet to.
+- `document`
+ - : The {{DOMxRef("Document")}} the document fragment will be associated with. (Any document fragment is associated with a document it can be added to).
+
+### Return value
+
+A {{domxref("DocumentFragment")}}.
+
+## Examples
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("XSLTProcessor.transformToDocument()")}}
diff --git a/files/en-us/web/api/xsltprocessor/xsltprocessor/index.md b/files/en-us/web/api/xsltprocessor/xsltprocessor/index.md
new file mode 100644
index 000000000000000..e7bbcd023e3b599
--- /dev/null
+++ b/files/en-us/web/api/xsltprocessor/xsltprocessor/index.md
@@ -0,0 +1,33 @@
+---
+title: "XSLTProcessor: XSLTProcessor() constructor"
+short-title: XSLTProcessor()
+slug: Web/API/XSLTProcessor/XSLTProcessor
+page-type: web-api-constructor
+browser-compat: api.XSLTProcessor.XSLTProcessor
+---
+
+{{APIRef("XSLT")}}
+
+The **`XSLTProcessor()`** constructor creates a new {{domxref("XSLTProcessor")}} object instance.
+
+## Syntax
+
+```js-nolint
+new XSLTProcessor()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A new {{domxref("XSLTProcessor")}} object instance.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md
index 7dd234b64a1c7bd..4a5f7d1c981a42e 100644
--- a/files/en-us/web/css/--_star_/index.md
+++ b/files/en-us/web/css/--_star_/index.md
@@ -18,11 +18,11 @@ Custom properties are scoped to the element(s) they are declared on, and partici
```css
--somekeyword: left;
--somecolor: #0000ff;
---somecomplexvalue: 3px 6px rgb(20, 32, 54);
+--somecomplexvalue: 3px 6px rgb(20 32 54);
```
- ``
- - : This value matches any sequence of one or more tokens, so long as the sequence does not contain an disallowed token. It represents the entirety of what a valid declaration can have as its value.
+ - : This value matches any sequence of one or more tokens, so long as the sequence does not contain any disallowed token. It represents the entirety of what a valid declaration can have as its value.
> **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.
@@ -86,5 +86,7 @@ Custom properties are scoped to the element(s) they are declared on, and partici
## See also
-- [Using CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- The {{cssxref("var", "var()")}} function
+- {{cssxref("@property")}} at-rule
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module
diff --git a/files/en-us/web/css/-moz-float-edge/index.md b/files/en-us/web/css/-moz-float-edge/index.md
index 821695bc9d1e659..cdc77dfe9a8fd94 100644
--- a/files/en-us/web/css/-moz-float-edge/index.md
+++ b/files/en-us/web/css/-moz-float-edge/index.md
@@ -12,6 +12,8 @@ browser-compat: css.properties.-moz-float-edge
The non-standard **`-moz-float-edge`** [CSS](/en-US/docs/Web/CSS) property specifies whether the height and width properties of the element include the margin, border, or padding thickness.
+## Syntax
+
```css
/* Keyword values */
-moz-float-edge: border-box;
@@ -25,8 +27,6 @@ The non-standard **`-moz-float-edge`** [CSS](/en-US/docs/Web/CSS) property speci
-moz-float-edge: unset;
```
-## Syntax
-
### Values
- `border-box`
diff --git a/files/en-us/web/css/-moz-force-broken-image-icon/index.md b/files/en-us/web/css/-moz-force-broken-image-icon/index.md
index b5e65f7f2093133..c19002b94de9d4c 100644
--- a/files/en-us/web/css/-moz-force-broken-image-icon/index.md
+++ b/files/en-us/web/css/-moz-force-broken-image-icon/index.md
@@ -49,7 +49,7 @@ img {
### Result
-{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}
+{{EmbedLiveSample('Examples','125','125')}}
> **Note:** Unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if `-moz-force-broken-image-icon` is set to `1`.
@@ -68,4 +68,4 @@ Not part of any standard.
## See also
-- [Webkit bug 58646](https://bugzil.la/58646)
+- [Firefox bug 58646](https://bugzil.la/58646)
diff --git a/files/en-us/web/css/-moz-image-rect/index.md b/files/en-us/web/css/-moz-image-rect/index.md
index 4254b16736f1289..79f672b54403367 100644
--- a/files/en-us/web/css/-moz-image-rect/index.md
+++ b/files/en-us/web/css/-moz-image-rect/index.md
@@ -3,12 +3,12 @@ title: "-moz-image-rect"
slug: Web/CSS/-moz-image-rect
page-type: css-function
status:
- - experimental
+ - deprecated
- non-standard
browser-compat: css.types.-moz-image-rect
---
-{{CSSRef}}{{Non-standard_Header}}{{SeeCompatTable}}
+{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
The **`-moz-image-rect`** value for [CSS](/en-US/docs/Web/CSS) {{CSSxRef("background-image")}} lets you use a portion of a larger image as a background.
@@ -159,4 +159,4 @@ Not part of any standard.
## See also
- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)
-- [CSS Backgrounds and Borders module](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [CSS Backgrounds and Borders module](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders)
diff --git a/files/en-us/web/css/-moz-image-region/index.md b/files/en-us/web/css/-moz-image-region/index.md
index a39d583240ee098..d6a044df7e7e482 100644
--- a/files/en-us/web/css/-moz-image-region/index.md
+++ b/files/en-us/web/css/-moz-image-region/index.md
@@ -11,6 +11,10 @@ browser-compat: css.properties.-moz-image-region
For certain XUL elements and pseudo-elements that use an image from the {{CSSxRef("list-style-image")}} property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.
+The syntax is similar to the {{CSSxRef("clip")}} property. All four values are relative to the upper left corner of the image.
+
+## Syntax
+
```css
/* Keyword value */
-moz-image-region: auto;
@@ -24,12 +28,6 @@ For certain XUL elements and pseudo-elements that use an image from the {{CSSxRe
-moz-image-region: unset;
```
-The syntax is similar to the {{CSSxRef("clip")}} property. All four values are relative to the upper left corner of the image.
-
-> **Note:** For a system that works on any background, see {{CSSxRef("-moz-image-rect")}}.
-
-## Syntax
-
### Values
- `auto`
diff --git a/files/en-us/web/css/-moz-outline-radius-bottomleft/index.md b/files/en-us/web/css/-moz-outline-radius-bottomleft/index.md
deleted file mode 100644
index 277f32086b1dfc3..000000000000000
--- a/files/en-us/web/css/-moz-outline-radius-bottomleft/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: "-moz-outline-radius-bottomleft"
-slug: Web/CSS/-moz-outline-radius-bottomleft
-page-type: css-property
-status:
- - deprecated
- - non-standard
-browser-compat: css.properties.-moz-outline-radius-bottomleft
----
-
-{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}
-
-In Mozilla applications, the **`-moz-outline-radius-bottomleft`** [CSS](/en-US/docs/Web/CSS) property can be used to round the bottom-left corner of an element's {{cssxref("outline")}}.
-
-## Syntax
-
-The value of `-moz-outline-radius-bottomleft` is either a CSS {{cssxref("length", "<length>")}} or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The {{cssxref("calc", "calc()")}} function may be used as well.
-
-### Values
-
-- ``
- - : The radius of the circle defining the curvature of the bottom and left edges of the element, specified as a CSS {{cssxref("length", "<length>")}}.
-- ``
- - : The radius of the circle defining the rounding of the bottom-left corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the bottom and left sides of the border box.
-
-## Formal definition
-
-{{cssinfo}}
-
-## Formal syntax
-
-```plain
- -moz-outline-radius-bottomleft =
-
-```
-
-## Examples
-
-### Rounding an outline
-
-Since this is a Firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than Firefox.
-
-#### HTML
-
-```html
-Look at this paragraph's bottom-left corner.
-```
-
-#### CSS
-
-```css
-p {
- margin: 10px;
- border: solid cyan;
- outline: dotted green;
- -moz-outline-radius-bottomleft: 2em;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample("Rounding_a_outline")}}
-
-## Specifications
-
-Not part of any standard.
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- See the {{cssxref("-moz-outline-radius")}} property for more information.
diff --git a/files/en-us/web/css/-moz-outline-radius-bottomright/index.md b/files/en-us/web/css/-moz-outline-radius-bottomright/index.md
deleted file mode 100644
index 6d16723c792ff63..000000000000000
--- a/files/en-us/web/css/-moz-outline-radius-bottomright/index.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: "-moz-outline-radius-bottomright"
-slug: Web/CSS/-moz-outline-radius-bottomright
-page-type: css-property
-status:
- - deprecated
- - non-standard
-browser-compat: css.properties.-moz-outline-radius-bottomright
----
-
-{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}
-
-In Mozilla applications, the **`-moz-outline-radius-bottomright`** [CSS](/en-US/docs/Web/CSS) property can be used to round the bottom-right corner of an element's {{cssxref("outline")}}.
-
-## Syntax
-
-The value of `-moz-outline-radius-bottomright` is either a CSS {{cssxref("length", "<length>")}} or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The {{cssxref("calc", "calc()")}} function may be used as well.
-
-### Values
-
-- ``
- - : The radius of the circle defining the curvature of the bottom and right edges of the element, specified as a CSS {{cssxref("length", "<length>")}}.
-- ``
- - : The radius of the circle defining the rounding of the bottom-right corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the bottom and right sides of the border box.
-
-## Formal definition
-
-{{CSSInfo}}
-
-## Formal syntax
-
-```plain
--moz-outline-radius-bottomright =
-
-```
-
-## Examples
-
-### HTML
-
-```html
-Look at this paragraph's bottom-right corner.
-```
-
-### CSS
-
-```css
-p {
- margin: 5px;
- border: solid cyan;
- outline: dotted red;
- -moz-outline-radius-bottomright: 2em;
-}
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
-> **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.
-
-## Specifications
-
-Not part of any standard.
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- See the {{cssxref("-moz-outline-radius")}} property for more information.
diff --git a/files/en-us/web/css/-moz-outline-radius-topleft/index.md b/files/en-us/web/css/-moz-outline-radius-topleft/index.md
deleted file mode 100644
index 178268d700f64e1..000000000000000
--- a/files/en-us/web/css/-moz-outline-radius-topleft/index.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: "-moz-outline-radius-topleft"
-slug: Web/CSS/-moz-outline-radius-topleft
-page-type: css-property
-status:
- - deprecated
- - non-standard
-browser-compat: css.properties.-moz-outline-radius-topleft
----
-
-{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}
-
-In Mozilla applications, the **`-moz-outline-radius-topleft`** [CSS](/en-US/docs/Web/CSS) property can be used to round the top-left corner of an element's {{cssxref("outline")}}.
-
-## Syntax
-
-The value of `-moz-outline-radius-topleft` is either a CSS [``](/en-US/docs/Web/CSS/length) or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The [`calc()`](/en-US/docs/Web/CSS/calc) function may be used as well.
-
-### Values
-
-- ``
- - : The radius of the circle defining the curvature of the top and left edges of the element, specified as a CSS [``](/en-US/docs/Web/CSS/length).
-- ``
- - : The radius of the circle defining the rounding of the top-left corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the top and left sides of the border box.
-
-## Formal definition
-
-{{CSSInfo}}
-
-## Formal syntax
-
-```plain
--moz-outline-radius-topleft =
-
-```
-
-## Examples
-
-The example below will not display the desired effect if you are viewing this in a browser other than Firefox.
-
-### HTML
-
-```html
-Look at this paragraph's top-left corner.
-```
-
-### CSS
-
-```css
-p {
- margin: 5px;
- border: solid cyan;
- outline: dotted red;
- -moz-outline-radius-topleft: 2em;
-}
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
-## Specifications
-
-Not part of any standard.
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- See the {{cssxref("-moz-outline-radius")}} property for more information.
diff --git a/files/en-us/web/css/-moz-outline-radius-topright/index.md b/files/en-us/web/css/-moz-outline-radius-topright/index.md
deleted file mode 100644
index 53afb2f3426522d..000000000000000
--- a/files/en-us/web/css/-moz-outline-radius-topright/index.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: "-moz-outline-radius-topright"
-slug: Web/CSS/-moz-outline-radius-topright
-page-type: css-property
-status:
- - deprecated
- - non-standard
-browser-compat: css.properties.-moz-outline-radius-topright
----
-
-{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}
-
-In Mozilla applications, the **`-moz-outline-radius-topright`** [CSS](/en-US/docs/Web/CSS) property can be used to round the top-right corner of an element's {{cssxref("outline")}}.
-
-## Syntax
-
-The value of `-moz-outline-radius-topright` is either a CSS [``](/en-US/docs/Web/CSS/length) or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The [`calc()`](/en-US/docs/Web/CSS/calc) function may be used as well.
-
-### Values
-
-- ``
- - : The radius of the circle defining the curvature of the top and right edges of the element, specified as a CSS [``](/en-US/docs/Web/CSS/length).
-- ``
- - : The radius of the circle defining the rounding of the top-right corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the top and right sides of the border box.
-
-## Formal definition
-
-{{CSSInfo}}
-
-## Formal syntax
-
-```plain
--moz-outline-radius-topright =
-
-```
-
-## Examples
-
-### HTML
-
-```html
-Look at this paragraph's top-right corner.
-```
-
-### CSS
-
-```css
-p {
- margin: 5px;
- border: solid cyan;
- outline: dotted red;
- -moz-outline-radius-topright: 2em;
-}
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
-> **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.
-
-## Specifications
-
-Not part of any standard.
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- See the {{cssxref("-moz-outline-radius")}} property for more information.
diff --git a/files/en-us/web/css/-moz-outline-radius/index.md b/files/en-us/web/css/-moz-outline-radius/index.md
deleted file mode 100644
index 17c003c04b76e74..000000000000000
--- a/files/en-us/web/css/-moz-outline-radius/index.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: "-moz-outline-radius"
-slug: Web/CSS/-moz-outline-radius
-page-type: css-shorthand-property
-status:
- - deprecated
- - non-standard
-browser-compat: css.properties.-moz-outline-radius
----
-
-{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}
-
-In Mozilla applications like Firefox, the **`-moz-outline-radius`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) can be used to give an element's {{cssxref("outline")}} rounded corners.
-
-```css
-/* One value */
--moz-outline-radius: 25px;
-
-/* Two values */
--moz-outline-radius: 25px 1em;
-
-/* Three values */
--moz-outline-radius: 25px 1em 12%;
-
-/* Four values */
--moz-outline-radius: 25px 1em 12% 4mm;
-
-/* Global values */
--moz-outline-radius: inherit;
--moz-outline-radius: initial;
--moz-outline-radius: unset;
-```
-
-## Constituent properties
-
-This property is a shorthand for the following CSS properties:
-
-- [`-moz-outline-radius-bottomleft`](/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft)
-- [`-moz-outline-radius-bottomright`](/en-US/docs/Web/CSS/-moz-outline-radius-bottomright)
-- [`-moz-outline-radius-topleft`](/en-US/docs/Web/CSS/-moz-outline-radius-topleft)
-- [`-moz-outline-radius-topright`](/en-US/docs/Web/CSS/-moz-outline-radius-topright)
-
-## Syntax
-
-### Values
-
-> **Note:** Elliptical outlines and `` values follow the syntax described in {{cssxref("border-radius")}}.
-
-One, two, three or four `` values, represents one of:
-
-- {{cssxref("<length>")}}
- - : See {{cssxref("<length>")}} for possible values.
-- {{cssxref("<percentage>")}}
- - : A {{cssxref("<percentage>")}}; see {{cssxref("border-radius")}} for details.
-
-
-
-- If a single value is set, it applies to all 4 corners.
-- If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.
-- If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.
-- If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.
-
-## Formal definition
-
-{{CSSInfo}}
-
-## Formal syntax
-
-```plain
- -moz-outline-radius =
- {1,4} [ / {1,4} ]?
-```
-
-## Examples
-
-### Rounding an outline
-
-Note: This example will not display the desired effect if you are viewing this in a browser other than Firefox.
-
-#### HTML
-
-```html
-This element has a rounded outline!
-```
-
-#### CSS
-
-```css
-p {
- margin: 5px;
- border: 1px solid black;
- outline: dotted red;
- -moz-outline-radius: 12% 1em 25px;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample('Rounding_an_outline')}}
-
-## Notes
-
-- `dotted` or `dashed` radiused corners were rendered as solid until Firefox 50, [Firefox bug 382721](https://bugzil.la/382721)
-- Future versions of Gecko/Firefox may drop this property completely. See [Firefox bug 593717](https://bugzil.la/593717).
-
-## Specifications
-
-Not part of any standard.
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)
-- Related CSS properties:
-
- - [`outline`](/en-US/docs/Web/CSS/outline)
diff --git a/files/en-us/web/css/-moz-user-focus/index.md b/files/en-us/web/css/-moz-user-focus/index.md
index fdec1991b187f96..7141f5ba8c870a6 100644
--- a/files/en-us/web/css/-moz-user-focus/index.md
+++ b/files/en-us/web/css/-moz-user-focus/index.md
@@ -11,6 +11,10 @@ browser-compat: css.properties.-moz-user-focus
The **`-moz-user-focus`** [CSS](/en-US/docs/Web/CSS) property is used to indicate whether an element can have the focus.
+By setting its value to `ignore`, you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence.
+
+## Syntax
+
```css
/* Keyword values */
-moz-user-focus: normal;
@@ -22,28 +26,12 @@ The **`-moz-user-focus`** [CSS](/en-US/docs/Web/CSS) property is used to indicat
-moz-user-focus: unset;
```
-By setting its value to `ignore`, you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence.
-
-{{cssinfo}}
-
-## Syntax
-
### Values
- `ignore`
- - : The element does not accept the keyboard focus and will be skipped in the tab order.
+ - : The element does not accept keyboard focus and will be skipped in the tab order.
- `normal`
- - : The element can accept the keyboard focus.
-- `select-after`
- - : ?
-- `select-before`
- - : ?
-- `select-menu`
- - : ?
-- `select-same`
- - : ?
-- `select-all`
- - : ?
+ - : The element can accept keyboard focus.
- `none`
- : ?
@@ -55,7 +43,7 @@ By setting its value to `ignore`, you can disable focusing the element, which me
```plain
-moz-user-focus =
- ignore | normal | select-after | select-before | select-menu | select-same | select-all | none
+ ignore | normal | none
```
## Examples
diff --git a/files/en-us/web/css/-moz-user-input/index.md b/files/en-us/web/css/-moz-user-input/index.md
index 67b6665e9105f8b..9aa427e4f22d601 100644
--- a/files/en-us/web/css/-moz-user-input/index.md
+++ b/files/en-us/web/css/-moz-user-input/index.md
@@ -12,6 +12,12 @@ browser-compat: css.properties.-moz-user-input
In Mozilla applications, **`-moz-user-input`** determines if an element will accept user input.
+For elements that normally take user input, such as a {{HTMLElement("textarea")}}, the initial value of `-moz-user-input` is `enabled`.
+
+> **Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in [early drafts of a predecessor of the User Interface for CSS3 specification](https://www.w3.org/TR/2000/WD-css3-userint-20000216), but was rejected by the working group.
+
+## Syntax
+
```css
/* Keyword values */
-moz-user-input: none;
@@ -24,12 +30,6 @@ In Mozilla applications, **`-moz-user-input`** determines if an element will acc
-moz-user-input: unset;
```
-For elements that normally take user input, such as a {{HTMLElement("textarea")}}, the initial value of `-moz-user-input` is `enabled`.
-
-> **Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in [early drafts of a predecessor of the User Interface for CSS3 specification](https://www.w3.org/TR/2000/WD-css3-userint-20000216), but was rejected by the working group.
-
-## Syntax
-
### Values
- `none` {{Deprecated_Inline}} {{Non-standard_Inline}}
diff --git a/files/en-us/web/css/-webkit-border-before/index.md b/files/en-us/web/css/-webkit-border-before/index.md
index c8d732e361ac977..c99fda49b2f3bc2 100644
--- a/files/en-us/web/css/-webkit-border-before/index.md
+++ b/files/en-us/web/css/-webkit-border-before/index.md
@@ -11,6 +11,16 @@ browser-compat: css.properties.-webkit-border-before
The **`-webkit-border-before`** [CSS](/en-US/docs/Web/CSS) property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- {{cssxref("-webkit-border-before-color")}}
+- {{cssxref("-webkit-border-before-style")}}
+- {{cssxref("-webkit-border-before-width")}}
+
+## Syntax
+
```css
/* Border values */
-webkit-border-before: 1px;
@@ -20,17 +30,11 @@ The **`-webkit-border-before`** [CSS](/en-US/docs/Web/CSS) property is a shortha
/* Global values */
-webkit-border-before: inherit;
-webkit-border-before: initial;
+-webkit-border-before: revert;
+-webkit-border-before: revert-layer;
-webkit-border-before: unset;
```
-`-webkit-border-before` can be used to set the values for one or more of: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, and {{cssxref("-webkit-border-before-color")}}. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
-
-It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, and {{cssxref("-webkit-border-end")}}, which define the other borders of the element.
-
-This property is on the standard track as {{cssxref("border-block-start")}}.
-
-## Syntax
-
### Values
One or more of the following, in any order:
@@ -42,6 +46,14 @@ One or more of the following, in any order:
- `<'color'>`
- : See {{cssxref("color")}}
+## Description
+
+The `-webkit-border-before` property maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
+
+It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, and {{cssxref("-webkit-border-end")}}, which define the other borders of the element.
+
+The standard-track equivalent of this property is {{cssxref("border-block-start")}}.
+
## Formal definition
{{CSSInfo}}
diff --git a/files/en-us/web/css/-webkit-box-reflect/index.md b/files/en-us/web/css/-webkit-box-reflect/index.md
index 54ff702d6a453a4..3b262e93b4c3fd7 100644
--- a/files/en-us/web/css/-webkit-box-reflect/index.md
+++ b/files/en-us/web/css/-webkit-box-reflect/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-box-reflect
The **`-webkit-box-reflect`** [CSS](/en-US/docs/Web/CSS) property lets you reflect the content of an element in one specific direction.
+## Syntax
+
```css
/* Direction values */
-webkit-box-reflect: above;
@@ -27,11 +29,11 @@ The **`-webkit-box-reflect`** [CSS](/en-US/docs/Web/CSS) property lets you refle
/* Global values */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
+-webkit-box-reflect: revert;
+-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;
```
-## Syntax
-
### Values
- `above`_,_ `below`_,_ `right`_,_ `left`
diff --git a/files/en-us/web/css/-webkit-line-clamp/index.md b/files/en-us/web/css/-webkit-line-clamp/index.md
index 2f6215b02d619bd..ed9e141c567744f 100644
--- a/files/en-us/web/css/-webkit-line-clamp/index.md
+++ b/files/en-us/web/css/-webkit-line-clamp/index.md
@@ -15,7 +15,7 @@ In most cases you will also want to set {{cssxref("overflow")}} to `hidden`, oth
When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
-> **Note:** This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) specification also defines a {{cssxref("line-clamp")}} property, which is meant to replace this property and avoid its issues.
+> **Note:** This property was originally implemented in WebKit and has some issues. It got standardized in [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp) for legacy support. The [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp) specification also defines a {{cssxref("line-clamp")}} property, which is meant to replace this property and avoid its issues.
## Syntax
@@ -30,10 +30,14 @@ When applied to anchor elements, the truncating can happen in the middle of the
/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
+-webkit-line-clamp: revert;
+-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
```
-- `none`
+### Values
+
+- `none` {{experimental_inline}}
- : This value specifies that the content won't be clamped.
- {{cssxref("integer")}}
- : This value specifies the number of lines after which the content will be clamped. It must be greater than 0.
diff --git a/files/en-us/web/css/-webkit-mask-attachment/index.md b/files/en-us/web/css/-webkit-mask-attachment/index.md
index 02d39b9103d8730..fda00a247635ad4 100644
--- a/files/en-us/web/css/-webkit-mask-attachment/index.md
+++ b/files/en-us/web/css/-webkit-mask-attachment/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-mask-attachment
If a {{CSSxRef("mask-image")}} is specified, `-webkit-mask-attachment` determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-attachment: scroll;
@@ -24,11 +26,11 @@ If a {{CSSxRef("mask-image")}} is specified, `-webkit-mask-attachment` determine
/* Global values */
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
+-webkit-mask-attachment: revert;
+-webkit-mask-attachment: revert-layer;
-webkit-mask-attachment: unset;
```
-## Syntax
-
### Values
- scroll
diff --git a/files/en-us/web/css/-webkit-mask-box-image/index.md b/files/en-us/web/css/-webkit-mask-box-image/index.md
index f9ff3418dde2bbb..d199521cfe67f08 100644
--- a/files/en-us/web/css/-webkit-mask-box-image/index.md
+++ b/files/en-us/web/css/-webkit-mask-box-image/index.md
@@ -9,56 +9,92 @@ browser-compat: css.properties.-webkit-mask-box-image
{{CSSRef}} {{ Non-standard_header() }}
-`-webkit-mask-box-image` sets the mask image for an element's border box.
+The non-standard prefixed **`-webkit-mask-box-image`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) property sets the mask image for an element's border box.
-- {{ Xref_cssinitial() }}: none
-- Applies to: all elements
-- {{ Xref_cssinherited() }}: no
-- {{ Xref_csscomputed() }}: as specified
+> **Note:** This property is not standard and is not on any standards track. Consider using the {{CSSXref("mask-border")}} property instead.
+
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- [`-webkit-mask-box-image-source`](/en-US/docs/Web/CSS/mask-border-source)
+- [`-webkit-mask-box-image-outset`](/en-US/docs/Web/CSS/mask-border-outset)
+- [`-webkit-mask-box-image-repeat`](/en-US/docs/Web/CSS/mask-border-repeat)
+
+The values includes the `` to be used as the mask border, and optionally four border outset values and up to two border repeat styles.
## Syntax
-```
--webkit-mask-box-image: [ ]
-```
+```css
+/* default */
+-webkit-mask-box-image: none;
-Where:
+/* image */
+-webkit-mask-box-image: url(image.png);
+
+/* image edge-offset */
+-webkit-mask-box-image: url(image.png) 10 20 20 10;
+-webkit-mask-box-image: url(image.png) 10px 20px 20px 10px;
+
+/* image repeat-style */
+-webkit-mask-box-image: url(image.png) space repeat;
-- \
- - : `{{cssxref("url", "<uri>")}} | | none`
-- \ \ \ \
- - : ` | `
-- \ \
- - : `repeat | stretch | round | space`
+/* image edge-offset repeat-style */
+-webkit-mask-box-image: url(image.png) 10px 20px 20px 10px space repeat;
+
+/* Global values */
+-webkit-mask-box-image: inherit;
+-webkit-mask-box-image: initial;
+-webkit-mask-box-image: revert;
+-webkit-mask-box-image: revert-layer;
+-webkit-mask-box-image: unset;
+```
### Values
-- \
- - : The location of the image resource to be used as a mask image.
-- \
- - : A `-webkit-gradient` function to be used as a mask image.
-- none
+- {{cssxref("<image>")}}
+ - : The location of the image resource to be used as a mask image, {{cssxref("<gradient>")}}, or other {{cssxref("<image>")}} value.
+- `none`
- : Used to specify that a border box is to have no mask image.
-- \
+- {{cssxref("length")}}
- : The size of the mask image's offset. See {{cssxref("<length>")}} for possible units.
-- \
+- `{{cssxref("percentage")}}`
- : The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
-- repeat
+- {{cssxref("number")}}
+ - : The size of the mask image's offset in pixels.
+- `repeat`
- : The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.
-- stretch
+- `stretch`
- : The mask image is stretched to contain the border box exactly.
-- round
+- `round`
- : The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.
-- space
+- `space`
- : The mask image is repeated as many times as possible without stretching. There is no partial mask image at the end of the border box.
+The outset values, or edge offsets, define the distances from the top, right, bottom, and left edges of the image, in that order. The values can be set as {{cssxref("length")}}, {{cssxref("number")}}, or {{cssxref("percentage")}}, with numbers interpreted as pixel lengths.
+
+Border repeat styles, when included, are interpreted in the order of ` `. If only one value is declared, the value is the same for both axes. While similar to `{{cssxref("background-repeat")}}`, the `cover` and `contain` values are not supported.
+
## Formal definition
-{{CSSInfo}}
+- {{ Xref_cssinitial() }}: `none`
+- Applies to: all elements
+- {{ Xref_cssinherited() }}: no
+- {{ Xref_csscomputed() }}: as specified
## Formal syntax
-{{CSSSyntax}}
+```plain
+-webkit-mask-box-image: [{4} {1,2} ]
+
+Where:
+
+ = {{cssxref("url", "<uri>")}} | | none
+
+ = | |
+
+ = repeat | stretch | round | space
+```
## Examples
@@ -88,4 +124,6 @@ Not part of any standard.
## See also
-{{ cssxref("mask") }}, {{ cssxref("mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }}, {{ cssxref("mask-clip") }}, {{ cssxref("mask-image") }}, {{ cssxref("-webkit-mask-composite") }}, {{ cssxref("mask-repeat") }}
+- CSS {{ cssxref("mask-border") }} property
+- CSS {{ cssxref("border-image") }} property
+- [Safari CSS reference: `-webkit-mask-box-image`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW14)
diff --git a/files/en-us/web/css/-webkit-mask-composite/index.md b/files/en-us/web/css/-webkit-mask-composite/index.md
index 28457007255a54f..97bc1721bd5cabe 100644
--- a/files/en-us/web/css/-webkit-mask-composite/index.md
+++ b/files/en-us/web/css/-webkit-mask-composite/index.md
@@ -11,6 +11,10 @@ browser-compat: css.properties.-webkit-mask-composite
The **`-webkit-mask-composite`** property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the {{CSSxRef("mask-image", "-webkit-mask-image")}} property.
+> **Note:** There is a standardized {{CSSxRef("mask-composite")}} property covering parts of this non-standard property using different keywords.
+
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-composite: clear;
@@ -28,13 +32,11 @@ The **`-webkit-mask-composite`** property specifies the manner in which multiple
/* Global values */
-webkit-mask-composite: inherit;
-webkit-mask-composite: initial;
+-webkit-mask-composite: revert;
+-webkit-mask-composite: revert-layer;
-webkit-mask-composite: unset;
```
-> **Note:** There is a standardized {{CSSxRef("mask-composite")}} property covering parts of this non-standard property using different keywords.
-
-## Syntax
-
### Values
- `clear`
diff --git a/files/en-us/web/css/-webkit-mask-position-x/index.md b/files/en-us/web/css/-webkit-mask-position-x/index.md
index 7a0096cff8d40e0..e0e2f4a018fcaea 100644
--- a/files/en-us/web/css/-webkit-mask-position-x/index.md
+++ b/files/en-us/web/css/-webkit-mask-position-x/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-mask-position-x
The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image.
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-position-x: left;
@@ -26,18 +28,19 @@ The `-webkit-mask-position-x` CSS property sets the initial horizontal position
-webkit-mask-position-x: -1cm;
/* Multiple values */
--webkit-mask-position-x: 50px, 25%, -3em;
+-webkit-mask-position-x:
+ 50px,
+ 25%,
+ -3em;
/* Global values */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
+-webkit-mask-position-x: revert;
+-webkit-mask-position-x: revert-layer;
-webkit-mask-position-x: unset;
```
-{{cssinfo}}
-
-## Syntax
-
### Values
- ``
diff --git a/files/en-us/web/css/-webkit-mask-position-y/index.md b/files/en-us/web/css/-webkit-mask-position-y/index.md
index 9aa26c002cb96f3..fd7c9dcd35e76a9 100644
--- a/files/en-us/web/css/-webkit-mask-position-y/index.md
+++ b/files/en-us/web/css/-webkit-mask-position-y/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-mask-position-y
The `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image.
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-position-y: top;
@@ -26,18 +28,19 @@ The `-webkit-mask-position-y` CSS property sets the initial vertical position of
-webkit-mask-position-y: -1cm;
/* Multiple values */
--webkit-mask-position-y: 50px, 25%, -3em;
+-webkit-mask-position-y:
+ 50px,
+ 25%,
+ -3em;
/* Global values */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
+-webkit-mask-position-y: revert;
+-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
```
-{{cssinfo}}
-
-## Syntax
-
### Values
- ``
diff --git a/files/en-us/web/css/-webkit-mask-repeat-x/index.md b/files/en-us/web/css/-webkit-mask-repeat-x/index.md
index 0be090d3d04f757..d4485925323a125 100644
--- a/files/en-us/web/css/-webkit-mask-repeat-x/index.md
+++ b/files/en-us/web/css/-webkit-mask-repeat-x/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-mask-repeat-x
The `-webkit-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally.
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-repeat-x: repeat;
@@ -24,11 +26,11 @@ The `-webkit-mask-repeat-x` property specifies whether and how a mask image is r
/* Global values */
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: revert;
+-webkit-mask-repeat-x: revert-layer;
-webkit-mask-repeat-x: unset;
```
-## Syntax
-
### Values
- repeat
diff --git a/files/en-us/web/css/-webkit-mask-repeat-y/index.md b/files/en-us/web/css/-webkit-mask-repeat-y/index.md
index 49b4858189a0f9e..909d3b1c6f7486d 100644
--- a/files/en-us/web/css/-webkit-mask-repeat-y/index.md
+++ b/files/en-us/web/css/-webkit-mask-repeat-y/index.md
@@ -11,6 +11,8 @@ browser-compat: css.properties.-webkit-mask-repeat-y
The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeated (tiled) vertically.
+## Syntax
+
```css
/* Keyword values */
-webkit-mask-repeat-y: repeat;
@@ -24,11 +26,11 @@ The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeat
/* Global values */
-webkit-mask-repeat-y: inherit;
-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: revert;
+-webkit-mask-repeat-y: revert-layer;
-webkit-mask-repeat-y: unset;
```
-## Syntax
-
### Values
- repeat
diff --git a/files/en-us/web/css/-webkit-overflow-scrolling/index.md b/files/en-us/web/css/-webkit-overflow-scrolling/index.md
index 3784f55c7577eb6..d16a3b205fc1104 100644
--- a/files/en-us/web/css/-webkit-overflow-scrolling/index.md
+++ b/files/en-us/web/css/-webkit-overflow-scrolling/index.md
@@ -13,6 +13,19 @@ The `-webkit-overflow-scrolling` [CSS](/en-US/docs/Web/CSS) property controls wh
## Syntax
+```css
+/* Keyword values */
+-webkit-overflow-scrolling: auto;
+-webkit-overflow-scrolling: touch;
+
+/* Global values */
+-webkit-overflow-scrolling: inherit;
+-webkit-overflow-scrolling: initial;
+-webkit-overflow-scrolling: revert;
+-webkit-overflow-scrolling: revert-layer;
+-webkit-overflow-scrolling: unset;
+```
+
### Values
- `auto`
diff --git a/files/en-us/web/css/-webkit-tap-highlight-color/index.md b/files/en-us/web/css/-webkit-tap-highlight-color/index.md
index 7b03d7a7d24c8ba..95fa428e0df07fa 100644
--- a/files/en-us/web/css/-webkit-tap-highlight-color/index.md
+++ b/files/en-us/web/css/-webkit-tap-highlight-color/index.md
@@ -11,12 +11,19 @@ browser-compat: css.properties.-webkit-tap-highlight-color
**`-webkit-tap-highlight-color`** is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.
+## Syntax
+
```css
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /* for removing the highlight */
-```
-## Syntax
+/* Global values */
+-webkit-tap-highlight-color: inherit;
+-webkit-tap-highlight-color: initial;
+-webkit-tap-highlight-color: revert;
+-webkit-tap-highlight-color: revert-layer;
+-webkit-tap-highlight-color: unset;
+```
### Values
diff --git a/files/en-us/web/css/-webkit-text-fill-color/index.md b/files/en-us/web/css/-webkit-text-fill-color/index.md
index f3ee883854776e1..2d88262487f1f65 100644
--- a/files/en-us/web/css/-webkit-text-fill-color/index.md
+++ b/files/en-us/web/css/-webkit-text-fill-color/index.md
@@ -15,11 +15,13 @@ The **`-webkit-text-fill-color`** CSS property specifies the fill [color](/en-US
/* values */
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
--webkit-text-fill-color: rgb(100, 200, 0);
+-webkit-text-fill-color: rgb(100 200 0);
/* Global values */
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
+-webkit-text-fill-color: revert;
+-webkit-text-fill-color: revert-layer;
-webkit-text-fill-color: unset;
```
diff --git a/files/en-us/web/css/-webkit-text-security/index.md b/files/en-us/web/css/-webkit-text-security/index.md
index b026e55294d92e1..dff4d0e6cad6269 100644
--- a/files/en-us/web/css/-webkit-text-security/index.md
+++ b/files/en-us/web/css/-webkit-text-security/index.md
@@ -7,7 +7,7 @@ status:
browser-compat: css.properties.-webkit-text-security
---
-{{CSSRef}} {{ Non-standard_header() }}
+{{CSSRef}}{{Non-standard_Header}}
**`-webkit-text-security`** is a non-standard CSS property that obfuscates characters in a {{HtmlElement("form")}} field (such as {{HtmlElement("input")}} or {{HtmlElement("textarea")}}) by replacing them with a shape. It only affects fields that are _not_ of `type=password`.
@@ -18,6 +18,13 @@ browser-compat: css.properties.-webkit-text-security
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
+
+/* Global values */
+-webkit-text-security: inherit;
+-webkit-text-security: initial;
+-webkit-text-security: revert;
+-webkit-text-security: revert-layer;
+-webkit-text-security: unset;
```
## Formal definition
diff --git a/files/en-us/web/css/-webkit-text-stroke-color/index.md b/files/en-us/web/css/-webkit-text-stroke-color/index.md
index f1b2ee02e898db5..d04f0a03f412580 100644
--- a/files/en-us/web/css/-webkit-text-stroke-color/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke-color/index.md
@@ -9,20 +9,22 @@ browser-compat: css.properties.-webkit-text-stroke-color
The **`-webkit-text-stroke-color`** CSS property specifies the stroke [color](/en-US/docs/Web/CSS/color_value) of characters of text. If this property is not set, the value of the {{cssxref("color")}} property is used.
+## Syntax
+
```css
/* values */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
+-webkit-text-stroke-color: rgb(200 100 0);
/* Global values */
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: revert;
+-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;
```
-## Syntax
-
### Values
- ``
diff --git a/files/en-us/web/css/-webkit-text-stroke-width/index.md b/files/en-us/web/css/-webkit-text-stroke-width/index.md
index ce77f3f2eb2036a..721e46e711263e2 100644
--- a/files/en-us/web/css/-webkit-text-stroke-width/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke-width/index.md
@@ -26,6 +26,8 @@ The **`-webkit-text-stroke-width`** [CSS](/en-US/docs/Web/CSS) property specifie
/* Global values */
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: revert;
+-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;
```
diff --git a/files/en-us/web/css/-webkit-text-stroke/index.md b/files/en-us/web/css/-webkit-text-stroke/index.md
index fa3c76201c3955c..388b2ec17e49cf4 100644
--- a/files/en-us/web/css/-webkit-text-stroke/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke/index.md
@@ -17,10 +17,9 @@ text-stroke: 4px navy;
/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
+-webkit-text-stroke: revert;
+-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
-text-stroke: inherit;
-text-stroke: initial;
-text-stroke: unset;
```
## Constituent properties
diff --git a/files/en-us/web/css/-webkit-touch-callout/index.md b/files/en-us/web/css/-webkit-touch-callout/index.md
index dff96817b0b6dbd..c3f0c183913c688 100644
--- a/files/en-us/web/css/-webkit-touch-callout/index.md
+++ b/files/en-us/web/css/-webkit-touch-callout/index.md
@@ -13,6 +13,8 @@ The `-webkit-touch-callout` [CSS](/en-US/docs/Web/CSS) property controls the dis
When a target is touched and held on iOS, Safari displays a callout information about the link. This property allows disabling that behavior.
+## Syntax
+
```css
/* Keyword values */
-webkit-touch-callout: default;
@@ -21,11 +23,11 @@ When a target is touched and held on iOS, Safari displays a callout information
/* Global values */
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
+-webkit-touch-callout: revert;
+-webkit-touch-callout: revert-layer;
-webkit-touch-callout: unset;
```
-## Syntax
-
### Values
- `default`
diff --git a/files/en-us/web/css/@charset/index.md b/files/en-us/web/css/@charset/index.md
index 6add216c4e6ccac..f27fb1cfbb13cc1 100644
--- a/files/en-us/web/css/@charset/index.md
+++ b/files/en-us/web/css/@charset/index.md
@@ -7,21 +7,28 @@ browser-compat: css.at-rules.charset
{{CSSRef}}
-The **`@charset`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements), it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules). If several `@charset` at-rules are defined, only the first one is used, and it cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.
+The **`@charset`** [CSS](/en-US/docs/Web/CSS) rule specifies the character encoding used in the style sheet. Although the first character in `@charset` is the `@` symbol, it is not an [at-rule](/en-US/docs/Web/CSS/At-rule). The [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is [fully supported in all browsers](#browser_compatibility).
+
+The following assertions apply to valid `@charset` usage:
+
+- The `@charset` rule must be the first element in the style sheet and not be preceded by any character.
+- `@charset` is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements) and therefore cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
+- If several `@charset` at-rules are defined, only the first one is used.
+- `@charset` cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.
```css
@charset "utf-8";
```
-This at-rule is useful when using non-ASCII characters in some CSS properties, like {{ cssxref("content") }}.
+This at-rule is useful when using non-{{Glossary("ASCII")}} characters in some CSS properties, like {{ cssxref("content") }}.
-As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :
+As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result):
1. The value of the [Unicode byte-order](https://en.wikipedia.org/wiki/Byte_order_mark) character placed at the beginning of the file.
2. The value given by the `charset` attribute of the `Content-Type:` HTTP header or the equivalent in the protocol used to serve the style sheet.
3. The `@charset` CSS at-rule.
4. Use the character encoding defined by the referring document: the `charset` attribute of the {{ HTMLElement("link") }} element. This method is obsolete and should not be used.
-5. Assume that the document is UTF-8
+5. Assume that the document is UTF-8.
## Syntax
@@ -32,7 +39,7 @@ As there are several ways to define the character encoding of a style sheet, the
### Formal syntax
-```
+```plain
@charset "";
```
@@ -43,12 +50,15 @@ As there are several ways to define the character encoding of a style sheet, the
### Valid and invalid charset declarations
-```css-nolint
+```css-nolint example-good
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
-@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
+```
+
+```css-nolint example-bad
+@charset 'iso-8859-15'; /* Invalid, wrong quotes used */
@charset "UTF-8"; /* Invalid, more than one space */
@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
-@charset UTF-8; /* Invalid, without ' or ", the charset is not a CSS {{cssxref("<string>")}} */
+@charset UTF-8; /* Invalid, the charset is a CSS and requires double-quotes */
```
## Specifications
diff --git a/files/en-us/web/css/@color-profile/index.md b/files/en-us/web/css/@color-profile/index.md
index 842f90f3e98ccfc..240dc86be448c09 100644
--- a/files/en-us/web/css/@color-profile/index.md
+++ b/files/en-us/web/css/@color-profile/index.md
@@ -3,6 +3,7 @@ title: "@color-profile"
slug: Web/CSS/@color-profile
page-type: css-at-rule
browser-compat: css.at-rules.color-profile
+spec-urls: https://www.w3.org/TR/css-color-5/#at-profile
---
{{CSSRef}}
@@ -61,4 +62,4 @@ The `src` descriptor specifies the URL to retrieve the color-profile information
## Browser compatibility
-{{Compat}}
+There is no browser implementing this feature.
diff --git a/files/en-us/web/css/@container/index.md b/files/en-us/web/css/@container/index.md
index afd7a27e6eab261..df0c693e7b6bde8 100644
--- a/files/en-us/web/css/@container/index.md
+++ b/files/en-us/web/css/@container/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.container
{{CSSRef}}
-The **`@container`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is a conditional group rule that applies styles to a [containment context](/en-US/docs/Web/CSS/CSS_Container_Queries#naming_containment_contexts).
+The **`@container`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is a conditional group rule that applies styles to a [containment context](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts).
Style declarations are filtered by a condition and applied to the container if the condition is true.
The condition is evaluated when the container changes size.
@@ -51,10 +51,6 @@ Logical keywords can be used to define the container condition:
- `not` negates the condition. Only one 'not' condition is allowed per container query and cannot be used with the `and` or `or` keywords.
```css
-@container not (width < 400px) {
- /* */
-}
-
@container (width > 400px) and (height > 400px) {
/* */
}
@@ -63,7 +59,7 @@ Logical keywords can be used to define the container condition:
/* */
}
-@container (width > 400px) not (height > 400px) {
+@container not (width < 400px) {
/* */
}
```
@@ -234,6 +230,21 @@ The following query evaluates to true and applies the declared style if the cont
}
```
+### Style container queries
+
+{{CSSRef}}{{SeeCompatTable}}
+
+Container queries can also evaluate the computed style of the container element.
+The following container query checks if the {{cssxref("computed_value")}} of the container element's `--accent-color` is `blue`:
+
+```css
+@container style(--accent-color: blue) {
+ /* */
+}
+```
+
+> **Note:** If a custom property has a value of `blue`, the equivalent hexidecimal code `#0000ff` will not match unless the property has been defined as a color with {{cssxref("@property")}} so the browser can properly compare computed values.
+
## Specifications
{{Specifications}}
@@ -244,7 +255,7 @@ The following query evaluates to true and applies the declared style if the cont
## See also
-- [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries)
+- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries)
- {{Cssxref("container-name")}}
- {{Cssxref("container-type")}}
- {{Cssxref("contain")}}
diff --git a/files/en-us/web/css/@counter-style/additive-symbols/index.md b/files/en-us/web/css/@counter-style/additive-symbols/index.md
index 23255ef7d49379f..0ca50e4e70820d1 100644
--- a/files/en-us/web/css/@counter-style/additive-symbols/index.md
+++ b/files/en-us/web/css/@counter-style/additive-symbols/index.md
@@ -7,17 +7,52 @@ browser-compat: css.at-rules.counter-style.additive-symbols
{{CSSRef}}
-The **`additive-symbols`** descriptor lets you specify symbols when the value of a counter {{cssxref('system')}} descriptor is `additive`. The `additive-symbols` descriptor defines _additive tuples_, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct [sign-value numbering](https://en.wikipedia.org/wiki/Sign-value_notation) systems such as Roman numerals.
+The **`additive-symbols`** descriptor of the {{cssxref('@counter-style')}} at-rule is used to specify counter symbols when the `@counter-style` {{cssxref('@counter-style/system', 'system')}} descriptor value is set as `additive`. The additive system is used to construct [sign-value numbering](https://en.wikipedia.org/wiki/Sign-value_notation) systems such as Roman numerals.
## Syntax
```css
-additive-symbols: 3 "0";
-additive-symbols: 3 "0", 2 "\2E\20";
-additive-symbols: 3 "0", 2 url(symbol.png);
+/* Single tuple */
+additive-symbols: 3 "*";
+
+/* Comma-separated list of tuples */
+additive-symbols:
+ 3 "0",
+ 2 "\2E\20",
+ 1 url(symbol.png);
+
+/* Binary counter */
+additive-symbols:
+ 2 "1",
+ 1 "0";
+
+/* Etruscan (a civilization in ancient Italy) counter */
+additive-symbols:
+ 100 "𐌟",
+ 50 "𐌣",
+ 10 "𐌢",
+ 5 "𐌡",
+ 1 "𐌠";
```
-When the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, use the {{cssxref('symbols')}} descriptor instead of `additive-symbols`.
+### Values
+
+The descriptor accepts a comma-separated list of _additive tuples_ with each tuple consisting of the following two values separated by a space:
+
+- {{cssxref("integer")}}
+
+ - : A non-negative integer values specifying the integer weight of the associated symbol value of the tuple.
+
+- [``](/en-US/docs/Web/CSS/@counter-style/symbols#symbol)
+ - : Specifies the counter symbol to be used for the weight value defined by the associated `` weight value of the tuple.
+
+> **Note:** The additive tuples must be specified in order of descending weight; otherwise, the descriptor declaration isn't valid and is ignored.
+
+## Description
+
+The `additive-symbols` descriptor defines a comma-separated list of _additive tuples_. Each _additive tuple_ contains a space-separated non-negative integer and counter symbol. To be valid, the list must be in the descending order of integer. The integer and symbol are concatenated together to form the counter symbol.
+
+When the `system` descriptor value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, use the {{cssxref('symbols')}} descriptor instead of `additive-symbols`.
## Formal definition
@@ -33,25 +68,44 @@ When the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, o
#### HTML
+In this example, {{cssxref("@counter-style/system","system: additive")}} along with the `additive-symbols` descriptor values specify how numbers should be represented as Roman numerals. The value of each {{HTMLElement("li")}} element in the list is converted to a Roman numeral according to the rules defined in {{cssxref("@counter-style")}}.
+
```html
-
+
One
Two
Three
Four
Five
+ 109
+ 110
```
#### CSS
```css
-@counter-style additive-symbols-example {
+@counter-style uppercase-roman {
system: additive;
- additive-symbols: V 5, IV 4, I 1;
+ additive-symbols:
+ 1000 M,
+ 900 CM,
+ 500 D,
+ 400 CD,
+ 100 C,
+ 90 XC,
+ 50 L,
+ 40 XL,
+ 10 X,
+ 9 IX,
+ 5 V,
+ 4 IV,
+ 1 I;
}
-.list {
- list-style: additive-symbols-example;
+
+ul {
+ list-style: uppercase-roman;
+ padding-left: 5em;
}
```
@@ -59,6 +113,8 @@ When the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, o
{{ EmbedLiveSample('Specifying_additive_symbols') }}
+For the list item with the value of `109`, the numeral `C` represents `100`, and `IX` represents `9`. This generates `CIX` counter for the list item `109`. The next list item automatically gets a value of `110`. The roman numeral `CX` is derived from `C` for `100` and `X` for `10`.
+
## Specifications
{{Specifications}}
@@ -69,5 +125,7 @@ When the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, o
## See also
-- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- The {{cssxref("symbols", "symbols()")}}, functional notation is used for creating anonymous counter styles.
+- {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, {{cssxref("@counter-style/fallback", "fallback")}}
+- List style properties: {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
+- {{cssxref("symbols", "symbols()")}} function to create anonymous counter styles
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
diff --git a/files/en-us/web/css/@counter-style/fallback/index.md b/files/en-us/web/css/@counter-style/fallback/index.md
index 161bf264f94370b..816ae39a3056e37 100644
--- a/files/en-us/web/css/@counter-style/fallback/index.md
+++ b/files/en-us/web/css/@counter-style/fallback/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.counter-style.fallback
{{CSSRef}}
-The **`fallback`** descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.
+The **`fallback`** descriptor of the {{cssxref("@counter-style")}} at-rule can be used to specify a counter style to fall back to if the counter style being defined cannot create a marker representation for a particular counter value.
## Syntax
@@ -17,14 +17,20 @@ fallback: lower-alpha;
fallback: custom-gangnam-style;
```
-## Description
+## Value
+
+The descriptor takes a single `` as its value:
+
+- [``](/en-US/docs/Web/CSS/@counter-style#counter-style-name)
+ - : Provides the name of the counter style to be used as the fallback, which is either the case-sensitive `` of a custom CSS counter style (without quotes) or a case-insensitive {{cssxref("list-style-type")}} property value such as `decimal`, `disc`, and so on.
-If the specified fallback style is also unable to construct a representation, then its fallback style will be used. If a valid fallback style is not specified, it defaults to `decimal`.
+If omitted, the counter fallback defaults to `decimal`.
+
+## Description
-A couple of scenarios where a fallback style will be used are:
+The counter style provided as the value of the `fallback` descriptor is used when a {{cssxref('@counter-style/range', 'range')}} descriptor is specified for a counter style; the `fallback` style is used to represent all the values that fall outside the range. The `fallback` style is also used when the `fixed` {{cssxref('@counter-style/system', 'system')}} is used and there are not enough symbols to cover all the list items; the `fallback` style is used to represent all the values beyond the scope of the fixed system. In both these cases, and any other time the defined counter cannot create a specific counter value, the `fallback` style is used.
-- When the {{cssxref('@counter-style/range', 'range')}} descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range.
-- When the `fixed` {{cssxref('@counter-style/system', 'system')}} is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items.
+If the specified fallback style is also unable to construct a representation, then the `fallback` value of that fallback counter is used. If that fallback style's fallback is also unable to construct a representation, then that fallback's fallback is used. This falling back continues until a fallback is found that can construct the counter-representation. If no fallback `fallback` value is able to construct a representation―if a fallback style doesn't have a `fallback` value set, or if a `fallback` value is not specified or invalid―the `fallback` defaults to `decimal`.
## Formal definition
@@ -55,7 +61,7 @@ A couple of scenarios where a fallback style will be used are:
```css
@counter-style fallback-example {
system: fixed;
- symbols: "\24B6""\24B7""\24B8";
+ symbols: "\24B6" "\24B7" "\24B8";
fallback: upper-alpha;
}
@@ -78,5 +84,6 @@ A couple of scenarios where a fallback style will be used are:
## See also
+- Other {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, and {{cssxref("@counter-style/speak-as", "speak-as")}}
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}: the functional notation creating anonymous counter styles
+- {{cssxref("symbols", "symbols()")}}: the functional notation for creating anonymous counter styles
diff --git a/files/en-us/web/css/@counter-style/index.md b/files/en-us/web/css/@counter-style/index.md
index f377e0af9affb64..911d1ca130a3bf0 100644
--- a/files/en-us/web/css/@counter-style/index.md
+++ b/files/en-us/web/css/@counter-style/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.counter-style
{{CSSRef}}
-The **`@counter-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you define counter styles that are not part of the predefined set of styles. A `@counter-style` rule defines how to convert a counter value into a string representation.
+The **`@counter-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The `@counter-style` rule contains [descriptors](#descriptors) defining how the counter value is converted into a string representation.
```css
@counter-style thumbs {
@@ -21,46 +21,60 @@ ul {
}
```
-The initial version of CSS defined a set of useful counter styles. However, although more styles were added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography. The `@counter-style` at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.
+While CSS provides many useful predefined counter styles, the `@counter-style` at-rule offers an open-ended method for creating counters. This at-rule caters to the needs of worldwide typography by allowing authors to define their own counter styles when the predefined styles don't fit their requirements.
## Syntax
-### Descriptors
+The `@counter-style` at-rule is identified by a [counter style name](#counter_style_name), and the style of the named counter can be fine-tuned using a `` consisting of one or more [descriptors](#descriptors) and their values.
+
+### Counter style name
+
+- ``
+
+ - : Provides a name for your counter style. It is specified as a case-sensitive {{cssxref("custom-ident")}} without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Types#css-wide_keywords). Avoid other enumerated CSS property values, including values of [list](/en-US/docs/Web/CSS/CSS_lists#properties) and [counter style](/en-US/docs/Web/CSS/CSS_counter_styles#properties) properties. The name of your counter can't be the case-insensitive {{cssxref("list-style-type")}} property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`.
-Each `@counter-style` is identified by a name and has a set of descriptors.
+ > **Note:** The non-overridable counter style names `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed` cannot be used as the name of a custom counter. However, they are valid in other contexts where the `` data type is expected, such as in `system: extend `.
+
+### Descriptors
- {{cssxref("@counter-style/system", "system")}}
- - : Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
+
+ - : Specifies the algorithm to be used for converting the integer value of a counter to a string representation. If the value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, the `symbols` descriptor must also be specified. If the value is `additive` , the `additive-symbols` descriptor must also be specified.
+
+- {{cssxref("@counter-style/symbols", "symbols")}}
+
+ - : Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. This descriptor is required if the `system` descriptor is set to `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`.
+
+- {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
+ - : Defines the _additive tuples_ for additive systems. While the symbols specified in the `symbols` descriptor are used for constructing marker representation by most algorithms, additive counter systems, such as Roman numerals, consist of a series of weighted symbols. The descriptors is a list of counter symbol along with their non-negative integer weights, listed by weight in descending order. This descriptor is required if the `system` descriptor is set to `additive`.
+
- {{cssxref("@counter-style/negative", "negative")}}
- - : Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
+
+ - : Specifies to symbols to be appended or prepended to the counter representation if the value is negative.
+
- {{cssxref("@counter-style/prefix", "prefix")}}
- - : Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
+
+ - : Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, before any characters added to negative counter values by the `negative` descriptor.
+
- {{cssxref("@counter-style/suffix", "suffix")}}
- - : Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation.
+
+ - : Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation, including after any characters added to negative counter values by the `negative` descriptor.
+
- {{cssxref("@counter-style/range", "range")}}
- - : Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
-- {{cssxref("@counter-style/pad", "pad")}}
- - : Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04, etc., then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
-- {{cssxref("@counter-style/fallback", "fallback")}}
- - : Specifies a system to fall back into if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
-- {{cssxref("@counter-style/symbols", "symbols")}}
- - : Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
+ - : Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of the ranges defined by this descriptor, the counter style will drop back to its `fallback` style.
- The below `@counter-style` rule uses images instead of character symbols. Image values for symbols is currently an 'at risk' feature, and is not implemented in any browser.
+- {{cssxref("@counter-style/pad", "pad")}}
- ```css
- @counter-style winners-list {
- system: fixed;
- symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
- suffix: " ";
- }
- ```
+ - : Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04, etc., then the `pad` descriptor is to be used. For representations larger than the specified `pad` value, the marker is constructed as normal.
-- {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
- - : While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on _additive tuples_ described in this descriptor. Each additive tuple consists of a counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights.
- {{cssxref("@counter-style/speak-as", "speak-as")}}
- - : Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+ - : Describes how speech synthesizers, such as screen readers, should announce the counter style. For example, the value of the list item marker can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+- {{cssxref("@counter-style/fallback", "fallback")}}
+ - : Specifies the counter name of the system to fall back to if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified `range`. If the fallback counter also fails to represent the value, then that counter's fallback is used, if one is specified. If there are either no fallback counters described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the `decimal` style.
## Formal syntax
@@ -86,20 +100,26 @@ The above counter style rule can be applied to lists like this:
}
```
-Which will produce lists like this:
-
-Ⓐ One
-Ⓑ Two
-Ⓒ Three
-Ⓓ Four
-Ⓔ Five
-…
-Ⓨ Twenty-five
-Ⓩ Twenty-six
-27 Twenty-seven
-28 Twenty-eight
-29 Twenty-nine
-30 Thirty
+The above code produces the following result:
+
+```html hidden
+
+ one
+ two
+ three
+ four
+ five
+
+...
+
+ twenty-five
+ twenty-six
+ twenty-seven
+ twenty-eight
+
+```
+
+{{EmbedLiveSample('Specifying symbols with counter-style', '', '300')}}
See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).
diff --git a/files/en-us/web/css/@counter-style/negative/index.md b/files/en-us/web/css/@counter-style/negative/index.md
index ff5a4fe8266f1e8..de2e4951894f25d 100644
--- a/files/en-us/web/css/@counter-style/negative/index.md
+++ b/files/en-us/web/css/@counter-style/negative/index.md
@@ -7,26 +7,30 @@ browser-compat: css.at-rules.counter-style.negative
{{CSSRef}}
-When defining custom counter styles, the **`negative`** descriptor lets you alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.
+The **`negative`** descriptor of the {{cssxref("@counter-style")}} at-rule lets you define how negative counter values are represented when defining custom counter styles. The value of the `negative` descriptor defines the symbols to be added before and after the counter representation when the counter's value is negative.
## Syntax
```css
-/* values */
-negative: "-"; /* Prepends '-' if value is negative */
-negative: "(" ")"; /* Surrounds value by '(' and ')' if it is negative */
+/* One value */
+negative: "--"; /* Adds '--' before if counter value is negative */
+
+/* Two values */
+negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */
```
### Values
-- first ``
- - : This symbol will be prepended to the representation when the counter is negative.
-- second ``
- - : If present, this symbol will be appended to the representation when the counter is negative.
+The `negative` descriptor accepts up to two [``](/en-US/docs/Web/CSS/@counter-style/symbols#values) values.
+
+- ``
+ - : If only one value is specified, it is added before the counter representation when the counter is negative. If two values are specified, the first one is added before and the second one is added after the counter representation when the counter is negative.
## Description
-If the counter value is negative, the symbol provided as value for the descriptor is prepended to the counter representation; and a second symbol if specified, will be appended to the representation. The negative descriptor has effect only if the `system` value is `symbolic`, `alphabetic`, `numeric`, `additive`, or `extends`, if the extended counter style itself uses a negative sign. If the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored.
+If the counter value is negative, the specified `` for the `negative` descriptor is added before the counter representation, replacing the default `-` for negative values. The second ``, if specified, is added after the counter representation.
+
+The `negative` descriptor is relevant in two cases: if counter styles have the `system` value of `symbolic`, `alphabetic`, `numeric`, and `additive` and the count is negative; and if `system` value is `extends` and the extended counter style itself uses a negative sign. For systems that don't support negative counter values, specifying the `negative` descriptor has no effect and is ignored.
## Formal definition
@@ -40,15 +44,17 @@ If the counter value is negative, the symbol provided as value for the descripto
### Rendering negative counters
+This example [extends](/en-US/docs/Web/CSS/@counter-style/system#extends) the [`decimal`](/en-US/docs/Web/CSS/list-style-type#decimal) list style. The `negative` descriptor is used to add `(-` and `)` before and after negative counter values.
+
#### HTML
```html
-
+
+ Negative three
+ Negative two
+ Negative one
+ Zero
One
- Two
- Three
- Four
- Five
```
@@ -56,12 +62,12 @@ If the counter value is negative, the symbol provided as value for the descripto
```css
@counter-style neg {
- system: numeric;
- symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+ system: extends decimal;
negative: "(-" ")";
+ suffix: ": ";
}
-.list {
+ol {
list-style: neg;
}
```
@@ -70,6 +76,8 @@ If the counter value is negative, the symbol provided as value for the descripto
{{ EmbedLiveSample('Rendering negative counters') }}
+The prefix and suffix listed as the value of the `negative` descriptor are only added to the marker when the counter value is less than zero.
+
## Specifications
{{Specifications}}
@@ -80,5 +88,8 @@ If the counter value is negative, the symbol provided as value for the descripto
## See also
-- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.
+- {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, {{cssxref("@counter-style/fallback", "fallback")}}
+- List style properties: {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
+- {{cssxref("symbols", "symbols()")}} function to create anonymous counter styles
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/pad/index.md b/files/en-us/web/css/@counter-style/pad/index.md
index 28c799ace7b4326..312c456dfc4e695 100644
--- a/files/en-us/web/css/@counter-style/pad/index.md
+++ b/files/en-us/web/css/@counter-style/pad/index.md
@@ -7,22 +7,31 @@ browser-compat: css.at-rules.counter-style.pad
{{CSSRef}}
-The **`pad`** descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length.
+The **`pad`** descriptor of the {{cssxref("@counter-style")}} at-rule is used to set a minimum length for marker representations.
## Syntax
```css
pad: 3 "0";
+pad: "+" 5;
```
### Values
-- ` && `
- - : The `` specifies a minimum length that all counter representations must reach. The value must be non-negative. If the minimum length is not reached, the representation will be padded with the specified ``.
+The descriptor accepts the following two values, which are separated by a space and can be specified in any order:
+
+- {{cssxref("integer")}}
+
+ - : Specifies the minimum length that all marker representations must reach. The value must be non-negative. In the case of the `pad` descriptor, this value is also known as the _pad length_.
+
+- [``](/en-US/docs/Web/CSS/@counter-style/symbols#symbol)
+ - : Specifies the symbol to be used for padding if the minimum length defined by the `` is not reached. In the case of the `pad` descriptor, this value is also known as the _padding symbol_.
## Description
-If a marker representation is smaller than the specified pad length, then the marker will be padded with the specified pad symbol. Marker representations longer than the pad length are constructed as normal. Pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. A common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3…
+Use the `pad` descriptor when you need the marker representations to be of a minimum length. If a marker representation is shorter than the specified pad length, then the marker representation will be padded with the specified padding symbol. Marker representations longer than the pad length are displayed without any additional padding.
+
+The `pad` descriptor takes an `` for the minimum marker length and a `` for the padding. A common use case of the `pad` descriptor is when you need a list to start numbering from `01` and go through `02`, `03`, `04`, and so on, instead of just `1`, `2`, `3`, and `4`. By specifying the `pad` descriptor as `pad: 2 "0"` in this case, the browser ensures to make the counter at least two characters long and adds a padding with `0` to reach the minimum two-character length where needed. Counters that are already two or more characters long in this example will be displayed normally, without padding.
## Formal definition
@@ -36,15 +45,20 @@ If a marker representation is smaller than the specified pad length, then the ma
### Padding a counter
+This example extends the `decimal` {{cssxref("@counter-style/system","system")}} to create a counter that is at least three characters long, padding shorter counters with `0` to reach that minimum length. A {{cssxref("@counter-style/suffix", "suffix")}} descriptor has been added to make the output more legible.
+
#### HTML
```html
-
+
One
Two
Three
- Four
- Five
+ Forty
+ Forty-one
+ Two hundred
+ Three thousand
+ and so on
```
@@ -52,19 +66,19 @@ If a marker representation is smaller than the specified pad length, then the ma
```css
@counter-style pad-example {
- system: numeric;
- symbols: "0" "1" "2" "3" "4" "5";
- pad: 2 "0";
+ system: extends decimal;
+ suffix: ": ";
+ pad: 3 "0";
}
-.list {
+ul {
list-style: pad-example;
}
```
#### Result
-{{ EmbedLiveSample('Padding a counter') }}
+{{ EmbedLiveSample('Padding a counter', '100', '200') }}
## Specifications
@@ -76,5 +90,8 @@ If a marker representation is smaller than the specified pad length, then the ma
## See also
-- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.
+- {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, {{cssxref("@counter-style/fallback", "fallback")}}
+- List style properties: {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
+- {{cssxref("symbols", "symbols()")}} function to create anonymous counter styles
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/prefix/index.md b/files/en-us/web/css/@counter-style/prefix/index.md
index 61569a627819232..d2b457ccaab7420 100644
--- a/files/en-us/web/css/@counter-style/prefix/index.md
+++ b/files/en-us/web/css/@counter-style/prefix/index.md
@@ -7,12 +7,14 @@ browser-compat: css.at-rules.counter-style.prefix
{{CSSRef}}
-The **`prefix`** descriptor of the {{cssxref('@counter-style')}} rule specifies content that will be prepended to the marker representation. If not specified, the default value will be `""` (an empty string).
+The {{cssxref('@counter-style')}} rule's **`prefix`** descriptor specifies content that will be added to the beginning of the counter's marker representation.
+
+When the counter value is negative, the `prefix` comes before the negative sign and any other ``s added by the {{cssxref("@counter-style/negative", "negative")}} descriptor.
## Syntax
```css
-/* values */
+/* value: string, image, or identifier */
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
@@ -20,8 +22,10 @@ prefix: url(bullet.png);
### Values
+The **`prefix`** descriptor takes as its value a single ``:
+
- ``
- - : Specifies a `` that is prepended to the marker representation. It may be a {{cssxref("<string>")}}, {{cssxref("<image>")}}, or {{cssxref("<custom-ident>")}}.
+ - : Specifies a `` — a {{cssxref("<string>")}}, {{cssxref("<image>")}}, or {{cssxref("<custom-ident>")}} — that is prepended to the marker representation.
## Formal definition
@@ -35,29 +39,32 @@ prefix: url(bullet.png);
### Adding a prefix to a counter
+In this example, each counter number is prefixed by "Book " (with a space) and followed by a colon (`:`). The colon is added with the {{cssxref("@counter-style/suffix", "suffix")}} descriptor.
+
#### HTML
```html
-
- The Boy Who Lived
- The Vanishing Glass
- The Letters from No One
- The Keeper of the Keys
- Diagon Alley
-
+
+ Flamer, by Mike Curato
+ Gender Queer: A Memoir, by Maia Kobabe
+ Tricks, by Ellen Hopkins
+ The Handmaid’s Tale: The Graphic Novel, by Margaret Atwood
+ Crank, by Ellen Hopkins
+
```
#### CSS
```css
-@counter-style chapters {
+@counter-style books {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
- prefix: "Chapter ";
+ prefix: "Book ";
+ suffix: ": ";
}
-.index {
- list-style: chapters;
+.books {
+ list-style: books;
padding-left: 15ch;
}
```
@@ -76,5 +83,8 @@ prefix: url(bullet.png);
## See also
+- Other {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, and {{cssxref("@counter-style/fallback", "fallback")}}
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles
+- {{cssxref("symbols", "symbols()")}}: the functional notation for creating anonymous counter styles
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/range/index.md b/files/en-us/web/css/@counter-style/range/index.md
index 99c0da217904a6c..4a89e3cbe1a2586 100644
--- a/files/en-us/web/css/@counter-style/range/index.md
+++ b/files/en-us/web/css/@counter-style/range/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.counter-style.range
{{CSSRef}}
-When defining custom counter styles, the **`range`** descriptor lets the author specify a range of counter values over which the style is applied. If a counter value is outside the specified range, then the fallback style will be used to construct the representation of that marker.
+The **`range`** descriptor lets the author specify one or more ranges of counter values for which the style is applied when defining custom counter styles with the {{cssxref("@counter-style")}} at-rule. When the `range` descriptor is included, the defined counter will only be used for values in the set ranges. If the counter value is outside the specified range, the fallback style will be used to construct the representation of that marker.
## Syntax
@@ -22,32 +22,49 @@ range: 6 infinite;
range: infinite infinite;
/* Multiple range values */
-range: 2 5, 8 10;
-range: infinite 6, 10 infinite;
+range:
+ 2 5,
+ 8 10;
+range:
+ infinite 6,
+ 10 infinite;
```
### Values
+The value is a comma-separated list of ranges each including a lower and upper limit or the the keyword `auto`.
+
- `auto`
- - : The range depends on the counter system:
+ - : The entire set of numbers representable by the counter {{cssxref("@counter-style/system","system")}}. Those range values depends on the counter system:
- - For cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
- - For alphabetic and symbolic systems, the range is 1 to positive infinity.
- - For additive systems, the range is 0 to positive infinity.
- - For extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§7 Complex Predefined Counter Styles), the range is the style's defined range.
+ - For `cyclic`, `numeric`, and `fixed` systems, the range is negative `infinity` to positive `infinity`.
+ - For `alphabetic` and `symbolic` systems, the range is `1` to positive `infinity`.
+ - For `additive` systems, the range is `0` to `positive` infinity.
+ - When using `extend` to extend a system, the range is whatever `auto` would produce for the system being extended, including extensions of complex predefined styles, such as some Japanese, Korean, Chinese, and Ethiopian counter styles.
-- `[ [ | infinite ]{2} ]#`
- - : Defines a comma-separated list of ranges. For each individual range, the first value is the lower bound and the second value is the upper bound. A range is inclusive, that means it always contains both, the lower and upper bound numbers. If infinite is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The range of the counter style is the union of all the ranges defined in the list.
- If the lower bound of any range is higher than the upper bound, the entire descriptor is invalid and will be ignored.
+- `[ [ | infinite ]{2} ]#`
+ - : Each range within the comma separated list of ranges includes two values, each being either an {{cssxref("integer")}} or the keyword `infinite`. If `infinite` is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The first value of each range is the lower bound for the range and the second value is the upper bound, inclusive. If the lower bound of any range in the list is higher than the upper bound, the entire `range` descriptor is invalid and will be ignored.
## Description
-The value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.
+The value of the `range` descriptor can be either `auto` or a comma separated list of lower and upper bound ranges specified using negative or positive integers or the keyword `infinite`.
+
+### Understanding `auto`
+
+When the value is set to `auto`, the range is the default range for the counter system. If the `system` is `cyclic`, `numeric`, or `fixed`, the range will be from negative infinity to positive infinity. If the `system` is `alphabetic` or `symbolic`, the range will be from `1` to positive `infinity`. For `system: additive`, `auto` results in the range `0` to positive `infinity`.
+
+When extending a counter, if `range` is set to `auto`, the range value will be the range of the `system` of the counter that is being extended, not the `range` value, if any, of that counter. For example, if counter "B" has the `system: extends A` set, with counter being an `alphabetic` counter, setting `range: auto` on "B" sets the range of "B" from `1` to `infinity`. This is the range of the `alphabetic` system, not necessarily the range set in the "A" counter style definiton. With `range: auto` set on "B", the `range` is set to the default range of the `alphabetic` system, not the `range` value set in counter A's descriptor list.
+
+### `infinite` explained
-If value is auto, then for cyclic, numeric, and fixed system, the range will be from negative infinity to positive infinity. For alphabetic and symbolic systems, range will be from 1 to positive infinity. For additive systems, auto will result in the range 0 to positive infinity. For extends systems, the range is whatever auto will produce for the extended system.
+When range is specified as integers (versus `auto`), the value `infinite` can be used to denote infinity. If _infinite_ is specified as the first value in a range, then it is interpreted as negative infinity. If used as the upper bound, the second value in the range pair, it is taken as positive infinity.
-When range is specified as integers, the value `infinite` can be used to denote infinity. If _infinite_ is specified as the first value in a range, then it is interpreted as negative infinity. If used as upper bound, it is taken as positive infinity.
+### List of ranges
+
+The value of `range` is either `auto`, discussed above, or a comma separated list of one or more ranges. The range of the counter style is the union of all the ranges defined in the list.
+
+Each range in the list of ranges takes two values. Those values are either an {{cssxref("integer")}} or the keyword `infinite`. The first value is the _lower bound_, inclusive. The second value is the _upper bound_, inclusive. For two integer values, the lower value must come first. If the lower bound of any range in the list is higher than the upper bound, the entire `range` descriptor is invalid and will be ignored. The `infinite` keyword will not invalidated the range as it's position determines it's value; either negative or positive infinity based on whether it's the lower bound or upper bound, respectively.
## Formal definition
@@ -61,6 +78,8 @@ When range is specified as integers, the value `infinite` can be used to denote
### Setting counter style over a range
+#### HTML
+
```html
One
@@ -76,11 +95,15 @@ When range is specified as integers, the value `infinite` can be used to denote
```
+#### CSS
+
```css
@counter-style range-multi-example {
system: cyclic;
- symbols: "\25A0""\25A1";
- range: 2 4, 7 9;
+ symbols: "\25A0" "\25A1";
+ range:
+ 2 4,
+ 7 9;
}
.list {
@@ -88,9 +111,11 @@ When range is specified as integers, the value `infinite` can be used to denote
}
```
-The above list will display as follows:
+#### Result
+
+{{EmbedLiveSample('Setting counter style over a range')}}
-{{EmbedLiveSample('Setting counter style over a range')}}:
+The first range is the list of ranges includes 2, 3, and 4. The second includes 7, 8, and 9. The range is the union of these two ranges, or 2, 3, 4, 7, 8, and 9.
## Specifications
@@ -102,5 +127,8 @@ The above list will display as follows:
## See also
+- Other {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, and {{cssxref("@counter-style/fallback", "fallback")}}
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.
+- {{cssxref("symbols", "symbols()")}}: the functional notation for creating anonymous counter styles.
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/speak-as/index.md b/files/en-us/web/css/@counter-style/speak-as/index.md
index 8b49a0988c5f9ab..846eec5c5c402fe 100644
--- a/files/en-us/web/css/@counter-style/speak-as/index.md
+++ b/files/en-us/web/css/@counter-style/speak-as/index.md
@@ -49,7 +49,7 @@ speak-as: ;
Assistive technology support is very limited for the `speak-as` property. Do not rely on it to convey information critical to understanding the page's purpose.
-[Let's Talk About Speech CSS | CSS Tricks](https://css-tricks.com/lets-talk-speech-css/)
+[Let's Talk About Speech CSS | CSS Tricks](https://css-tricks.com/lets-talk-speech-css/) (2017)
## Formal definition
@@ -63,15 +63,19 @@ Assistive technology support is very limited for the `speak-as` property. Do not
### Setting the spoken form for a counter
+In this example, the counter system is fixed with unintelligible symbols used for the visual markers. However, the `speak-as` descriptor is used to set the list item markers as numbers in the accessibility tree. When supported, numbers rather than visual markers will be read out by screen readers.
+
+To experience the result of the `speak-as` descriptor, use assistive technology such as VoiceOver or another screen reader or view the [accessibility panel](https://firefox-source-docs.mozilla.org/devtools-user/index.html#accessibility-inspector) in the developer tools of a browser that supports `speak-as`.
+
#### HTML
```html
- One
- Two
- Three
- Four
- Five
+ I had one apple
+ I ate two bananas
+ I devoured three oranges
+ I am not hungry for dinner
+ But I'll have five scopps of ice cream for desert
```
@@ -104,5 +108,8 @@ Assistive technology support is very limited for the `speak-as` property. Do not
## See also
+- Other {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, and {{cssxref("@counter-style/fallback", "fallback")}}
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.
+- {{cssxref("symbols", "symbols()")}}: the functional notation for creating anonymous counter styles.
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/suffix/index.md b/files/en-us/web/css/@counter-style/suffix/index.md
index aed4b3e842340a3..2002e6a18f802c1 100644
--- a/files/en-us/web/css/@counter-style/suffix/index.md
+++ b/files/en-us/web/css/@counter-style/suffix/index.md
@@ -7,12 +7,12 @@ browser-compat: css.at-rules.counter-style.suffix
{{CSSRef}}
-The **`suffix`** descriptor of the {{cssxref("@counter-style")}} rule specifies content that will be appended to the marker representation.
+The **`suffix`** descriptor of the {{cssxref("@counter-style")}} rule specifies content that will be added to the end of the marker representation.
## Syntax
```css
-/* values */
+/* value: string, image, or identifier */
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
@@ -20,6 +20,8 @@ suffix: url(bullet.png);
### Values
+The **`suffix`** descriptor takes as its value a single ``:
+
- ``
- : Specifies a `` that is appended to the marker representation. It may be a {{cssxref("<string>")}}, {{cssxref("<image>")}}, or {{cssxref("<custom-ident>")}}.
@@ -74,5 +76,8 @@ suffix: url(bullet.png);
## See also
+- Other {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, and {{cssxref("@counter-style/fallback", "fallback")}}
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles
+- {{cssxref("symbols", "symbols()")}}: the functional notation for creating anonymous counter styles
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
+- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
diff --git a/files/en-us/web/css/@counter-style/symbols/index.md b/files/en-us/web/css/@counter-style/symbols/index.md
index be1854a304f51c9..8fcc7dbaa9fa527 100644
--- a/files/en-us/web/css/@counter-style/symbols/index.md
+++ b/files/en-us/web/css/@counter-style/symbols/index.md
@@ -7,35 +7,36 @@ browser-compat: css.at-rules.counter-style.symbols
{{CSSRef}}
-The **`symbols`** [CSS](/en-US/docs/Web/CSS) descriptor is used to specify the symbols that the specified counter system will use to construct counter representations.
+The **`symbols`** [CSS](/en-US/docs/Web/CSS) descriptor of the {{cssxref("@counter-style")}} at-rule is used to specify the symbols for creating counter representations in the specified counter system. Specifying this descriptor is mandatory when the value of the {{cssxref('@counter-style/system', 'system')}} descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`.
## Syntax
-The `symbols` descriptor is specified as one or more ``s.
+```css
+symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url("one.svg") url("two.svg") url("three.svg");
+symbols: indic-numbers;
+```
### Values
-- ``
+The `symbols` descriptor is specified as a list of one or more space-separated `` values.
- - : Represents a symbol used within the counter system. This must be one of the following data types:
+- ``
+ - : Specifies the symbol to use within the counter system. Each symbol in the list can be either a {{cssxref("<string>")}}, an {{cssxref("<image>")}}, or a {{cssxref("<custom-ident>")}}. The `` value can, in turn, be specified as a {{cssxref("<url>")}} or {{cssxref("<gradient>")}}.
- - {{cssxref("<string>")}}
- - {{cssxref("<image>")}} (Note: This value is "at risk" and may be removed from the specification. It is not yet implemented.)
- - {{cssxref("<custom-ident>")}}
+> **Note:** When using an {{glossary("identifier")}} for a symbol, note that {{glossary("ASCII")}} non-letters such as `*`, `"`, and `\` are not considered identifiers. They must be either quoted as a string or escaped.
## Description
A symbol can be a string, image, or identifier. It is used within the {{cssxref("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
-```css
-symbols: A B C D E;
-symbols: "\24B6""\24B7""\24B8"D E;
-symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
-symbols: url("first.svg") url("second.svg") url("third.svg");
-symbols: indic-numbers;
-```
+When the value of the {{cssxref('@counter-style/system', 'system')}} descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, the `symbols` descriptor must be specified. For the `additive` system, use the {{cssxref('@counter-style/additive-symbols', 'additive-symbols')}} descriptor instead to specify the symbols.
+
+While a space between quoted symbols is not required, it makes CSS more readable. To use a quote as a symbol, either escape the quote character or enclose the character within different quotes, such as `"'"`.
-The `symbols` descriptor must be specified when the value of the {{cssxref('@counter-style/system', 'system')}} descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`. When the `additive` system is used, use the {{cssxref('@counter-style/additive-symbols', 'additive-symbols')}} descriptor instead to specify the symbols.
+When defining symbols with identifiers instead of strings, be sure to use identifier syntax rules. For example, as noted above, ASCII non-letters such as `*` are not identifiers and must be either quoted or escaped. Hex escape characters are followed by a space. This space may look like the space separating two identifiers, but it enables digits to follow hex-escaped characters. This means that two spaces must be included after a hex-escaped identifier to separate it from the next identifier. For example, it is better to use the string `"\2A 1"` instead of `\2A 1` with two spaces, as your code tools might remove double spaces. It is generally safer to quote identifiers that need to be escaped or use strings.
## Formal definition
@@ -49,6 +50,8 @@ The `symbols` descriptor must be specified when the value of the {{cssxref('@cou
### Setting counter symbols
+In this example, the list of values for the `symbols` descriptor include letters (`A`, `D`, `E`), a number within quotes (`"1"`), and a hex-escape identifier within quotes (`"\24B7"`) for the character `Ⓑ`.
+
#### HTML
```html
@@ -66,7 +69,7 @@ The `symbols` descriptor must be specified when the value of the {{cssxref('@cou
```css
@counter-style symbols-example {
system: fixed;
- symbols: A "1" "\24B7"D E;
+ symbols: A "1" "\24B7" D E;
}
.list {
@@ -88,7 +91,8 @@ The `symbols` descriptor must be specified when the value of the {{cssxref('@cou
## See also
-- The `symbols` descriptor is used within the {{cssxref("@counter-style")}} at-rule.
-- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
-- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles
+- {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, {{cssxref("@counter-style/fallback", "fallback")}}
+- List style properties: {{cssxref("list-style")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}
+- {{cssxref("symbols", "symbols()")}} function
- {{cssxref("url", "url()")}} function
+- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
diff --git a/files/en-us/web/css/@counter-style/system/index.md b/files/en-us/web/css/@counter-style/system/index.md
index 6618e01cfe48939..5737d89559d72bf 100644
--- a/files/en-us/web/css/@counter-style/system/index.md
+++ b/files/en-us/web/css/@counter-style/system/index.md
@@ -22,30 +22,25 @@ system: symbolic;
system: additive;
system: fixed;
-/* Combined values */
+/* Other values */
system: fixed 3;
system: extends decimal;
+system: extends circled-letters;
```
+## Values
+
This may take one of three forms:
- One of the keyword values `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, or `fixed`.
- The keyword value `fixed` along with an integer.
-- The keyword value or `extends` along with a {{cssxref("@counter-style")}} name.
+- The keyword value `extends` along with a [``](/en-US/docs/Web/CSS/@counter-style#counter-style-name) value.
-
+The values include:
- `cyclic`
- - : Cycles through the list of symbols provided. Once the end of the list of symbols is reached, it will loop back to the beginning and start over. This system is useful for simple bullet styles with just one symbol, or for styles having multiple symbols. At least one symbol must be specified in the `symbols` descriptor, or the counter style is not valid.
-- `fixed`
- - : Defines a finite set of symbols are specified. Once the system has looped through all the specified symbols, it will fall back. This system is useful in cases where the counter values are finite. At least one symbol must be specified in the `symbols` descriptor or the counter style is not valid. Also an optional {{cssxref("<integer>")}} can be specified after the system, as the value of the first symbol. If this integer is omitted, value of the first integer is taken as `1`.
-- `symbolic`
- - : Cycles through the provided list of symbols. On each successive pass through the cycle, the symbols used for the counter representation are doubled, tripled, and so on. For example, if the original symbols provided were "◽" and "◾", on each successive pass, they will become "◽◽" and "◾◾", "◽◽◽" and "◾◾◾" and so on. At least one symbol must be specified in the `symbols` descriptor or the counter style is not valid. This counter system works for positive counter values only.
-- `alphabetic`
- - : Interprets the specified symbols as digits, to an alphabetic numbering system. If the characters `"a"` to `"z"` are specified as symbols in a counter style, with the `alphabetic` system, then the first 26 counter representations will be `"a"`, `"b"` up to `"z"`. Until this point, the behavior is the same as that of the `symbolic` system, described above. However, after `"z"`, it will continue as `"aa"`, `"ab"`, `"ac"`…
-
- The `symbols` descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. This system is also defined strictly over positive counter values.
+ - : Cycles through the list of symbols provided in the [`symbols`](/en-US/docs/Web/CSS/@counter-style/symbols) descriptor. Once the end of the list is reached, the cycle will loop back to the beginning and start over. This value is useful both for basic bullet styles with just one symbol and for styles with multiple symbols. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid.
- `numeric`
@@ -53,17 +48,33 @@ This may take one of three forms:
At least two counter symbols must be specified in the `symbols` descriptor or the counter style is not valid.
+- `alphabetic`
+
+ - : Interprets the specified symbols as digits, to an alphabetic numbering system. If the characters `"a"` to `"z"` are specified as symbols in a counter style, with the `alphabetic` system, then the first 26 counter representations will be `"a"`, `"b"` up to `"z"`. Until this point, the behavior is the same as that of the `symbolic` system, described above. However, after `"z"`, it will continue as `"aa"`, `"ab"`, `"ac"`…
+
+ The `symbols` descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. This system is also defined strictly over positive counter values.
+
+- `symbolic`
+
+ - : Cycles through the symbols provided in the `symbols` descriptor list repeatedly, doubling, tripling, and so on, the symbols on each successive pass through the list. For example, if two symbols "◽" and "◾" are specified in the `symbols` descriptor, on each successive pass, they will become "◽◽" and "◾◾", then "◽◽◽" and "◾◾◾", and so on in subsequent passes. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid. This counter system works for positive counter values only.
+
- `additive`
- : Used to represent "sign-value" numbering systems, such as Roman numerals, which rather than reuse digits in different positions to obtain different values, define additional digits for larger values. The value of a number in such a system can be found out by adding the digits in the number.
An additional descriptor called `additive-symbols` must be specified with at least one _additive tuple_, or else the counter style rule will not be valid. An additive tuple is similar to a composite counter symbol, which is made up of two parts: a normal counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights or the system is invalid.
+- `fixed` or `fixed `
+
+ - : Defines a finite set of symbols, iterating once through the list of symbols provided in the `symbols` descriptor. Once the specified symbols have been iterated through, the fallback counter style is used. This keyword value is useful in cases where the counter style values are finite. At least one symbol must be specified in the `symbols` descriptor, otherwise the counter style is not valid. The `fixed` keyword can be followed by an optional {{cssxref("<integer>")}} value. If specified, the `` value indicates the item in the list that will get the first symbol from the list of symbols. If omitted, the default value of `integer` is `1`, which gives the first item in the list the first symbol.
+
- `extends`
- - : Allows authors to use the algorithm of another counter style, but alter its other aspects. If a counter style rule is using the `extends` system, any unspecified descriptors, and their values will be taken from the extended counter style specified. If the specified counter style name in extends, is not a currently defined counter style name, it will instead extend from the decimal counter style.
+ - : Extends the algorithm of another browser- or author-defined counter style by allowing the alteration of some aspects of the extended counter style. Any unspecified descriptors and their values are inherited from the extended counter style specified. If the counter style name specified with `extends` is not yet defined, the `decimal` counter style will be extended by default.
+
+ It must not contain a `symbols` or `additive-symbols` descriptor, otherwise the counter style rule will be invalid. If one or more counter styles definitions form a cycle with their `extends` values, the browser will treat all the participating counter styles as extending from the `decimal` style.
- It must not contain a `symbols` or `additive-symbols` descriptor, or else the counter style rule is invalid. If one or more counter styles definitions form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style.
+> **Note:** The [`symbols`](/en-US/docs/Web/CSS/@counter-style/symbols) descriptor is required when the value is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`. The [`additive-symbols`](/en-US/docs/Web/CSS/@counter-style/additive-symbols) descriptor is required if the `additive` value is set.
## Formal definition
@@ -77,13 +88,7 @@ This may take one of three forms:
### Cyclic counter
-If your browser supports it, this example will render a list like this:
-
-```
-◉ One
-◉ Two
-◉ Three
-```
+The `cyclic` value iterates through the list of symbols, repeating the list as necessary:
#### CSS
@@ -92,14 +97,17 @@ If your browser supports it, this example will render a list like this:
One
Two
Three
+ Four
+ Five
+ Six
```
```css
@counter-style fisheye {
system: cyclic;
- symbols: ◉;
- suffix: " ";
+ symbols: ◉ ➀;
+ suffix: ": ";
}
ul {
@@ -113,15 +121,7 @@ ul {
### Fixed counter
-If your browser supports it, this example will render a list like this:
-
-```
-➀ One
-➁ Two
-➂ Three
-4 Four
-5 Five
-```
+The `fixed` value iterates through the list of symbols only once, starting the single cycle at the list item number indicated by the `integer` value:
#### CSS
@@ -132,14 +132,15 @@ If your browser supports it, this example will render a list like this:
Three
Four
Five
+ Six
```
```css
@counter-style circled-digits {
- system: fixed;
+ system: fixed 3;
symbols: ➀ ➁ ➂;
- suffix: " ";
+ suffix: ": ";
}
ul {
@@ -153,18 +154,7 @@ ul {
### Symbolic counter
-If your browser supports it, this example will render a list like this:
-
-```
- a. One
- b. Two
- c. Three
- aa. Four
- bb. Five
- cc. Six
-aaa. Seven
-bbb. Eight
-```
+The `symbolic` value loops through the list defined in the `symbols` descriptor, doubling and tripling the number of symbols for the second and third cycles through the list, respectively:
#### CSS
@@ -199,19 +189,6 @@ ul {
### Alphabetic counter
-If your browser supports it, this example will render a list like this:
-
-```
- a. One
- b. Two
- c. Three
-aa. Four
-ab. Five
-ac. Six
-ba. Seven
-bb. Seven
-```
-
#### CSS
```html hidden
@@ -245,22 +222,9 @@ ul {
### Numeric counter
-If your browser supports it, this example will render a list like this:
-
-```
- b. One
- c. Two
-ba. Three
-bb. Four
-bc. Five
-ca. Six
-cb. Seven
-cc. Eight
-```
-
The first symbol provided in the `symbols` descriptor is interpreted as `0` here.
-#### CSS
@@ -334,28 +298,45 @@ This example renders a list using Roman numerals. Notice that a `range` is speci
#### HTML
+We use the [`start`](/en-US/docs/Web/HTML/Element/ol#start) attribute on the {{HTMLElement("ol")}} element to demonstrate that counting doesn't need to start at `1`. Additionally, we use the [`value`](/en-US/docs/Web/HTML/Element/li#value) attribute on the fifth {{HTMLElement("li")}} element to demonstrate that the counters you define using `@counter-style` behave just like native counters.
+
```html
-
- One
- Two
- Three
- Four
- Five
-
+
+ 48
+ 49
+ 50
+ 51
+ 109
+ 110
+
```
#### CSS
```css
-@counter-style upper-roman {
+@counter-style uppercase-roman {
system: additive;
range: 1 3999;
- additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL,
- 10 X, 9 IX, 5 V, 4 IV, 1 I;
+ additive-symbols:
+ 1000 M,
+ 900 CM,
+ 500 D,
+ 400 CD,
+ 100 C,
+ 90 XC,
+ 50 L,
+ 40 XL,
+ 10 X,
+ 9 IX,
+ 5 V,
+ 4 IV,
+ 1 I;
}
-ul {
- list-style: upper-roman;
+ol {
+ list-style: uppercase-roman;
+ padding-left: 5em;
}
```
@@ -363,9 +344,9 @@ ul {
{{ EmbedLiveSample('Additive_counter', '') }}
-### Extends example
+### Extending a counter
-This example will use the algorithm, symbols, and other properties of the `lower-alpha` counter style, but will remove the period (`'.'`) after the counter representation, and enclose the characters in parenthesis; like `(a)`, `(b)`, etc.
+This example uses the algorithm, symbols, and other properties of [`lower-alpha`](/en-US/docs/Web/CSS/list-style-type#lower-alpha), one of the several native {{CSSXref("list-style-type")}} counter values, but extends it by removing the period (`'.'`) after the counter representation and enclosing the characters in parentheses, as in `(a)` and `(b)`.
#### HTML
@@ -395,7 +376,7 @@ ul {
#### Result
-{{ EmbedLiveSample('Extends_example') }}
+{{ EmbedLiveSample('Extending_a_counter') }}
## Specifications
@@ -407,5 +388,6 @@ ul {
## See also
-- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
+- Other {{cssxref("@counter-style")}} descriptors, including {{cssxref("@counter-style/symbols", "symbols")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, and {{cssxref("@counter-style/fallback", "fallback")}}
+- {{cssxref("list-style")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}
- {{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.
diff --git a/files/en-us/web/css/@document/index.md b/files/en-us/web/css/@document/index.md
index be838180f8157ca..c76fe6f6247650a 100644
--- a/files/en-us/web/css/@document/index.md
+++ b/files/en-us/web/css/@document/index.md
@@ -34,7 +34,7 @@ An `@document` rule can specify one or more matching functions. If any of the fu
- `media-document()`
- : Matches the media according to the string in parameter, one of `video`, `image`, `plugin` or `all`.
- `regexp()` {{Deprecated_Inline}} {{Non-standard_Inline}}
- - : Matches if the document URL is matched by the [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) provided. The expression must match the entire URL.
+ - : Matches if the document URL is matched by the [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) provided. The expression must match the entire URL.
The values provided to the `url()`, `url-prefix()`, `domain()`, and `media-document()` functions can be optionally enclosed by single or double quotes. The values provided to the `regexp()` function _must_ be enclosed in quotes.
@@ -46,7 +46,7 @@ Escaped values provided to the `regexp()` function must additionally be escaped
## Formal syntax
-```
+```plain
@document [ |
url-prefix() |
domain() |
diff --git a/files/en-us/web/css/@font-face/ascent-override/index.md b/files/en-us/web/css/@font-face/ascent-override/index.md
index 5da9ac7205aa14e..f20744cfd51fc1b 100644
--- a/files/en-us/web/css/@font-face/ascent-override/index.md
+++ b/files/en-us/web/css/@font-face/ascent-override/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face.ascent-override
{{CSSRef}}
-The **`ascent-override`** CSS descriptor defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.
+The **`ascent-override`** CSS descriptor for the {{cssxref("@font-face")}} at-rule defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.
## Syntax
diff --git a/files/en-us/web/css/@font-face/descent-override/index.md b/files/en-us/web/css/@font-face/descent-override/index.md
index e6a74866d3a3351..1e05393b42ab7ab 100644
--- a/files/en-us/web/css/@font-face/descent-override/index.md
+++ b/files/en-us/web/css/@font-face/descent-override/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face.descent-override
{{CSSRef}}
-The **`descent-override`** CSS descriptor defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline formatting context.
+The **`descent-override`** CSS descriptor for the {{cssxref("@font-face")}} at-rule defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline formatting context.
## Syntax
diff --git a/files/en-us/web/css/@font-face/font-display/index.md b/files/en-us/web/css/@font-face/font-display/index.md
index 7bec6cabeacc401..bb23fb25ab8729c 100644
--- a/files/en-us/web/css/@font-face/font-display/index.md
+++ b/files/en-us/web/css/@font-face/font-display/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face.font-display
{{CSSRef}}
-The **`font-display`** descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
+The **`font-display`** descriptor for the [`@font-face`](/en-US/docs/Web/CSS/@font-face) at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
## Syntax
@@ -39,16 +39,11 @@ font-display: optional;
## Description
-### The font display timeline
+The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face:
-The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.
-
-- Font block period
- - : If the font face is not loaded, any element attempting to use it must render an _invisible_ fallback font face. If the font face successfully loads during this period, it is used normally.
-- Font swap period
- - : If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
-- Font failure period
- - : If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
+- Font block period: If the font face is not loaded, any element attempting to use it must render an _invisible_ fallback font face. If the font face successfully loads during this period, it is used normally.
+- Font swap period: If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
+- Font failure period: If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
## Formal definition
@@ -65,8 +60,9 @@ The font display timeline is based on a timer that begins the moment the user ag
```css
@font-face {
font-family: ExampleFont;
- src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot)
- format("eot");
+ src:
+ url(/path/to/fonts/examplefont.woff) format("woff"),
+ url(/path/to/fonts/examplefont.eot) format("eot");
font-weight: 400;
font-style: normal;
font-display: fallback;
diff --git a/files/en-us/web/css/@font-face/font-family/index.md b/files/en-us/web/css/@font-face/font-family/index.md
index 4108435d2db9d31..1d5ece48c0b4381 100644
--- a/files/en-us/web/css/@font-face/font-family/index.md
+++ b/files/en-us/web/css/@font-face/font-family/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face.font-family
{{CSSRef}}
-The **`font-family`** CSS descriptor sets the font family for a font specified in an {{cssxref("@font-face")}} rule.
+The **`font-family`** CSS descriptor sets the font family for a font specified in an {{cssxref("@font-face")}} at-rule.
The value is used for name matching against a particular `@font-face` when styling elements using the [`font-family`](/en-US/docs/Web/CSS/font-family) property.
Any name may be used, and this overrides any name specified in the underlying font data.
diff --git a/files/en-us/web/css/@font-face/font-feature-settings/index.md b/files/en-us/web/css/@font-face/font-feature-settings/index.md
new file mode 100644
index 000000000000000..d404525922faeda
--- /dev/null
+++ b/files/en-us/web/css/@font-face/font-feature-settings/index.md
@@ -0,0 +1,102 @@
+---
+title: font-feature-settings
+slug: Web/CSS/@font-face/font-feature-settings
+page-type: css-at-rule-descriptor
+browser-compat: css.at-rules.font-face.font-feature-settings
+---
+
+{{CSSRef}}
+
+The **`font-feature-settings`** CSS descriptor allows you to define the initial settings to use for the font defined by the {{cssxref("@font-face")}} at-rule. You can further use this descriptor to control typographic font features such as ligatures, small caps, and swashes, for the font defined by `@font-face`. The values for this descriptor are the same as the {{cssxref("font-feature-settings")}} property, except for the global keyword values.
+
+Since this descriptor sets feature values on the font object in the `@font-face` at-rule and not on an entire element, only some glyphs in an element may be rendered using this descriptor.
+
+## Syntax
+
+```css
+/* Use the default settings */
+font-feature-settings: normal;
+
+/* Set values for OpenType feature tags */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+```
+
+### Values
+
+This descriptor is specified as either the keyword `normal` or as a comma-separated list of `` values. When rendering text, the list of OpenType `` values are passed to the text layout engine to enable or disable font features.
+
+- `normal`
+ - : Indicates that text is laid out using default font settings. This is the default value.
+- ``
+
+ - : Represents a space-separated tuple consisting of a tag name and an optional value.
+
+ The tag name is always a {{cssxref("<string>")}} of four {{Glossary("ASCII")}} characters. If the tag name has more or fewer characters or if it contains characters outside the `U+20` – `U+7E` code point range, the descriptor is invalid.
+
+ The optional value can be a positive integer or the keyword `on` or `off`. The keywords `on` and `off` are synonyms for the values `1` and `0`, respectively. If no value is set, the default is `1`. For non-boolean OpenType features (e.g., [stylistic alternates](https://learn.microsoft.com/en-ca/typography/opentype/spec/features_pt#tag-salt)), the value implies a particular glyph to be selected; for boolean features, the value turns the feature on or off.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Enabling swash glyphs using the @font-face at-rule
+
+In this example, the tag name `swsh` and a boolean value `1` are used as the value for the `font-feature-settings` descriptor in the `@font-face` at-rule.
+
+#### HTML
+
+```html
+Swash is off here
+Swash is on here
+```
+
+#### CSS
+
+```css
+@font-face {
+ font-family: MonteCarlo;
+ src: url("montecarlo-regular.woff2");
+}
+@font-face {
+ font-family: MonteCarlo2;
+ src: url("montecarlo-regular.woff2");
+ font-feature-settings: "swsh" 1;
+}
+p {
+ font-size: 3rem;
+ margin: 0.7rem 3rem;
+}
+.swashoff {
+ font-family: MonteCarlo;
+}
+.swashon {
+ font-family: MonteCarlo2;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Enabling swash glyphs using the @font-face rule", 0, 230)}}
+
+Line 1 shows the default ornate design of the [MonteCarlo](https://github.com/googlefonts/monte-carlo) font, and line 2 shows the default glyphs being replaced with [swash](https://learn.microsoft.com/en-ca/typography/opentype/spec/features_pt#tag-swsh) glyphs.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Other `@font-face` descriptors: {{cssxref("@font-face/font-family", "font-family")}}, {{cssxref("@font-face/font-style", "font-style")}}, {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}, {{cssxref("@font-face/font-weight", "font-weight")}}, {{cssxref("@font-face/src", "src")}}
+- Related font properties: {{cssxref("font-feature-settings")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variation-settings")}}
diff --git a/files/en-us/web/css/@font-face/font-feature-settings/montecarlo-regular.woff2 b/files/en-us/web/css/@font-face/font-feature-settings/montecarlo-regular.woff2
new file mode 100644
index 000000000000000..f25afeba588eb80
Binary files /dev/null and b/files/en-us/web/css/@font-face/font-feature-settings/montecarlo-regular.woff2 differ
diff --git a/files/en-us/web/css/@font-face/font-feature-settings/ofl.txt b/files/en-us/web/css/@font-face/font-feature-settings/ofl.txt
new file mode 100644
index 000000000000000..e3ed1d1986773e0
--- /dev/null
+++ b/files/en-us/web/css/@font-face/font-feature-settings/ofl.txt
@@ -0,0 +1,93 @@
+Copyright 2011 The MonteCarlo Project Authors (https://github.com/googlefonts/monte-carlo)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/files/en-us/web/css/@font-face/font-stretch/index.md b/files/en-us/web/css/@font-face/font-stretch/index.md
index 8977c4194d5d32a..fa0553c54dd1fb0 100644
--- a/files/en-us/web/css/@font-face/font-stretch/index.md
+++ b/files/en-us/web/css/@font-face/font-stretch/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face.font-stretch
{{CSSRef}}
-The **`font-stretch`** CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} rule.
+The **`font-stretch`** CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule.
For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-stretch` descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property.
@@ -131,8 +131,9 @@ The following find a local Open Sans font or import it, and allow using the font
```css
@font-face {
font-family: "Open Sans";
- src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
- format("woff");
+ src:
+ local("Open Sans") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-stretch: 87.5% 112.5%;
}
```
diff --git a/files/en-us/web/css/@font-face/font-style/index.md b/files/en-us/web/css/@font-face/font-style/index.md
index 3217d8c6529da44..ac3bca5353a22a4 100644
--- a/files/en-us/web/css/@font-face/font-style/index.md
+++ b/files/en-us/web/css/@font-face/font-style/index.md
@@ -7,9 +7,9 @@ browser-compat: css.at-rules.font-face.font-style
{{CSSRef}}
-The **`font-style`** CSS descriptor allows authors to specify font styles for the fonts specified in the {{cssxref("@font-face")}} rule.
+The **`font-style`** CSS descriptor allows authors to specify font styles for the fonts specified in the {{cssxref("@font-face")}} at-rule.
-For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-style` descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.
+For a particular font family, authors can download various font faces that correspond to the different styles of the same font family and then use the `font-style` descriptor to explicitly specify the font face's style. The values for this CSS descriptor are the same as that of the corresponding {{cssxref("font-style")}} property.
## Syntax
diff --git a/files/en-us/web/css/@font-face/font-variation-settings/index.md b/files/en-us/web/css/@font-face/font-variation-settings/index.md
index db5c59a0ce39d2b..eb56692290a5c6b 100644
--- a/files/en-us/web/css/@font-face/font-variation-settings/index.md
+++ b/files/en-us/web/css/@font-face/font-variation-settings/index.md
@@ -7,7 +7,9 @@ browser-compat: css.at-rules.font-face.font-variation-settings
{{CSSRef}}
-The **`font-variation-settings`** CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the {{cssxref("@font-face")}} rule.
+The **`font-variation-settings`** CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the {{cssxref("@font-face")}} at-rule. The values for this descriptor are the same as the {{cssxref("font-variation-settings")}} property, except for the global keyword values.
+
+Since this descriptor sets variation values on the font object in the `@font-face` at-rule and not on an entire element, only some glyphs in an element may be rendered using this descriptor.
## Syntax
@@ -24,7 +26,7 @@ font-variation-settings: "xhgt" 0.7;
- `normal`
- : Text is laid out using default settings.
- ` `
- - : When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a {{cssxref("<string>")}} of 4 ASCII characters, followed by a {{cssxref("number")}} indicating the axis value. If the `` has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The `` can be fractional or negative.
+ - : When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a {{cssxref("<string>")}} of 4 {{Glossary("ASCII")}} characters, followed by a {{cssxref("number")}} indicating the axis value. If the `` has more or fewer characters or contains characters outside the U+20 - U+7E code point range, the whole property is invalid. The `` can be fractional or negative.
## Formal definition
@@ -44,7 +46,9 @@ font-variation-settings: "xhgt" 0.7;
src: url("open_type_font.woff2") format("woff2");
font-weight: normal;
font-style: normal;
- font-variation-settings: "wght" 400, "wdth" 300;
+ font-variation-settings:
+ "wght" 400,
+ "wdth" 300;
}
```
@@ -58,11 +62,5 @@ font-variation-settings: "xhgt" 0.7;
## See also
-- {{cssxref("@font-face/font-display", "font-display")}}
-- {{cssxref("@font-face/font-family", "font-family")}}
-- {{cssxref("@font-face/font-stretch", "font-stretch")}}
-- {{cssxref("@font-face/font-style", "font-style")}}
-- {{cssxref("@font-face/font-weight", "font-weight")}}
-- {{cssxref("font-feature-settings", "font-feature-settings")}}
-- {{cssxref("@font-face/src", "src")}}
-- {{cssxref("@font-face/unicode-range", "unicode-range")}}
+- Other `@font-face` descriptors: {{cssxref("@font-face/font-display", "font-display")}}, {{cssxref("@font-face/font-family", "font-family")}}, {{cssxref("font-feature-settings", "font-feature-settings")}}, {{cssxref("@font-face/font-stretch", "font-stretch")}}, {{cssxref("@font-face/font-style", "font-style")}}, {{cssxref("@font-face/font-weight", "font-weight")}}, {{cssxref("@font-face/src", "src")}}, {{cssxref("@font-face/unicode-range", "unicode-range")}}
+- Related font properties: {{cssxref("font-feature-settings")}}, {{cssxref("font-variation-settings")}}
diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md
index b62f7ea7c97ca4d..134aeee50b326af 100644
--- a/files/en-us/web/css/@font-face/font-weight/index.md
+++ b/files/en-us/web/css/@font-face/font-weight/index.md
@@ -7,11 +7,11 @@ browser-compat: css.at-rules.font-face.font-weight
{{CSSRef}}
-The **`font-weight`** CSS descriptor allows authors to specify font weights for the fonts specified in the {{cssxref("@font-face")}} rule. The {{cssxref("font-weight")}} property can separately be used to set how thick or thin characters in text should be displayed.
+The **`font-weight`** CSS descriptor allows authors to specify font weights for the fonts specified in the {{cssxref("@font-face")}} at-rule. The {{cssxref("font-weight")}} property can separately be used to set how thick or thin characters in text should be displayed.
For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-weight` descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property.
-There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold are often synthesized by the user agent. To prevent this, use {{cssxref('font-synthesis')}} property.
+There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold typeface are often synthesized by the user agent. To prevent this, use the {{cssxref('font-synthesis')}} shorthand property.
## Syntax
@@ -87,8 +87,9 @@ The following finds a local Open Sans font or imports it, and allows using the f
```css
@font-face {
font-family: "Open Sans";
- src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
- format("woff");
+ src:
+ local("Open Sans") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-weight: 400;
}
```
diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md
index cad59b4f64ca199..4322af15c57d11b 100644
--- a/files/en-us/web/css/@font-face/index.md
+++ b/files/en-us/web/css/@font-face/index.md
@@ -14,9 +14,11 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At
```css
@font-face {
font-family: "Trickster";
- src: local("Trickster"),
- url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
- format("opentype"), url("trickster-outline.woff") format("woff");
+ src:
+ local("Trickster"),
+ url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
+ url("trickster-outline.otf") format("opentype"),
+ url("trickster-outline.woff") format("woff");
}
```
@@ -40,7 +42,7 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At
> **Note:** The font-variant descriptor was removed from the specification in 2018. The {{cssxref("font-variant")}} value property is supported, but there is no descriptor equivalent.
-- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
- : Allows control over advanced typographic features in OpenType fonts.
- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
- : Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.
@@ -104,7 +106,7 @@ The `@font-face` at-rule may be used not only at the top level of a CSS, but als
This example specifies a downloadable font to use, applying it to the entire body of the document:
```html
-
+
` is used to match either the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so you should include both of these names to assure proper matching across platforms. Platform substitutions for a given font name must not be used.
+ > **Note:** Locally available fonts may have been preinstalled on the user's device, or may have been actively installed by the user.
+ >
+ > While the set of preinstalled fonts is likely to be the same for all users of a particular device, the set of user-installed fonts is not. By discovering the set of user-installed fonts, a site can therefore build a {{glossary("fingerprinting", "fingerprint")}} for the device, helping the site to track users across the web.
+ >
+ > To prevent this, user agents may ignore user-installed fonts when using `local()`.
+
- ``
- : Specifies the full name or postscript name of a locally-installed font face using the `local()` component value, which uniquely identifies a single font face within a larger family.
- The name can optionally be enclosed in quotes. The font face name [is not case-sensitive](https://w3c.github.io/csswg-drafts/css-fonts-3/#font-family-casing).
+ The name can optionally be enclosed in quotes. The font face name [is not case-sensitive](https://drafts.csswg.org/css-fonts-3/#font-family-casing).
> **Note:** The {{domxref("Local Font Access API", "Local Font Access API", "", "nocode")}} can be used to access the user's locally installed font data — this includes higher-level details such as names, styles, and families, as well as the raw bytes of the underlying font files.
@@ -147,18 +156,17 @@ To check if a font technology is supported by a browser within CSS, use the {{cs
## Formal syntax
-```
- [ format()]? [ tech( #)]? | local()
+```plain
+ [ format( ) ]? [ tech( # ) ]? |
+local( )
-= [ | collection | embedded-opentype | opentype
- | svg | truetype | woff | woff2 ]
+ = [ | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]
-= [ |
- | variations | palettes | incremental ]
+ = [ | | variations | palettes | incremental-patch | incremental-range | incremental-auto ]
-= [feature-opentype | feature-aat | feature-graphite]
+ = [ features-opentype | features-aat | features-graphite ]
-= [color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
+ = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
```
## Examples
@@ -199,7 +207,7 @@ p.bold {
}
```
-### Specifying font resources using tech and format values
+### Specifying font resources using tech() and format() values
The following example shows how to use the `tech()` and `format()` values to specify font resources.
A font using `color-colrv1` technology and `opentype` format is specified using the `tech()` and `format()` values.
@@ -208,8 +216,9 @@ A color font will be activated if the user agent supports it, and an `opentype`
```css
@font-face {
font-family: "Trickster";
- src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), url("trickster-outline.otf")
- format(opentype);
+ src:
+ url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
+ url("trickster-outline.otf") format(opentype);
}
/* Using the font face */
@@ -218,19 +227,20 @@ p {
}
```
-### Fallbacks for older browsers
+### Specifying fallbacks for older browsers
Browsers should use a `@font-face` with a single `src` descriptor listing possible sources for the font.
-Since the browser will use the first resource that it is able to load, items should be specified in the order that you'd most like them to be used.
+Since the browser will use the first resource that it is able to load, items should be specified in the order of your preference for their usage.
-Generally this means that local files should appear before remote files, and that resources with `format()` or `tech()` constraints should appear before resources that don't have them (otherwise the less-constrained version would always be selected).
+Generally this means that local files should appear before remote files and that resources with `format()` or `tech()` constraints should appear before resources that don't have them (otherwise the less-constrained version would always be selected).
For example:
```css
@font-face {
font-family: "MgOpenModernaBold";
- src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf")
- format(opentype);
+ src:
+ url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
+ url("MgOpenModernaBold.otf") format(opentype);
}
```
@@ -245,8 +255,9 @@ Note that multiple `src` descriptors are attempted in reverse-order, so at the e
font-family: "MgOpenModernaBold";
src: url("MgOpenModernaBold.otf") format(opentype);
src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
- src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf")
- format(opentype);
+ src:
+ url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
+ url("MgOpenModernaBold.otf") format(opentype);
}
```
diff --git a/files/en-us/web/css/@font-face/unicode-range/index.md b/files/en-us/web/css/@font-face/unicode-range/index.md
index cdea982554e42ed..a60003add3265ac 100644
--- a/files/en-us/web/css/@font-face/unicode-range/index.md
+++ b/files/en-us/web/css/@font-face/unicode-range/index.md
@@ -7,24 +7,24 @@ browser-compat: css.at-rules.font-face.unicode-range
{{CSSRef}}
-The **`unicode-range`** CSS descriptor sets the specific range of characters to be used from a font defined by {{cssxref("@font-face")}} and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
+The **`unicode-range`** CSS descriptor sets the specific range of characters to be used from a font defined using the {{cssxref("@font-face")}} at-rule and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
## Syntax
```css
/* values */
-unicode-range: U+26; /* single codepoint */
+unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
-unicode-range: U+0025-00FF; /* codepoint range */
+unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */
```
### Values
-- **_single codepoint_**
+- **_single code point_**
- : A single Unicode character code point, for example `U+26`.
-- **_codepoint range_**
+- **_code point range_**
- : A range of Unicode code points. So for example, `U+0025-00FF` means _include all characters in the range `U+0025` to `U+00FF`_.
- **_wildcard range_**
- : A range of Unicode code points containing wildcard characters, that is using the `'?'` character, so for example `U+4??` means _include all characters in the range `U+400` to `U+4FF`_.
diff --git a/files/en-us/web/css/@font-feature-values/font-display/index.md b/files/en-us/web/css/@font-feature-values/font-display/index.md
new file mode 100644
index 000000000000000..c0de4315681d6d0
--- /dev/null
+++ b/files/en-us/web/css/@font-feature-values/font-display/index.md
@@ -0,0 +1,75 @@
+---
+title: font-display
+slug: Web/CSS/@font-feature-values/font-display
+page-type: css-at-rule-descriptor
+browser-compat: css.at-rules.font-feature-values.font-display
+spec-urls: https://drafts.csswg.org/css-fonts/#descdef-font-feature-values-font-display
+---
+
+{{CSSRef}}
+
+The **`font-display`** descriptor for the {{cssxref("@font-feature-values")}} at-rule sets the default value of how a font face is displayed based on whether and when it is downloaded. Setting a value for the `font-display` descriptor within a `@font-feature-values` block sets the default value of the `font-display` descriptor for the {{cssxref("@font-face")}} at-rule for all the fonts with the same {{cssxref("@font-face/font-family", "font-family")}} value.
+
+## Syntax
+
+```css
+/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+```
+
+### Values
+
+- `auto`
+ - : The font display strategy is defined by the user agent.
+- `block`
+ - : Gives the font face a short block period, generally around 3 seconds, and an infinite swap period.
+- `swap`
+ - : Gives the font face an extremely small block period and an infinite swap period.
+- `fallback`
+ - : Gives the font face an extremely small block period and a short swap period.
+- `optional`
+ - : Gives the font face an extremely small block period and no swap period.
+
+## Description
+
+The `font-display` descriptor for `@font-feature-values` determines the font display timeline; it does so by setting a default `font-display` value for `@font-face` for the same `font-family` name. When `font-display` is omitted in `@font-face`, the user agent first looks for the `font-display` value that has been set via `@font-feature-values` for the relevant font-family. If no value is found, the user agent uses the `auto` value for `font-display`, in which case, the user agent determines the font display strategy.
+
+The font display timeline is based on a timer that starts when the user agent attempts to use a specific downloaded font face. The timeline is divided into three periods, as listed below. These periods dictate the rendering behavior of any element that uses the font face.
+
+- Font **block** period: If the font face is not loaded, elements attempting to use the font are rendered with an _invisible_ fallback font face. The browser blocks visible text rendering, saving a space for the to-be-displayed text based on metrics of the fallback font. During the block period, text is not visible. At the end of the block period, if the font has not loaded, the text is rendered in the fallback font.
+
+- Font **swap** period: The swap period occurs after the block period (if there is one) and if the font face has not yet been loaded successfully. Elements attempting to use the not-yet-loaded font are rendered using the next available fallback font face. The formerly invisible fallback font face is painted onto the screen. If the font loads successfully during the swap period, the text that was rendered in the fallback font is updated — or swapped — with the newly loaded font. This step triggers a repaint.
+
+- Font **failure** period: If the font face has not loaded by the time the swap period expires or by the time the block period expires (if there is no swap period, as is the case with `optional`), the user agent treats the font as a failed load. As a result, the content becomes visible in the fallback font.
+
+The `font-display` descriptor allows you to set a default display policy for all `@font-face` rules, including those not under author control, such as third-party `@font-face` rules. When the `font-display` value is set via `@font-feature-values`, it becomes the default `font-display` value, and is applied to the entire font-family. However, any `font-display` value defined within individual `@font-face` blocks will override this default, but only for those blocks where the descriptor is defined.
+
+## Examples
+
+```css
+@font-feature-values "Leitura" {
+ font-display: swap;
+ @swash {
+ fancy: 1;
+ }
+}
+```
+
+The `font-display` descriptor in this example sets the default `font-display` value for the "Leitura" font to `swap` for all the `@font-face` blocks. Now there might be several `@font-face` blocks importing multiple font files for a single font-family. If one of those `@font-face` blocks includes a `font-display` descriptor, the specified value will be used for that specific font file only. All other blocks not including a `font-display` descriptor will default to `swap` instead of the user-agent's standard default `auto`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+There is no browser implementing this feature.
+
+## See also
+
+- {{cssxref("@font-face/font-display", "font-display")}} descriptor for {{cssxref("@font-face")}} at-rule
+- {{cssxref("css_fonts", "CSS fonts")}} module
diff --git a/files/en-us/web/css/@font-palette-values/base-palette/index.md b/files/en-us/web/css/@font-palette-values/base-palette/index.md
index 1eb0652f544b518..df00eadba35ae1b 100644
--- a/files/en-us/web/css/@font-palette-values/base-palette/index.md
+++ b/files/en-us/web/css/@font-palette-values/base-palette/index.md
@@ -95,3 +95,4 @@ h2 {
- {{cssxref("@font-palette-values/font-family", "font-family")}} descriptor
- {{cssxref("@font-palette-values/override-colors", "override-colors")}} descriptor
- {{cssxref("font-palette/", "font-palette")}} property
+- {{domxref("CSSFontPaletteValuesRule.basePalette")}}
diff --git a/files/en-us/web/css/@font-palette-values/font-family/index.md b/files/en-us/web/css/@font-palette-values/font-family/index.md
index b8ffecf3188f9a6..792bbf40ebf546e 100644
--- a/files/en-us/web/css/@font-palette-values/font-family/index.md
+++ b/files/en-us/web/css/@font-palette-values/font-family/index.md
@@ -52,7 +52,9 @@ In this example, when the `font-family` descriptor is used in the [@font-palette
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --bungee-extra-spicy {
font-family: "Bungee Spice";
- override-colors: 0 DarkRed, 1 Red;
+ override-colors:
+ 0 DarkRed,
+ 1 Red;
}
h2 {
@@ -112,3 +114,4 @@ h2 {
- {{cssxref("@font-palette-values/font-family", "font-family")}} descriptor
- {{cssxref("@font-palette-values/override-colors", "override-colors")}} descriptor
- {{cssxref("font-palette/", "font-palette")}} property
+- {{domxref("CSSFontPaletteValuesRule.fontFamily")}}
diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md
index 33317b00ca96215..535fca36e7e3d1b 100644
--- a/files/en-us/web/css/@font-palette-values/index.md
+++ b/files/en-us/web/css/@font-palette-values/index.md
@@ -62,7 +62,9 @@ p {
}
@font-palette-values --Alternate {
font-family: "Bungee Spice";
- override-colors: 0 #00ffbb, 1 #007744;
+ override-colors:
+ 0 #00ffbb,
+ 1 #007744;
}
.alternate {
font-palette: --Alternate;
@@ -89,3 +91,4 @@ When overriding colors of the normal or base-palette at index 0 you do not need
- {{cssxref("@font-palette-values/font-family", "font-family")}} descriptor
- {{cssxref("@font-palette-values/base-palette", "base-palette")}} descriptor
- {{cssxref("@font-palette-values/override-colors", "override-colors")}} descriptor
+- {{domxref("CSSFontPaletteValuesRule")}}
diff --git a/files/en-us/web/css/@font-palette-values/override-colors/index.md b/files/en-us/web/css/@font-palette-values/override-colors/index.md
index 4bfd9170c141611..e2cf0d981805ae0 100644
--- a/files/en-us/web/css/@font-palette-values/override-colors/index.md
+++ b/files/en-us/web/css/@font-palette-values/override-colors/index.md
@@ -22,13 +22,19 @@ override-colors: 0 red;
override-colors: 0 #f00;
/* using rgb */
-override-colors: 0 rgb(255, 0, 0);
+override-colors: 0 rgb(255 0 0);
/* overriding multiple colors */
-override-colors: 0 #f00, 1 #0f0, 2 #00f;
+override-colors:
+ 0 #f00,
+ 1 #0f0,
+ 2 #00f;
/* overriding multiple colors with readability */
-override-colors: 0 #f00, 1 #0f0, 2 #00f;
+override-colors:
+ 0 #f00,
+ 1 #0f0,
+ 2 #00f;
```
The `override-colors` [descriptor](/en-US/docs/Glossary/CSS_Descriptor) takes a comma-separated list of the color index and new color value.
@@ -97,11 +103,11 @@ This example shows how to override colors in the [Noto Color Emoji](https://font
@font-palette-values --red {
font-family: "Noto Color Emoji";
override-colors:
- 0 rgb(74, 11, 0),
- 1 rgb(149, 22, 1),
- 2 rgb(183, 27, 1),
- 3 rgb(193, 28, 1),
- 4 rgb(230, 34, 1);
+ 0 rgb(74 11 0),
+ 1 rgb(149 22 1),
+ 2 rgb(183 27 1),
+ 3 rgb(193 28 1),
+ 4 rgb(230 34 1);
}
.red-hat {
font-palette: --red;
@@ -170,3 +176,4 @@ This example shows the that in `base-palette` `3`, the color at index 0 is overr
- {{cssxref("@font-palette-values/base-palette", "base-palette")}}
- {{cssxref("@font-palette-values/font-family", "font-family")}}
- {{cssxref("font-palette/", "font-palette")}}
+- {{domxref("CSSFontPaletteValuesRule.overrideColors")}}
diff --git a/files/en-us/web/css/@import/index.md b/files/en-us/web/css/@import/index.md
index 8ecc09418500824..3c9a3090b080189 100644
--- a/files/en-us/web/css/@import/index.md
+++ b/files/en-us/web/css/@import/index.md
@@ -7,16 +7,21 @@ browser-compat: css.at-rules.import
{{CSSRef}}
-The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other valid stylesheets. An `@import` rule _must_ be defined at the top of stylesheet, before any other at-rule (except [@charset](/en-US/docs/Web/CSS/@charset) and [@layer](/en-US/docs/Web/CSS/@layer)) and style declaration, else it will be ignored.
+The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other valid stylesheets.
+An `@import` rule _must_ be defined at the top of the stylesheet, before any other at-rule (except [@charset](/en-US/docs/Web/CSS/@charset) and [@layer](/en-US/docs/Web/CSS/@layer)) and style declarations, or it will be ignored.
## Syntax
```css
@import url;
-@import url list-of-media-queries;
@import url layer;
@import url layer(layer-name);
+@import url layer(layer-name) supports(supports-condition);
+@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
+@import url supports(supports-condition);
+@import url supports(supports-condition) list-of-media-queries;
+@import url list-of-media-queries;
```
where:
@@ -24,15 +29,45 @@ where:
- _url_
- : Is a {{CSSxRef("<string>")}}, a ``, or a {{CSSxRef("url")}} function representing the location of the resource to import. The URL may be absolute or relative.
- _list-of-media-queries_
- - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
+ - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
- _layer-name_
- : Is the name of a [cascade layer](/en-US/docs/Web/CSS/@layer) into which the contents of the linked resource are imported.
+- _supports-condition_ {{experimental_inline}}
+ - : Indicates the feature(s) that the browser must support in order for the stylesheet to be imported.
+ If the browser does not conform to the conditions specified in the _supports-condition_, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.
+ The syntax of `supports()` is almost identical to that described in {{CSSxRef("@supports")}}, and that topic can be used as a more complete reference.
## Description
-Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating [`@layer`](/en-US/docs/Web/CSS/@layer) statements. The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
+Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating [`@layer`](/en-US/docs/Web/CSS/@layer) statements.
+
+```css example-bad
+* {
+ margin: 0;
+ padding: 0;
+}
+/* more styles */
+@import url("my-imported-styles.css");
+```
+
+As the `@import` at-rule is declared after the styles it is invalid and hence ignored.
+
+```css example-good
+@import url("my-imported-styles.css");
+* {
+ margin: 0;
+ padding: 0;
+}
+/* more styles */
+```
+
+The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
-So that {{glossary("user agent", "user agents")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) after the URL. In the absence of any media query, the import is unconditional. Specifying `all` for the `list-of-media-queries` has the same effect.
+So that {{glossary("user agent", "user agents")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) after the URL. In the absence of any media query, the import is not conditional on the media used. Specifying `all` for the `list-of-media-queries` has the same effect.
+
+Similarly, user agents can use the `supports()` function in an `@import` at-rule to only fetch resources if a particular feature set is (or is not) supported.
+This allows authors to take advantage of recently introduced CSS features, while providing graceful fallbacks for older browser versions.
+Note that the conditions in the `supports()` function of an `@import` at-rule can be obtained in JavaScript using {{domxref("CSSImportRule.supportsText")}}.
The `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/CSS/@layer) by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.
@@ -51,7 +86,7 @@ The `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/
The two examples above show how to specify the _url_ as a `` and as a `url()` function.
-### Importing CSS rules conditionally
+### Importing CSS rules conditional on media queries
```css
@import url("fineprint.css") print;
@@ -62,6 +97,28 @@ The two examples above show how to specify the _url_ as a `` and as a `u
The `@import` rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied. So for instance, the last `@import` rule will load the `landscape.css` stylesheet only on a screen device in landscape orientation.
+### Importing CSS rules conditional on feature support
+
+```css
+@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
+@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
+ and (max-width: 400px);
+```
+
+The `@import` rules above illustrate how you might import a layout that uses a grid if `display: grid` is supported, and otherwise imports CSS that uses `display: flex`.
+While you can only have one `supports()` statement, you can combine any number of feature checks with `not`, `and`, and `or`, as long as you wrap each condition to be tested in parentheses.
+You can also use parentheses to indicate precedence.
+Note that if you just have a single declaration then you don't need to wrap it in additional parenthese: this is shown in the first example above.
+
+The examples above show support conditions using simple declaration syntax.
+You can also specify CSS functions in `supports()`, and it will evaluate to `true` if they are supported and can be evaluated on the user-agent.
+For example, the code below shows an `@import` that is conditional on both [child combinators](/en-US/docs/Web/CSS/Child_combinator) (`selector()`) and the `font-tech()` function:
+
+```css
+@import url("whatever.css") supports((selector(h2 > p)) and
+ (font-tech(color-COLRv1)));
+```
+
### Importing CSS rules into a cascade layer
```css
@@ -88,7 +145,7 @@ In the above example, the rules in `headings.css` and `links.css` stylesheets ca
@import "style.css" layer;
```
-This is an example of creating two separate anonymous cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an anonymous cascade layer. Anonymous cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.
+This is an example of creating two separate unnamed cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an unnamed cascade layer. Unnamed cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.
## Specifications
@@ -102,3 +159,4 @@ This is an example of creating two separate anonymous cascade layers and importi
- {{CSSxRef("@media")}}
- {{CSSxRef("@supports")}}
+- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module
diff --git a/files/en-us/web/css/@keyframes/index.md b/files/en-us/web/css/@keyframes/index.md
index 3ff13329dda5b04..65254dfac6ebefd 100644
--- a/files/en-us/web/css/@keyframes/index.md
+++ b/files/en-us/web/css/@keyframes/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.keyframes
{{CSSRef}}
-The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](/en-US/docs/Web/CSS/CSS_Transitions).
+The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](/en-US/docs/Web/CSS/CSS_transitions).
## Syntax
@@ -33,6 +33,8 @@ The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the int
- : An ending offset of `100%`.
- {{cssxref("<percentage>")}}
- : A percentage of the time through the animation sequence at which the specified keyframe should occur.
+- `` {{cssxref("<percentage>")}} {{experimental_inline}}
+ - : A percentage of the time through the specified {{cssxref("animation-range")}} at which the specified keyframe should occur. See [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations) for more information on the kinds of animations that use named timeline ranges.
## Description
@@ -116,8 +118,8 @@ Declarations in a keyframe qualified with `!important` are ignored.
margin-top: 50px;
}
50% {
- margin-top: 150px !important;
- } /* ignored */
+ margin-top: 150px !important; /* ignored */
+ }
to {
margin-top: 100px;
}
@@ -143,7 +145,7 @@ Declarations in a keyframe qualified with `!important` are ignored.
### CSS animation examples
-See [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for examples.
+See [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) and [Animate elements on scroll with Scroll-driven animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations) for examples.
## Specifications
@@ -155,5 +157,9 @@ See [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animatio
## See also
-- [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- {{cssxref("animation-range")}}
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module
+- [Animate elements on scroll with Scroll-driven animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations)
- {{domxref("AnimationEvent")}}
diff --git a/files/en-us/web/css/@layer/index.md b/files/en-us/web/css/@layer/index.md
index 396e0e2a2578811..42e6ca9ae2812cb 100644
--- a/files/en-us/web/css/@layer/index.md
+++ b/files/en-us/web/css/@layer/index.md
@@ -196,10 +196,11 @@ In the following example, two layers are created with no rules applied, then CSS
## See also
- [`@import`](/en-US/docs/Web/CSS/@import)
-- The two associated interfaces: {{domxref("CSSLayerBlockRule")}} and {{domxref("CSSLayerStatementRule")}}
-- [The `!important` flag](/en-US/docs/Web/CSS/important)
-- [The `revert-layer` keyword](/en-US/docs/Web/CSS/revert-layer)
-- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade)
-- [CSS building block: cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-- [CSS building block: cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)
-- [The Future of CSS: Cascade Layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/)
+- {{domxref("CSSLayerBlockRule")}}
+- {{domxref("CSSLayerStatementRule")}}
+- [`!important`](/en-US/docs/Web/CSS/important)
+- [`revert-layer`](/en-US/docs/Web/CSS/revert-layer)
+- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade)
+- [Cascade, specificity, and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+- [Cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)
+- [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (2021)
diff --git a/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
index 17bcc299a274dea..55ac247c5c995b2 100644
--- a/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md
@@ -10,7 +10,7 @@ browser-compat: css.at-rules.media.-moz-device-pixel-ratio
{{CSSRef}} {{Non-standard_header}} {{Deprecated_header}}
-The **`-moz-device-pixel-ratio`** Gecko-only [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to apply styles based on the number of device pixels per CSS pixel.
+The **`-moz-device-pixel-ratio`** Gecko-only [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to apply styles based on the number of device pixels per CSS pixel.
> **Warning:** Do not use this feature. Use the [`resolution`](/en-US/docs/Web/CSS/@media/resolution) feature with the `dppx` unit instead.
@@ -52,5 +52,5 @@ Not part of any standard.
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/-webkit-animation/index.md b/files/en-us/web/css/@media/-webkit-animation/index.md
index 235c204af196154..dc4699578e3143d 100644
--- a/files/en-us/web/css/@media/-webkit-animation/index.md
+++ b/files/en-us/web/css/@media/-webkit-animation/index.md
@@ -12,7 +12,7 @@ browser-compat: css.at-rules.media.-webkit-animation
> **Note:** All browsers support the [`animation`](/en-US/docs/Web/CSS/animation#browser_compatibility) property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the `-webkit-animation` media feature. No browsers support `animation`, without the prefix, as a media query. Use the [`@supports (animation)`](/en-US/docs/Web/CSS/@supports) feature query instead.
-The **`-webkit-animation`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS {{cssxref("animation")}}s are supported.
+The **`-webkit-animation`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS {{cssxref("animation")}}s are supported.
Apple has [a description in Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3).
@@ -53,6 +53,6 @@ Not part of any standard.
- [`-webkit-transform-2d`](/en-US/docs/Web/CSS/@media/-webkit-transform-2d)
- [`-webkit-transition`](/en-US/docs/Web/CSS/@media/-webkit-transition)
- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html)
-- {{cssxref("animation")}} and [using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
-- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
-- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)
+- {{cssxref("animation")}} and [using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
index 4219f6a888d90a4..227e201506410db 100644
--- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.-webkit-device-pixel-ratio
{{CSSRef}}
-The **`-webkit-device-pixel-ratio`** is a non-standard Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) which is an alternative to the standard [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature.
+The **`-webkit-device-pixel-ratio`** is a non-standard Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) which is an alternative to the standard [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature.
> **Note:** If possible, use the [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See [browser compatibility](#browser-compatibility) below.
@@ -89,7 +89,7 @@ The `-webkit-device-pixel-ratio` feature is specified as a {{cssxref("<number
## See also
-- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- {{cssxref("resolution")}}
- [`-webkit-transform-2d`](/en-US/docs/Web/CSS/@media/-webkit-transform-2d)
- [`-webkit-transform-3d`](/en-US/docs/Web/CSS/@media/-webkit-transform-3d)
diff --git a/files/en-us/web/css/@media/-webkit-transform-2d/index.md b/files/en-us/web/css/@media/-webkit-transform-2d/index.md
index 5903d9592b821c3..43b9c5d70521589 100644
--- a/files/en-us/web/css/@media/-webkit-transform-2d/index.md
+++ b/files/en-us/web/css/@media/-webkit-transform-2d/index.md
@@ -11,13 +11,13 @@ browser-compat: css.at-rules.media.-webkit-transform-2d
> **Note:** All browsers support the [`transform`](/en-US/docs/Web/CSS/transform#browser_compatibility) property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the `-webkit-transform-2d` media feature. No browsers support `transform`, without the prefix or `2d` extension, as a media query. Use the [`@supports (transform)`](/en-US/docs/Web/CSS/@supports) feature query instead.
-The **`-webkit-transform-2d`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS 2D {{cssxref("transform")}}s and non-standard vendor-prefixed media queries are supported.
+The **`-webkit-transform-2d`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS 2D {{cssxref("transform")}}s and non-standard vendor-prefixed media queries are supported.
Apple has [a description in Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3).
## Syntax
-`-webkit-transform-2d` is a Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) whose value is `true` if the browser supports `-webkit` prefixed CSS 2D {{cssxref("transform")}}s.
+`-webkit-transform-2d` is a Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) whose value is `true` if the browser supports `-webkit` prefixed CSS 2D {{cssxref("transform")}}s.
### Values
@@ -62,6 +62,6 @@ Not part of any standard.
- {{cssxref("@media/-webkit-transition", "-webkit-transition")}}
- {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html)
-- {{cssxref("transform")}} and [using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
-- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
-- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)
+- {{cssxref("transform")}} and [using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
diff --git a/files/en-us/web/css/@media/-webkit-transform-3d/index.md b/files/en-us/web/css/@media/-webkit-transform-3d/index.md
index 4ce80e714818137..a99a84dac12579c 100644
--- a/files/en-us/web/css/@media/-webkit-transform-3d/index.md
+++ b/files/en-us/web/css/@media/-webkit-transform-3d/index.md
@@ -7,13 +7,13 @@ browser-compat: css.at-rules.media.-webkit-transform-3d
{{CSSRef}}
-The **`-webkit-transform-3d`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS 3D {{cssxref("transform")}}s are supported.
+The **`-webkit-transform-3d`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS 3D {{cssxref("transform")}}s are supported.
> **Note:** While this media feature is currently [supported by most browsers](#browser-compatibility). If possible, use an {{cssxref("@supports")}} feature query instead.
## Syntax
-`-webkit-transform-3d` is a Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) whose value is `true` if the browser supports `-webkit` prefixed CSS 3D {{cssxref("transform")}}s.
+`-webkit-transform-3d` is a Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) whose value is `true` if the browser supports `-webkit` prefixed CSS 3D {{cssxref("transform")}}s.
### Values
@@ -58,6 +58,6 @@ A better method for checking for browser support is using a feature query:
- {{cssxref("@media/-webkit-transition", "-webkit-transition")}}
- {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html)
-- {{cssxref("transform")}} and [using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
-- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
-- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)
+- {{cssxref("transform")}} and [using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)
+- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
diff --git a/files/en-us/web/css/@media/-webkit-transition/index.md b/files/en-us/web/css/@media/-webkit-transition/index.md
index 0509168d76dc897..7d51be374b603ee 100644
--- a/files/en-us/web/css/@media/-webkit-transition/index.md
+++ b/files/en-us/web/css/@media/-webkit-transition/index.md
@@ -12,7 +12,7 @@ browser-compat: css.at-rules.media.-webkit-transition
> **Note:** All browsers support the [`transition`](/en-US/docs/Web/CSS/animation#browser_compatibility) property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers support the `-webkit-transition` media feature. No browsers support `transition` without the prefix as a media query (though some browsers do support - {{cssxref("@media/-webkit-transform-3d", "-webkit-transform-3d")}}). Use the [`@supports (transition)`](/en-US/docs/Web/CSS/@supports) feature query instead.
-The **`-webkit-transition`** Boolean non-standard[CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if the browsing context supports [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions).
+The **`-webkit-transition`** Boolean non-standard[CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if the browsing context supports [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions).
Apple has [a description in Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3); this is now called `transition` there.
@@ -62,6 +62,6 @@ Not part of any standard.
- {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
- {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html)
-- {{cssxref("transition")}} and [using CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
-- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
-- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)
+- {{cssxref("transition")}} and [using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+- {{cssxref("@media")}} and [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- {{cssxref("@supports")}} and [using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
diff --git a/files/en-us/web/css/@media/any-hover/index.md b/files/en-us/web/css/@media/any-hover/index.md
index 1d5c6e1a0e8eb54..daec43ca82f6c81 100644
--- a/files/en-us/web/css/@media/any-hover/index.md
+++ b/files/en-us/web/css/@media/any-hover/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.any-hover
{{CSSRef}}
-The **`any-hover`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test whether _any_ available input mechanism can hover over elements.
+The **`any-hover`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test whether _any_ available input mechanism can hover over elements.
## Syntax
diff --git a/files/en-us/web/css/@media/any-pointer/index.md b/files/en-us/web/css/@media/any-pointer/index.md
index 0509c719ee10ea6..dd10c0c0d6bb76d 100644
--- a/files/en-us/web/css/@media/any-pointer/index.md
+++ b/files/en-us/web/css/@media/any-pointer/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.any-pointer
{{CSSRef}}
-The **`any-pointer`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) tests whether the user has _any_ pointing device (such as a mouse), and if so, how accurate it is.
+The **`any-pointer`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) tests whether the user has _any_ pointing device (such as a mouse), and if so, how accurate it is.
> **Note:** If you want to test the accuracy of the _primary_ pointing device, use [`pointer`](/en-US/docs/Web/CSS/@media/pointer) instead.
diff --git a/files/en-us/web/css/@media/aspect-ratio/index.md b/files/en-us/web/css/@media/aspect-ratio/index.md
index 981708b2bab17b7..6cb1145b889223b 100644
--- a/files/en-us/web/css/@media/aspect-ratio/index.md
+++ b/files/en-us/web/css/@media/aspect-ratio/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.aspect-ratio
{{CSSRef}}
-The **`aspect-ratio`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the aspect ratio of the {{glossary("viewport")}}.
+The **`aspect-ratio`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the aspect ratio of the {{glossary("viewport")}}.
## Syntax
@@ -62,7 +62,7 @@ Note that, when none of the media query conditions are true, the background will
```
@@ -97,5 +97,5 @@ h.onchange = h.oninput = () => {
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/aural/index.md b/files/en-us/web/css/@media/aural/index.md
index a50c53b64a5b1a4..915e8f7c9366a3a 100644
--- a/files/en-us/web/css/@media/aural/index.md
+++ b/files/en-us/web/css/@media/aural/index.md
@@ -39,6 +39,6 @@ The `aural` CSS media type was used to specify a block of CSS that applied only
## See also
-- [Media queries](/en-US/docs/Web/CSS/Media_Queries)
-- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [`@media`](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/color-gamut/index.md b/files/en-us/web/css/@media/color-gamut/index.md
index 23a0cb45de93c5b..3c919f066eb6abb 100644
--- a/files/en-us/web/css/@media/color-gamut/index.md
+++ b/files/en-us/web/css/@media/color-gamut/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.color-gamut
{{CSSRef}}
-The **`color-gamut`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to apply CSS styles based on the approximate range of color {{glossary("gamut")}} supported by the {{glossary("user agent")}} and the output device.
+The **`color-gamut`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to apply CSS styles based on the approximate range of color {{glossary("gamut")}} supported by the {{glossary("user agent")}} and the output device.
## Syntax
@@ -59,4 +59,4 @@ p {
- [color()](/en-US/docs/Web/CSS/color_value/color) function to specify colors in a defined colorspace.
- [@media](/en-US/docs/Web/CSS/@media) at-rule that is used to specify the color-gamut expression.
-- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to understand when and how to use a media query.
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to understand when and how to use a media query.
diff --git a/files/en-us/web/css/@media/color-index/index.md b/files/en-us/web/css/@media/color-index/index.md
index 279c26de9d7ec9d..0a3627cf7d7679d 100644
--- a/files/en-us/web/css/@media/color-index/index.md
+++ b/files/en-us/web/css/@media/color-index/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.color-index
{{CSSRef}}
-The **`color-index`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the number of entries in the output device's color lookup table.
+The **`color-index`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the number of entries in the output device's color lookup table.
## Syntax
@@ -69,5 +69,5 @@ This HTML will apply a special stylesheet for devices that have at least 256 col
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/color/index.md b/files/en-us/web/css/@media/color/index.md
index f446e4128c22558..9bf6cea34db3c2f 100644
--- a/files/en-us/web/css/@media/color/index.md
+++ b/files/en-us/web/css/@media/color/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.color
{{CSSRef}}
-The **`color`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the number of bits per color component (red, green, blue) of the output device.
+The **`color`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the number of bits per color component (red, green, blue) of the output device.
## Syntax
@@ -15,7 +15,7 @@ The `color` feature is specified as an {{cssxref("<integer>")}} value that
> **Note:** If the various color components are represented by different numbers of bits, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.
-See [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) to learn more about using CSS to apply color to HTML.
+See [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) to learn more about using CSS to apply color to HTML.
## Examples
@@ -64,6 +64,6 @@ p {
## See also
-- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color)
+- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color)
- The CSS {{cssxref("color")}} property
- The CSS {{cssxref("<color>")}} data unit
diff --git a/files/en-us/web/css/@media/device-aspect-ratio/index.md b/files/en-us/web/css/@media/device-aspect-ratio/index.md
index c607fe3aa07d425..391cc9363e0a9f1 100644
--- a/files/en-us/web/css/@media/device-aspect-ratio/index.md
+++ b/files/en-us/web/css/@media/device-aspect-ratio/index.md
@@ -11,7 +11,7 @@ browser-compat: css.at-rules.media.device-aspect-ratio
> **Note:** To query for the aspect ratio of the viewport, developers should use the [`aspect-ratio`](/en-US/docs/Web/CSS/@media/aspect-ratio) media feature instead.
-The **`device-aspect-ratio`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the width-to-height aspect ratio of an output device.
+The **`device-aspect-ratio`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the width-to-height aspect ratio of an output device.
## Syntax
diff --git a/files/en-us/web/css/@media/device-height/index.md b/files/en-us/web/css/@media/device-height/index.md
index 703b313a440a13e..4a9f2f959c014dc 100644
--- a/files/en-us/web/css/@media/device-height/index.md
+++ b/files/en-us/web/css/@media/device-height/index.md
@@ -11,7 +11,7 @@ browser-compat: css.at-rules.media.device-height
> **Note:** To query for the height of the viewport, developers should use the [`height`](/en-US/docs/Web/CSS/@media/height) media feature instead.
-The **`device-height`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the height of an output device's rendering surface.
+The **`device-height`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the height of an output device's rendering surface.
## Syntax
@@ -38,5 +38,5 @@ The `device-height` feature is specified as a {{cssxref("<length>")}} valu
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/device-width/index.md b/files/en-us/web/css/@media/device-width/index.md
index 8db8710b9e31602..9fb71102f7cfbf1 100644
--- a/files/en-us/web/css/@media/device-width/index.md
+++ b/files/en-us/web/css/@media/device-width/index.md
@@ -11,7 +11,7 @@ browser-compat: css.at-rules.media.device-width
> **Note:** To query for the width of the viewport, developers should use the [`width`](/en-US/docs/Web/CSS/@media/width) media feature instead.
-The **`device-width`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the width of an output device's rendering surface.
+The **`device-width`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the width of an output device's rendering surface.
## Syntax
@@ -38,5 +38,5 @@ The `device-width` feature is specified as a {{cssxref("<length>")}} value
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/display-mode/index.md b/files/en-us/web/css/@media/display-mode/index.md
index 31e7b75bcddb774..c5650e92245ac22 100644
--- a/files/en-us/web/css/@media/display-mode/index.md
+++ b/files/en-us/web/css/@media/display-mode/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.display-mode
{{CSSRef}}
-The **`display-mode`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.
+The **`display-mode`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.
This feature corresponds to the Web app manifest's [`display`](/en-US/docs/Web/Manifest#display) member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.
@@ -46,5 +46,5 @@ The `display-mode` feature is specified as a keyword value chosen from the list
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/dynamic-range/index.md b/files/en-us/web/css/@media/dynamic-range/index.md
index 9168124a9446aed..090c46b68e6176e 100644
--- a/files/en-us/web/css/@media/dynamic-range/index.md
+++ b/files/en-us/web/css/@media/dynamic-range/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.dynamic-range
{{CSSRef}}
-The **`dynamic-range`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the {{glossary("user agent")}} and the output device.
+The **`dynamic-range`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the {{glossary("user agent")}} and the output device.
> **Note:** Some devices have high dynamic range capabilities that are not always 'on' and need to be activated (sometimes programmatically, sometimes by the user, sometimes based on the content). This media feature does not test whether the dynamic range capability is active; it only tests whether the device is capable of high dynamic range visuals.
@@ -48,5 +48,5 @@ The `dynamic-range` feature is specified as a keyword value chosen from the list
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/forced-colors/index.md b/files/en-us/web/css/@media/forced-colors/index.md
index 34c05a114410be3..04d62beb7aa44e8 100644
--- a/files/en-us/web/css/@media/forced-colors/index.md
+++ b/files/en-us/web/css/@media/forced-colors/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.forced-colors
{{CSSRef}}
-The **`forced-colors`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if the {{Glossary("user agent")}} has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.
+The **`forced-colors`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if the {{Glossary("user agent")}} has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.
## Syntax
@@ -18,7 +18,7 @@ The `forced-colors` media feature indicates whether or not the browser is curren
- `none`
- : Forced colors mode is not active; the page's colors are not being forced into a limited palette.
- `active`
- - : Indicates that forced colors mode is active. The browser provides the color palette to authors through the [CSS system color](/en-US/docs/Web/CSS/color_value#system_colors) keywords and, if appropriate, triggers the appropriate value of [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) so that authors can adapt the page. The browser selects the value for `prefers-color-scheme` based on the lightness of the `Canvas` system color (see the [color adjust spec](https://www.w3.org/TR/css-color-adjust-1/#forced) for more details).
+ - : Indicates that forced colors mode is active. The browser provides the color palette to authors through the [CSS system color](/en-US/docs/Web/CSS/system-color) keywords and, if appropriate, triggers the appropriate value of [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) so that authors can adapt the page. The browser selects the value for `prefers-color-scheme` based on the lightness of the `Canvas` system color (see the [color adjust spec](https://www.w3.org/TR/css-color-adjust-1/#forced) for more details).
## Usage notes
@@ -90,7 +90,9 @@ This example is a button that normally gets its contrast via {{cssxref("box-shad
.button {
border: 0;
padding: 10px;
- box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
+ box-shadow:
+ -2px -2px 5px gray,
+ 2px 2px 5px gray;
}
@media (forced-colors: active) {
diff --git a/files/en-us/web/css/@media/grid/index.md b/files/en-us/web/css/@media/grid/index.md
index fc810d2c1974685..19535567b9071c2 100644
--- a/files/en-us/web/css/@media/grid/index.md
+++ b/files/en-us/web/css/@media/grid/index.md
@@ -7,13 +7,13 @@ browser-compat: css.at-rules.media.grid
{{CSSRef}}
-The **`grid`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test whether the output device uses a grid-based screen.
+The **`grid`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test whether the output device uses a grid-based screen.
Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.
## Syntax
-The `grid` feature is specified as a {{cssxref("<mq-boolean>")}} value (`0` or `1`) representing whether or not the output device is grid-based.
+The `grid` feature is specified as a {{cssxref("CSS_media_queries/Using_media_queries", "<mq-boolean>")}} value (`0` or `1`) representing whether or not the output device is grid-based.
## Examples
@@ -69,5 +69,5 @@ The `grid` feature is specified as a {{cssxref("<mq-boolean>")}} value (`0
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/height/index.md b/files/en-us/web/css/@media/height/index.md
index 0371ac8f2b4a8c1..a0a48a5e91d2081 100644
--- a/files/en-us/web/css/@media/height/index.md
+++ b/files/en-us/web/css/@media/height/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.height
{{CSSRef}}
-The **`height`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to apply styles based on the height of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/Paged_Media)).
+The **`height`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to apply styles based on the height of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/CSS_paged_media)).
## Syntax
@@ -60,5 +60,5 @@ The `height` feature is specified as a {{cssxref("<length>")}} value repre
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/hover/index.md b/files/en-us/web/css/@media/hover/index.md
index 191b6c28af49a1e..706a67f5cce868a 100644
--- a/files/en-us/web/css/@media/hover/index.md
+++ b/files/en-us/web/css/@media/hover/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.hover
{{CSSRef}}
-The **`hover`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test whether the user's _primary_ input mechanism can hover over elements.
+The **`hover`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test whether the user's _primary_ input mechanism can hover over elements.
## Syntax
@@ -58,5 +58,5 @@ a:hover {
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md
index 456295e42162609..861fc3b4a135e71 100644
--- a/files/en-us/web/css/@media/index.md
+++ b/files/en-us/web/css/@media/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media
{{CSSRef}}
-The **`@media`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to apply part of a style sheet based on the result of one or more [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
+The **`@media`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to apply part of a style sheet based on the result of one or more [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
> **Note:** In JavaScript, the rules created using `@media` can be accessed with the {{domxref("CSSMediaRule")}} CSS object model interface.
@@ -35,7 +35,7 @@ The `@media` at-rule may be placed at the top level of your code or nested insid
}
```
-For a discussion of media query syntax, please see [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax).
+For a discussion of media query syntax, please see [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntax).
## Description
@@ -47,7 +47,7 @@ Except when using the `not` or `only` logical operators, the media type is optio
- `all`
- : Suitable for all devices.
- `print`
- - : Intended for paged material and documents viewed on a screen in print preview mode. (Please see [paged media](/en-US/docs/Web/CSS/Paged_Media) for information about formatting issues that are specific to these formats.)
+ - : Intended for paged material and documents viewed on a screen in print preview mode. (Please see [paged media](/en-US/docs/Web/CSS/CSS_paged_media) for information about formatting issues that are specific to these formats.)
- `screen`
- : Intended primarily for screens.
@@ -126,7 +126,7 @@ Media feature expressions test for their presence or value, and are entirely opt
- {{cssxref("@media/scripting", "scripting")}}
- : Detects whether scripting (i.e. JavaScript) is available.
Added in Media Queries Level 5.
-- {{cssxref("@media/update-frequency", "update")}} {{Experimental_Inline}}
+- {{cssxref("@media/update", "update")}}
- : How frequently the output device can modify the appearance of content.
Added in Media Queries Level 4.
- {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}}
@@ -163,13 +163,20 @@ You can also combine multiple media queries into a single rule by separating the
- `or`
- : Equivalent to the `,` operator. Added in Media Queries Level 4.
+### User agent client hints
+
+Some media queries have corresponding [user agent client hints](/en-US/docs/Web/HTTP/Client_hints).
+These are HTTP headers that request content that is pre-optimized for the particular media requirement.
+They include {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} and {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}.
+
## Accessibility concerns
-To best accommodate people who adjust a site's text size, use [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values)s when you need a {{cssxref("<length>")}} for your [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).
+To best accommodate people who adjust a site's text size, use [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values)s when you need a {{cssxref("<length>")}} for your [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
Both [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) and [`px`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) are valid units, but [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) works better if the user changes the browser text size.
-Also consider using Level 4 media queries to improve the user's experience. For example, `prefers-reduced-motion` to [detect if the user has requested that the system minimize the amount of animation](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) or motion it uses.
+Also consider media queries or [HTTP user agent client hints](/en-US/docs/Web/HTTP/Client_hints#user-agent_client_hints) to improve the user's experience.
+For example, the media query [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) or the equivalent HTTP header {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}) can be used to minimize the amount of animation or motion used based on user preferences.
## Security
@@ -227,7 +234,7 @@ Introduced in Media Queries Level 4 is a new range syntax that allows for less v
}
```
-For more examples, please see [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).
+For more examples, please see [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
## Specifications
@@ -239,7 +246,7 @@ For more examples, please see [Using media queries](/en-US/docs/Web/CSS/Media_Qu
## See also
-- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- In JavaScript, `@media` can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.
- [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features)
- [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features)
diff --git a/files/en-us/web/css/@media/inverted-colors/index.md b/files/en-us/web/css/@media/inverted-colors/index.md
index 1c99e2addca7ccd..2ded6dfa2fdfaa6 100644
--- a/files/en-us/web/css/@media/inverted-colors/index.md
+++ b/files/en-us/web/css/@media/inverted-colors/index.md
@@ -7,33 +7,49 @@ browser-compat: css.at-rules.media.inverted-colors
{{CSSRef}}
-The **`inverted-colors`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test whether the {{glossary("user agent")}} or underlying OS is inverting colors.
+The **`inverted-colors`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to test if the {{glossary("user agent")}} or the underlying operating system has inverted all colors.
+
+Inversion of colors can have unpleasant side effects, such as shadows turning into highlights, which can reduce the readability of the content. Using this media feature, you can detect if inversion is happening and style the content accordingly while respecting user preference.
## Syntax
-The `inverted-colors` feature is specified as a keyword value chosen from the list below.
+```css
+/* Keyword value */
+@media (inverted-colors: inverted) {
+ /* styles to apply if inversion of colors is detected */
+}
+```
+
+The `inverted-colors` feature is specified as one of the following keyword values:
- `none`
- - : Colors are displayed normally.
+ - : Indicates that the colors are displayed normally and no inversion of colors has happened. This keyword value evaluates as false.
- `inverted`
- - : All pixels within the displayed area have been inverted.
+ - : Indicates that all pixels within the displayed area have been inverted. This keyword value evaluates as true.
## Examples
-### HTML
+### Applying styles if color inversion is detected
+
+This example demonstrates the effects of both `inverted-colors` media feature keyword values and when the `inverted-colors` media feature is not supported.
+
+#### HTML
```html
- If you're using inverted colors, this text should be blue on white (the
- inverse of yellow on black). If you're not, it should be red on light gray.
+ If color inversion is detected, this text will appear blue on white (the
+ inverse of yellow on black) along with a line over the text. If no color
+ inversion is happening, the text will appear red on light gray without the
+ line over the text.
- If the text is gray, your browser doesn't support the `inverted-colors` media
- feature.
+ If the text is gray and no overline is present, it means your browser doesn't
+ support the
+ inverted-colors media feature.
```
-### CSS
+#### CSS
```css
p {
@@ -44,6 +60,7 @@ p {
p {
background: black;
color: yellow;
+ text-decoration: overline;
}
}
@@ -55,9 +72,9 @@ p {
}
```
-### Result
+#### Result
-{{EmbedLiveSample("Examples")}}
+{{EmbedLiveSample("Applying styles if color inversion is detected")}}
## Specifications
@@ -69,5 +86,6 @@ p {
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
+- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
diff --git a/files/en-us/web/css/@media/monochrome/index.md b/files/en-us/web/css/@media/monochrome/index.md
index 21cbd5053cbb846..454a0762dee5a9e 100644
--- a/files/en-us/web/css/@media/monochrome/index.md
+++ b/files/en-us/web/css/@media/monochrome/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.monochrome
{{CSSRef}}
-The **`monochrome`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.
+The **`monochrome`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.
## Syntax
diff --git a/files/en-us/web/css/@media/orientation/index.md b/files/en-us/web/css/@media/orientation/index.md
index bfa27cdcdc969a8..b4ed6ca5f1528e9 100644
--- a/files/en-us/web/css/@media/orientation/index.md
+++ b/files/en-us/web/css/@media/orientation/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.orientation
{{CSSRef}}
-The **`orientation`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the orientation of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/Paged_Media)).
+The **`orientation`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the orientation of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/CSS_paged_media)).
> **Note:** This feature does not correspond to _device_ orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
diff --git a/files/en-us/web/css/@media/overflow-block/index.md b/files/en-us/web/css/@media/overflow-block/index.md
index f641c3d8a7b8b5b..53fc186e681d4c5 100644
--- a/files/en-us/web/css/@media/overflow-block/index.md
+++ b/files/en-us/web/css/@media/overflow-block/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-block
{{CSSRef}}
-The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the block axis.
+The **`overflow-block`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the block axis.
## Syntax
@@ -63,5 +63,5 @@ The `overflow-block` feature is specified as a keyword value chosen from the lis
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/overflow-inline/index.md b/files/en-us/web/css/@media/overflow-inline/index.md
index 3b84f2b5ae91316..b2da61e5d4535e2 100644
--- a/files/en-us/web/css/@media/overflow-inline/index.md
+++ b/files/en-us/web/css/@media/overflow-inline/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.overflow-inline
{{CSSRef}}
-The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the inline axis.
+The **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](/en-US/docs/Web/CSS/Containing_block) along the inline axis.
## Syntax
diff --git a/files/en-us/web/css/@media/pointer/index.md b/files/en-us/web/css/@media/pointer/index.md
index d6535a183b13100..075d1fe7f8ff328 100644
--- a/files/en-us/web/css/@media/pointer/index.md
+++ b/files/en-us/web/css/@media/pointer/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.pointer
{{CSSRef}}
-The **`pointer`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) tests whether the user has a pointing device (such as a mouse), and if so, how accurate the _primary_ pointing device is.
+The **`pointer`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) tests whether the user has a pointing device (such as a mouse), and if so, how accurate the _primary_ pointing device is.
> **Note:** If you want to test the accuracy of _any_ pointing device, use [`any-pointer`](/en-US/docs/Web/CSS/@media/any-pointer) instead.
diff --git a/files/en-us/web/css/@media/prefers-color-scheme/index.md b/files/en-us/web/css/@media/prefers-color-scheme/index.md
index 91f98ee627bd370..475aaa8f85a3b90 100644
--- a/files/en-us/web/css/@media/prefers-color-scheme/index.md
+++ b/files/en-us/web/css/@media/prefers-color-scheme/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.prefers-color-scheme
{{CSSRef}}
-The **`prefers-color-scheme`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#targeting_media_features) is used to detect if a user has requested light or dark color themes.
+The **`prefers-color-scheme`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features) is used to detect if a user has requested light or dark color themes.
A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
## Embedded elements
@@ -154,6 +154,7 @@ In this case, the parent element with a `color-scheme` CSS property is a ``
## See also
- {{cssxref("color-scheme")}} CSS property
+- {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} HTTP Header [User Agent Client Hint](/en-US/docs/Web/HTTP/Client_hints#user-agent_client_hints)
- [Simulate prefers-color-scheme in Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#view-media-rules-for-prefers-color-scheme) (Firefox Page Inspector > Examine and edit CSS)
- [Video tutorial: Coding a Dark Mode for your Website](https://www.youtube.com/watch?v=jmepqJ5UbuM)
- [Redesigning your product and website for dark mode](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode)
diff --git a/files/en-us/web/css/@media/prefers-contrast/index.md b/files/en-us/web/css/@media/prefers-contrast/index.md
index e2367a5d2875004..81488d8e1683b76 100644
--- a/files/en-us/web/css/@media/prefers-contrast/index.md
+++ b/files/en-us/web/css/@media/prefers-contrast/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.prefers-contrast
{{CSSRef}}
-The **`prefers-contrast`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
+The **`prefers-contrast`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
## Syntax
@@ -65,5 +65,3 @@ This example has an annoying low contrast by default.
## See also
- CSS [forced-colors](/en-US/docs/Web/CSS/@media/forced-colors) media query
-
-{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/en-us/web/css/@media/prefers-reduced-data/index.md b/files/en-us/web/css/@media/prefers-reduced-data/index.md
index fdece8c6908a57c..e6ed3d58621694c 100644
--- a/files/en-us/web/css/@media/prefers-reduced-data/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-data/index.md
@@ -11,7 +11,7 @@ browser-compat: css.at-rules.media.prefers-reduced-data
> **Note:** This feature is not supported by any user agent and its specifics are subject to change.
-The **`prefers-reduced-data`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if the user has requested the web content that consumes less internet traffic.
+The **`prefers-reduced-data`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if the user has requested the web content that consumes less internet traffic.
## Syntax
@@ -54,7 +54,9 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
font-weight: 400;
font-display: swap;
/* latin */
- src: local("Montserrat Regular"), local("Montserrat-Regular"),
+ src:
+ local("Montserrat Regular"),
+ local("Montserrat-Regular"),
url("fonts/montserrat-regular.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
@@ -63,8 +65,18 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
}
body {
- font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Helvetica, Arial, "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ font-family:
+ Montserrat,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Helvetica,
+ Arial,
+ "Microsoft YaHei",
+ sans-serif,
+ "Apple Color Emoji",
+ "Segoe UI Emoji",
"Segoe UI Symbol";
}
```
diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.md b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
index 0ae06c3638d3e25..487ecaceb64f1b4 100644
--- a/files/en-us/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
@@ -9,27 +9,30 @@ browser-compat: css.at-rules.media.prefers-reduced-motion
> **Warning:** An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.
-The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
+The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.
+
+Such animations can trigger discomfort for those with [vestibular motion disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/). Animations such as scaling or panning large objects can be vestibular motion triggers.
```css
@media (prefers-reduced-motion) {
- /* styles to apply if the user's settings are set to reduced motion */
+ /* styles to apply if a user's device settings are set to reduced motion */
}
```
## Syntax
- `no-preference`
- - : Indicates that the user has made no preference known to the system.
+ - : Indicates that a user has made no preference known on the device. This keyword value evaluates as false.
- `reduce`
- - : Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
+ - : Indicates that a user has enabled the setting on their device for reduced motion. This keyword value evaluates as true.
## User preferences
For Firefox, the `reduce` request is honoured if:
-- In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
+- In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on.
+ - In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
- Alternatively, add `gtk-enable-animations = false` to the `[Settings]` block of [the GTK 3 configuration file](https://wiki.archlinux.org/title/GTK#Configuration).
- In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
@@ -42,32 +45,36 @@ For Firefox, the `reduce` request is honoured if:
## Examples
-This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.
+This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger.
+
+### Toning down the animation scaling
-### HTML
+#### HTML
```html
animated box
```
-### CSS
+#### CSS
```css
.animation {
animation: pulse 1s linear infinite both;
+ background-color: purple;
}
-/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
+/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
.animation {
- animation: dissolve 2s linear infinite both;
+ animation: dissolve 4s linear infinite both;
+ background-color: green;
+ text-decoration: overline;
}
}
```
```css hidden
.animation {
- background-color: #306;
color: #fff;
font: 1.2em sans-serif;
width: 10em;
@@ -99,7 +106,7 @@ This example has a scaling animation by default. If Reduce Motion is enabled in
opacity: 1;
}
50% {
- opacity: 0.8;
+ opacity: 0.3;
}
100% {
opacity: 1;
@@ -107,9 +114,11 @@ This example has a scaling animation by default. If Reduce Motion is enabled in
}
```
-### Result
+#### Result
+
+{{EmbedLiveSample("Toning down the animation scaling")}}
-{{EmbedLiveSample("Examples")}}
+You can enable the setting for reducing motion on [your device](#user_preferences) to view the change in animation scaling. This example uses the background color and the line over the text to visually highlight when the keyframe animation switches in response to the setting being enabled or disabled.
## Specifications
@@ -121,5 +130,6 @@ This example has a scaling animation by default. If Reduce Motion is enabled in
## See also
-- [An Introduction to the Reduced Motion Media Query (CSS Tricks)](https://css-tricks.com/introduction-reduced-motion-media-query/)
-- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) includes vestibular motion trigger examples.
+- {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}} HTTP Header [User Agent Client Hint](/en-US/docs/Web/HTTP/Client_hints#user-agent_client_hints)
+- [An introduction to the reduced motion media query](https://css-tricks.com/introduction-reduced-motion-media-query/) on CSS-Tricks (2019)
+- [Responsive design for motion](https://webkit.org/blog/7551/responsive-design-for-motion/) on WebKit Blog (2017)
diff --git a/files/en-us/web/css/@media/prefers-reduced-transparency/index.md b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md
new file mode 100644
index 000000000000000..ba4485ea2a6e484
--- /dev/null
+++ b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md
@@ -0,0 +1,65 @@
+---
+title: prefers-reduced-transparency
+slug: Web/CSS/@media/prefers-reduced-transparency
+page-type: css-media-feature
+status:
+ - experimental
+browser-compat: css.at-rules.media.prefers-reduced-transparency
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+The **`prefers-reduced-transparency`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#media_features) is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.
+
+## Syntax
+
+- `no-preference`
+ - : Indicates that a user has made no preference known on the device. This keyword value evaluates as false in the boolean context.
+- `reduce`
+ - : Indicates that a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects.
+
+## User preferences
+
+Various operating systems provide a preference for reducing transparency, and user agents are likely to rely on these system settings.
+They may also rely on less explicit signals on platforms which don't offer a specific setting.
+
+- In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
+- In macOS: System Preferences > Accessibility > Display > Reduce transparency.
+- In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.
+
+## Examples
+
+This example has a translucent box by default. If the setting to reduce transparency is enabled in the accessibility preferences on your device, the translucent box becomes more opaque.
+
+### HTML
+
+```html
+
translucent box
+```
+
+### CSS
+
+```css
+.translucent {
+ opacity: 0.4;
+}
+
+@media (prefers-reduced-transparency) {
+ .translucent {
+ opacity: 0.8;
+ }
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- CSS [prefers-reduced-motion](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
diff --git a/files/en-us/web/css/@media/resolution/index.md b/files/en-us/web/css/@media/resolution/index.md
index 6a44b01d15720e2..7ba76c9e6989b4f 100644
--- a/files/en-us/web/css/@media/resolution/index.md
+++ b/files/en-us/web/css/@media/resolution/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.resolution
{{CSSRef}}
-The **`resolution`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the pixel density of the output device.
+The **`resolution`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the pixel density of the output device.
## Syntax
diff --git a/files/en-us/web/css/@media/scripting/index.md b/files/en-us/web/css/@media/scripting/index.md
index d3425a13346915c..f4f696edbc695ec 100644
--- a/files/en-us/web/css/@media/scripting/index.md
+++ b/files/en-us/web/css/@media/scripting/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.scripting
{{CSSRef}}
-The **`scripting`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test whether scripting (such as JavaScript) is available.
+The **`scripting`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test whether scripting (such as JavaScript) is available.
## Syntax
@@ -72,5 +72,5 @@ p {
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
diff --git a/files/en-us/web/css/@media/shape/index.md b/files/en-us/web/css/@media/shape/index.md
index 92ca42d771e4f2a..c4e65e14de6150e 100644
--- a/files/en-us/web/css/@media/shape/index.md
+++ b/files/en-us/web/css/@media/shape/index.md
@@ -9,7 +9,7 @@ spec-urls: https://drafts.csswg.org/css-round-display/#shape-media-feature
{{CSSRef}}{{SeeCompatTable}}
-The `shape` [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the shape of the device to distinguish rectangular and round displays.
+The `shape` [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the shape of the device to distinguish rectangular and round displays.
## Syntax
@@ -75,5 +75,5 @@ There is no browser implementing this feature.
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/update-frequency/index.md b/files/en-us/web/css/@media/update-frequency/index.md
deleted file mode 100644
index e6d5d5d5be58a01..000000000000000
--- a/files/en-us/web/css/@media/update-frequency/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: update
-slug: Web/CSS/@media/update-frequency
-page-type: css-media-feature
-status:
- - experimental
-browser-compat: css.at-rules.media.update
----
-
-{{CSSRef}}{{SeeCompatTable}}
-
-The **`update`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.
-
-```css
-@media (update: < none | slow | fast >) {
- /* styles to apply if the update frequency of the output device is a match */
-}
-```
-
-## Syntax
-
-The `update` feature is specified as a single keyword value chosen from the list below.
-
-- `none`
- - : Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.
-- `slow`
- - : The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.
-- `fast`
- - : The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) can be used. Example: computer screens.
-
-## Examples
-
-### HTML
-
-```html
-
- If this text animates for you, your browser supports `update` and you are
- using a fast-updating device.
-
-```
-
-### CSS
-
-```css
-@keyframes jiggle {
- from {
- transform: translateY(0);
- }
-
- to {
- transform: translateY(25px);
- }
-}
-
-@media (update: fast) {
- p {
- animation: 1s jiggle linear alternate infinite;
- }
-}
-```
-
-### Result
-
-{{EmbedLiveSample("Examples")}}
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
-- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/update/index.md b/files/en-us/web/css/@media/update/index.md
new file mode 100644
index 000000000000000..926bf0beb53cae4
--- /dev/null
+++ b/files/en-us/web/css/@media/update/index.md
@@ -0,0 +1,75 @@
+---
+title: update
+slug: Web/CSS/@media/update
+page-type: css-media-feature
+browser-compat: css.at-rules.media.update
+---
+
+{{CSSRef}}
+
+The **`update`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.
+
+```css
+@media (update: < none | slow | fast >) {
+ /* styles to apply if the update frequency of the output device is a match */
+}
+```
+
+## Syntax
+
+The `update` feature is specified as a single keyword value chosen from the list below.
+
+- `none`
+ - : Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.
+- `slow`
+ - : The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.
+- `fast`
+ - : The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) can be used. Example: computer screens.
+
+## Examples
+
+### HTML
+
+```html
+
+ If this text animates for you, your browser supports `update` and you are
+ using a fast-updating device.
+
+```
+
+### CSS
+
+```css
+@keyframes jiggle {
+ from {
+ transform: translateY(0);
+ }
+
+ to {
+ transform: translateY(25px);
+ }
+}
+
+@media (update: fast) {
+ p {
+ animation: 1s jiggle linear alternate infinite;
+ }
+}
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/video-dynamic-range/index.md b/files/en-us/web/css/@media/video-dynamic-range/index.md
index 306400b8f2247f1..714fb8e15d6122b 100644
--- a/files/en-us/web/css/@media/video-dynamic-range/index.md
+++ b/files/en-us/web/css/@media/video-dynamic-range/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.video-dynamic-range
{{CSSRef}}
-The **`video-dynamic-range`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the {{glossary("user agent")}} and the output device.
+The **`video-dynamic-range`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the {{glossary("user agent")}} and the output device.
Some user agents, including many TVs, render video and graphics in two separate planes (bi-plane) with distinct screen characteristics. The `video-dynamic-range` feature is used to test the characteristics in the video plane.
@@ -32,5 +32,5 @@ The `video-dynamic-range` feature is specified as a keyword value chosen from th
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@media/width/index.md b/files/en-us/web/css/@media/width/index.md
index e2013e953e436b5..336fa273f757660 100644
--- a/files/en-us/web/css/@media/width/index.md
+++ b/files/en-us/web/css/@media/width/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.media.width
{{CSSRef}}
-The **`width`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) can be used to test the width of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/Paged_Media)).
+The **`width`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) can be used to test the width of the {{glossary("viewport")}} (or the page box, for [paged media](/en-US/docs/Web/CSS/CSS_paged_media)).
## Syntax
@@ -60,5 +60,5 @@ The `width` feature is specified as a {{cssxref("<length>")}} value repres
## See also
-- [Using Media Queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [@media](/en-US/docs/Web/CSS/@media)
diff --git a/files/en-us/web/css/@namespace/index.md b/files/en-us/web/css/@namespace/index.md
index 77b0e33c34490c0..b760a3a1890486f 100644
--- a/files/en-us/web/css/@namespace/index.md
+++ b/files/en-us/web/css/@namespace/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.namespace
{{CSSRef}}
-**`@namespace`** is an [at-rule](/en-US/docs/Web/CSS/At-rule) that defines [XML namespaces](/en-US/docs/Namespaces) to be used in a [CSS](/en-US/docs/Glossary/CSS) [style sheet](/en-US/docs/Web/API/StyleSheet).
+**`@namespace`** is an [at-rule](/en-US/docs/Web/CSS/At-rule) that defines XML [namespaces](/en-US/docs/Glossary/Namespace) to be used in a [CSS](/en-US/docs/Glossary/CSS) [style sheet](/en-US/docs/Web/API/StyleSheet).
{{EmbedInteractiveExample("pages/tabbed/at-rule-namespace.html", "tabbed-shorter")}}
@@ -33,7 +33,7 @@ Any `@namespace` rules must follow all {{cssxref("@charset")}} and {{cssxref("@i
The `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace _and_ name of the element or attribute matches.
-In [HTML5](/en-US/docs/Glossary/HTML5), known [foreign elements](https://html.spec.whatwg.org/#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the [\
](/en-US/docs/Web/SVG/Element/svg) and [\](/en-US/docs/Web/MathML/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`).
+In HTML, known [foreign elements](https://html.spec.whatwg.org/multipage/syntax.html#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the [``](/en-US/docs/Web/SVG/Element/svg) and [``](/en-US/docs/Web/MathML/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`, respectively).
> **Note:** In XML, unless a prefix is defined directly on an attribute (_e.g._, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.
diff --git a/files/en-us/web/css/@page/index.md b/files/en-us/web/css/@page/index.md
index 54ea97f29c635e9..7e556c68e92ebd2 100644
--- a/files/en-us/web/css/@page/index.md
+++ b/files/en-us/web/css/@page/index.md
@@ -7,7 +7,7 @@ browser-compat: css.at-rules.page
{{CSSRef}}
-The **`@page`** at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The **`@page`** at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.
+The **`@page`** at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins. The `@page` at-rule can be used to target all pages in a print-out or a subset using its various pseudo-classes.
## Syntax
@@ -33,51 +33,30 @@ The **`@page`** at-rule is a CSS at-rule used to modify different aspects of a p
@page wide {
size: a4 landscape;
}
+
+@page {
+ /* margin box at top right showing page number */
+ @top-right {
+ content: "Page " counter(pageNumber);
+ }
+}
```
-### Descriptors
+### Page properties
+The `@page` at-rule can contain only [page descriptors](#page-descriptors) and [margin at-rules](#margin_at-rules). The following descriptors have been implemented by at least one browser:
+
+- [`margin`](/en-US/docs/Web/CSS/margin)
+ - : Specifies the page margins. Individual margin properties [`margin-top`](/en-US/docs/Web/CSS/margin-top), [`margin-right`](/en-US/docs/Web/CSS/margin-right), [`margin-bottom`](/en-US/docs/Web/CSS/margin-bottom), and [`margin-left`](/en-US/docs/Web/CSS/margin-left) can also be used.
- [`page-orientation`](/en-US/docs/Web/CSS/@page/page-orientation)
- : Specifies the orientation of the page. This does not affect the layout of the page; the rotation is applied after the layout in the output medium.
- [`size`](/en-US/docs/Web/CSS/@page/size)
- : Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.
-## Description
-
-> **Note:** This documentation lists out features yet to be implemented across UAs, but they are stated in the official documentation. At the time of this writing, the only CSS property shown to have visible on both the at-rule and its pseudo-classes is the `margin` property.
-
-You can't change all CSS properties with **`@page`**. You can only change the margin of the document. Attempts to change any other CSS properties will be ignored.
-
-The `@page` at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.
-
-> **Note:** The W3C is discussing how to handle viewport-related {{cssxref("<length>")}} units, `vh`, `vw`, `vmin`, and `vmax`. Meanwhile do not use them within a `@page` at-rule.
-
-### Related properties
-
-The `@page` at-rule, allows the user to assign a name to the rule, which is then called in a declaration using the `page` property.
-
-- {{Cssxref("page")}}
- - : Allows a selector to use a user defined **named page**
-
-## Formal syntax
-
-{{csssyntax}}
-
-Where the `` includes:
-
-- page-properties
-- page-margin properties
-
-and `` represents these pseudo-classes:
-
-- {{Cssxref(":blank")}}
-- {{Cssxref(":first")}}
-- {{Cssxref(":left")}}
-- {{Cssxref(":right")}}
-
-> **Note:** The **`@page`** at-rule can only contain **page-properties** and **margin at-rules**, and the **margin at-rules** can only contain **page-margin properties**
+The specification mentions following CSS properties to be applicable to page boxes via @page at-rule. But these have _not been supported_ by any user agent yet.
-### page-properties
+
+Remaining page properties
| Feature | CSS properties |
| --------------------- | --------------------- |
@@ -148,14 +127,47 @@ and `` represents these pseudo-classes:
| | min-width |
| | max-width |
-### margin at-rules
+
+
+## Description
+
+The @page rule defines properties of the page box. The `@page` at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.
+
+> **Note:** The W3C is discussing how to handle viewport-related {{cssxref("<length>")}} units, `vh`, `vw`, `vmin`, and `vmax`. Meanwhile do not use them within a `@page` at-rule.
+
+### Related properties
+
+The `@page` at-rule, allows the user to assign a name to the rule, which is then called in a declaration using the `page` property.
+
+- {{Cssxref("page")}}
+ - : Allows a selector to use a user defined **named page**
+
+## Formal syntax
+
+{{csssyntax}}
+
+Where the `` includes:
+
+- page-properties
+- page-margin properties
+
+and `` represents these pseudo-classes:
+
+- [`:blank`](https://drafts.csswg.org/css-page/#blank-pseudo)
+- {{Cssxref(":first")}}
+- {{Cssxref(":left")}}
+- {{Cssxref(":right")}}
+
+## Margin at-rules
-The margin at-rules are used inside of the `@page` at-rule. They each target a different section of the document printed page and make changes based on the properties or content set in the block of code:
+> **Warning:** The margin at-rules have not been implemented by any user agent (updated: August 2023).
+
+The margin at-rules are used inside of the `@page` at-rule. They each target a different section of the document printed page, styling the area of the printed page based on the property values set in the style block:
```css
@page {
@top-left {
-
+ /* page-margin-properties */
}
}
```
@@ -164,61 +176,32 @@ The margin at-rules are used inside of the `@page` at-rule. They each target a d
Other margin-at rules include:
-```
-@top-left-corner {
-
-}
-@top-left {
-
-}
-@top-center {
-
-}
-@top-right {
-
-}
-@top-right-corner {
-
-}
-@bottom-left-corner {
-
-}
-@bottom-left {
-
-}
-@bottom-center {
-
-}
-@bottom-right {
-
-}
-@bottom-right-corner {
-
-}
-@left-top {
-
-}
-@left-middle {
-
-}
-@left-bottom {
-
-}
-@right-top {
-
-}
-@right-middle {
-
-}
-@right-bottom {
-
-}
+```css-nolint
+@top-left-corner
+@top-left
+@top-center
+@top-right
+@top-right-corner
+@bottom-left-corner
+@bottom-left
+@bottom-center
+@bottom-right
+@bottom-right-corner
+@left-top
+@left-middle
+@left-bottom
+@right-top
+@right-middle
+@right-bottom
```
-#### page-margin properties
+### Page-margin properties
The page-margin properties are the set of CSS properties can be set in any individual margin at-rule. They include:
+
+Page-margin properties
+
| Feature | CSS properties |
| --------------------- | --------------------- |
| bidi properties | direction |
@@ -291,9 +274,11 @@ The page-margin properties are the set of CSS properties can be set in any indiv
| | max-width |
| z-index | z-index |
+
+
## Named pages
-Named pages enable performing per-page layout and adding [page-breaks](/en-US/docs/Web/CSS/CSS_Fragmentation) in a declarative manner when printing.
+Named pages enable performing per-page layout and adding [page-breaks](/en-US/docs/Web/CSS/CSS_fragmentation) in a declarative manner when printing.
Named pages can be applied using the {{Cssxref("page")}} property. This allows the user to create different page configurations for use in print layouts.
@@ -337,24 +322,6 @@ This example shows how to split the ``s into individual pages in `lands
velit.
-
- Header
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
- facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
- aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
- velit.
-
-
-
- Header
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
- facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
- aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
- velit.
-
-
```
@@ -366,9 +333,22 @@ This example shows how to split the ``s into individual pages in `lands
margin: 20%;
}
+section {
+ page-break-after: always;
+ break-after: page;
+}
+
+@media print {
+ button {
+ display: none;
+ }
+}
+```
+
+```css hidden
body {
- font-family: "Helvetica";
- background-color: rgb(110 110 119);
+ font-family: "Helvetica", sans-serif;
+ background-color: silver;
}
article {
@@ -379,25 +359,14 @@ section {
display: grid;
background-color: white;
border-radius: 0.6rem;
- margin-block-end: 1.5rem;
justify-items: center;
padding: 1rem;
width: 50%;
- page-break-after: always;
- break-after: page;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
-}
-
-section {
- page-break-after: always;
- break-after: page;
-}
-
-@media print {
- button {
- display: none;
- }
+ margin: 0 auto;
+ margin-block-end: 1.5rem;
+ border: 1px dashed;
}
```
@@ -420,7 +389,7 @@ Clicking the print button will launch a print dialog with the html sections spli
Please refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) of `@page` for examples.
-- {{Cssxref(":blank")}}
+- [`:blank`](https://drafts.csswg.org/css-page/#blank-pseudo)
- {{Cssxref(":first")}}
- {{Cssxref(":left")}}
- {{Cssxref(":right")}}
@@ -438,3 +407,5 @@ Please refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes)
- The `@page` [`size`](/en-US/docs/Web/CSS/@page/size) descriptor
- The {{Cssxref("page")}} property
- See the [\[META\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)
+- [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media) module
+- [Paged.js: W3C paged media polyfill](https://pagedjs.org/documentation/1-the-big-picture)
diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md
index c9086b93d7f100b..fda81dfe514f125 100644
--- a/files/en-us/web/css/@property/index.md
+++ b/files/en-us/web/css/@property/index.md
@@ -2,16 +2,14 @@
title: "@property"
slug: Web/CSS/@property
page-type: css-at-rule
-status:
- - experimental
browser-compat: css.at-rules.property
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
-The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/Guide/Houdini) umbrella of APIs, it allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, setting default values, and define whether a property can inherit values or not.
+The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/Guide/Houdini) umbrella of APIs. It allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
-The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if {{domxref('CSS.registerProperty')}} had been called with equivalent parameters.
+The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if {{domxref('CSS.registerProperty_static', 'registerProperty()')}} had been called with equivalent parameters.
## Syntax
@@ -25,47 +23,104 @@ The `@property` rule represents a custom property registration directly in a sty
### Descriptors
-- {{cssxref("@property/syntax","syntax")}} {{Experimental_Inline}}
- - : Describes the allowable syntax for the property.
-- {{cssxref("@property/inherits","inherits")}} {{Experimental_Inline}}
+- {{cssxref("@property/syntax","syntax")}}
+
+ - : Describes the allowable syntax for the property. May be a ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, or ``, or a list of data type and keyword values.
+
+ The `+` (space-separated) and `#` (comma-separated) multipliers indicate that a list of values is expected, for example `#` means a comma-separated list of `` values is the expected syntax.
+
+ Vertical lines (`|`) can create "or" conditions for the expected syntax, for example ` | auto` accepts a `` or `auto`, and `# | #` expects a comma-separated list of `` values or a comma-separated list of `` values.
+
+- {{cssxref("@property/inherits","inherits")}}
- : Controls whether the custom property registration specified by `@property` inherits by default.
-- {{cssxref("@property/initial-value","initial-value")}} {{Experimental_Inline}}
+- {{cssxref("@property/initial-value","initial-value")}}
- : Sets the initial value for the property.
-A valid `@property` rule represents a custom property registration, with the property name being the serialization of the in the rule's prelude.
-
-`@property` rules require a {{cssxref("@property/syntax","syntax")}} and {{cssxref("@property/inherits","inherits")}} descriptor; if either are missing, the entire rule is invalid and must be ignored. The {{cssxref("@property/initial-value","initial-value")}} descriptor is optional only if the syntax is the universal syntax definition , otherwise the descriptor is required; if it's missing, the entire rule is invalid and must be ignored.
+The `@property` rule must include both the {{cssxref("@property/syntax","syntax")}} and {{cssxref("@property/inherits","inherits")}} descriptors; if either are missing, the entire `@property` rule is invalid and ignored.
+The {{cssxref("@property/initial-value","initial-value")}} descriptor is also required, unless the syntax is the [`*` universal syntax definition](https://drafts.css-houdini.org/css-properties-values-api/#universal-syntax-definition) (e.g., `initial-value: *`).
+If the `initial-value` descriptor is required and omitted, the entire `@property` rule is invalid and ignored.
Unknown descriptors are invalid and ignored, but do not invalidate the `@property` rule.
+## Formal syntax
+
+{{csssyntax}}
+
## Examples
-Add type checking to `--my-color` {{cssxref('--*', 'custom property')}}, as a color, a default value, and not allow it to inherit its value:
+In this example, we define two custom properties, `--item-size` and `--item-color`, that we'll use to define the size (width and height) and background color of the three following items.
+
+```html
+
+
Item one
+
Item two
+
Item three
+
";
- inherits: false;
- initial-value: #c0ffee;
+@property --item-size {
+ syntax: "";
+ inherits: true;
+ initial-value: 40%;
}
```
-Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}}:
+We define a second custom property, `--item-color`, using [JavaScript](/en-US/docs/Web/JavaScript) instead of CSS. The JavaScript {{domxref('CSS.registerProperty_static', 'registerProperty()')}} method is equivalent to `@property` at-rule. The property is defined to have an initial value of `aqua`, to accept only [``](/en-US/docs/Web/CSS/color_value) values, and is not inherited.
```js
window.CSS.registerProperty({
- name: "--my-color",
+ name: "--item-color",
syntax: "",
inherits: false,
- initialValue: "#c0ffee",
+ initialValue: "aqua",
});
```
-## Formal syntax
+We use the two custom properties to style the items:
-{{csssyntax}}
+```css
+.container {
+ display: flex;
+ height: 200px;
+ border: 1px dashed black;
+
+ /* set custom property values on parent */
+ --item-size: 20%;
+ --item-color: orange;
+}
+
+/* use custom properties to set item size and background color */
+.item {
+ width: var(--item-size);
+ height: var(--item-size);
+ background-color: var(--item-color);
+}
+
+/* set custom property values on element itself */
+.two {
+ --item-size: initial;
+ --item-color: inherit;
+}
+
+.three {
+ /* invalid values */
+ --item-size: 1000px;
+ --item-color: xyz;
+}
+```
+
+{{ EmbedLiveSample('examples', '100%', '250px') }}
+
+The two custom properties, `--item-size: 20%` and `--item-color: orange;` are set on the `container` parent, overriding the `40%` and `aqua` default values set when these custom properties were defined. The size is set to be inheritable; the color is not.
+
+For item one, none of these custom properties have been set. The `--item-size` is inheritable, so the value `20%` set on its parent `container` is used. On the other hand, the property `--item-color` is not inheritable, so the value `orange` set on the parent is not considered. Instead the default initial value `aqua` is used.
+
+For item two, CSS global keywords are set for both custom properties which are valid values for all value types and therefore valid no matter the `syntax` descriptor value. The `--item-size` is set to `initial` and uses the `initial-value: 40%;` set in the `@property` declaration. The `initial` value means the`initialValue` value for the property is used. The `--item-color` is set to `inherit`, explicitly inheriting the `orange` value from its parent even though the custom property is set to otherwise not be inherited. This is why item two is orange.
+
+For item three, the `--item-size` value gets set to `1000px`. While `1000px` is a {{cssxref("length")}} value, the `@property` declaration requires the value be a ``, so the declaration is not valid and is ignored, meaning the inheritable `20%` set on the parent is used. The `xyz` value is also invalid. As `registerProperty()` set `--item-color` to not be inherited, the default initial value of `aqua` is used and not the parent's `orange` value.
## Specifications
@@ -77,7 +132,10 @@ window.CSS.registerProperty({
## See also
+- {{cssxref("var")}}
- [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API)
- [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API)
- [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API)
- [CSS Houdini](/en-US/docs/Web/Guide/Houdini)
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module
diff --git a/files/en-us/web/css/@property/inherits/index.md b/files/en-us/web/css/@property/inherits/index.md
index e240c05da49eb7d..1662128bda35a9b 100644
--- a/files/en-us/web/css/@property/inherits/index.md
+++ b/files/en-us/web/css/@property/inherits/index.md
@@ -2,12 +2,10 @@
title: inherits
slug: Web/CSS/@property/inherits
page-type: css-at-rule-descriptor
-status:
- - experimental
browser-compat: css.at-rules.property.inherits
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`inherits`** [CSS](/en-US/docs/Web/CSS) descriptor is required when using the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) and controls whether the custom property registration specified by `@property` inherits by default.
@@ -56,7 +54,7 @@ Using [CSS](/en-US/docs/Web/CSS) {{cssxref('@property')}} [at-rule](/en-US/docs/
}
```
-Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}}:
+Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty_static', 'CSS.registerProperty()')}}:
```js
window.CSS.registerProperty({
diff --git a/files/en-us/web/css/@property/initial-value/index.md b/files/en-us/web/css/@property/initial-value/index.md
index 0ab88582786b686..b6fd6079d0384c7 100644
--- a/files/en-us/web/css/@property/initial-value/index.md
+++ b/files/en-us/web/css/@property/initial-value/index.md
@@ -2,12 +2,10 @@
title: initial-value
slug: Web/CSS/@property/initial-value
page-type: css-at-rule-descriptor
-status:
- - experimental
browser-compat: css.at-rules.property.initial-value
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`initial-value`** [CSS](/en-US/docs/Web/CSS) descriptor is required when using the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) unless the syntax accepts any valid token stream. It sets the initial-value for the property.
@@ -55,7 +53,7 @@ Using [CSS](/en-US/docs/Web/CSS) {{cssxref('@property')}} [at-rule](/en-US/docs/
}
```
-Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}}:
+Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty_static', 'CSS.registerProperty()')}}:
```js
window.CSS.registerProperty({
diff --git a/files/en-us/web/css/@property/syntax/index.md b/files/en-us/web/css/@property/syntax/index.md
index a1a1e5d6c5b3973..4b15379d883ee29 100644
--- a/files/en-us/web/css/@property/syntax/index.md
+++ b/files/en-us/web/css/@property/syntax/index.md
@@ -2,12 +2,10 @@
title: syntax
slug: Web/CSS/@property/syntax
page-type: css-at-rule-descriptor
-status:
- - experimental
browser-compat: css.at-rules.property.syntax
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`syntax`** [CSS](/en-US/docs/Web/CSS) descriptor is required when using the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) and describes the allowable syntax for the property.
@@ -80,7 +78,7 @@ Using [CSS](/en-US/docs/Web/CSS) {{cssxref('@property')}} [at-rule](/en-US/docs/
}
```
-Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}}:
+Using [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty_static', 'CSS.registerProperty()')}}:
```js
window.CSS.registerProperty({
diff --git a/files/en-us/web/css/@scope/index.md b/files/en-us/web/css/@scope/index.md
new file mode 100644
index 000000000000000..f0bcf0cc7837a0b
--- /dev/null
+++ b/files/en-us/web/css/@scope/index.md
@@ -0,0 +1,474 @@
+---
+title: "@scope"
+slug: Web/CSS/@scope
+page-type: css-at-rule
+status:
+ - experimental
+browser-compat: css.at-rules.scope
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+The **`@scope`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.
+
+In JavaScript, `@scope` can be accessed via the CSS object model interface {{DOMxRef("CSSScopeRule")}}.
+
+## Syntax
+
+The `@scope` at-rule contains one or more rulesets (termed **scoped style rules**) and defines a scope in which to apply them to selected elements. `@scope` can be used in two ways:
+
+1. As a standalone block inside your CSS, in which case it includes a prelude section that includes **scope root** and optional **scope limit** selectors — these define the upper and lower bounds of the scope.
+
+ ```css
+ @scope (scope root) to (scope limit) {
+ rulesets
+ }
+ ```
+
+2. As inline styles included inside a {{htmlelement("style")}} element in your HTML, in which case the prelude is omitted, and the enclosed ruleset is automatically scoped to the `
+
+ ```
+
+## Description
+
+A complex web document might include components such as headers, footers, news articles, maps, media players, ads, and others. As complexity increases, effectively managing the styling for these components becomes more of a concern, and effective scoping of styles helps us manage this complexity. Let's consider the following DOM tree:
+
+```plain-nolint
+body
+└─ article.feature
+ ├─ section.article-hero
+ │ ├─ h2
+ │ └─ img
+ │
+ ├─ section.article-body
+ │ ├─ h3
+ │ ├─ p
+ │ ├─ img
+ │ ├─ p
+ │ └─ figure
+ │ ├─ img
+ │ └─ figcaption
+ │
+ └─ footer
+ ├─ p
+ └─ img
+```
+
+If you wanted to select the {{htmlelement("img")}} element inside the {{htmlelement("section")}} with a class of `article-body`, you could do the following:
+
+- Write a selector like `.feature > .article-body > img`. However, that has high specificity so is hard to override, and is also tightly coupled to the DOM structure. If your markup structure changes in the future, you might need to rewrite your CSS.
+- Write something less specific like `.article-body img`. However, that will select all images inside the `section`.
+
+This is where `@scope` is useful. It allows you to define a precise scope inside which your selectors are allowed to target elements. For example, you could solve the above problem using a standalone `@scope` block like the following:
+
+```css
+@scope (.article-body) to (figure) {
+ img {
+ border: 5px solid black;
+ background-color: goldenrod;
+ }
+}
+```
+
+The `.article-body` scope root selector defines the upper bound of the DOM tree scope in which the ruleset will be applied, and the `figure` scope limit selector defines the lower bound. As a result, only {{htmlelement("img")}} elements inside a `` with a class of `article-body`, but not inside {{htmlelement("figure")}} elements, will be selected.
+
+> **Note:** This kind of scoping — with an upper and lower bound — is commonly referred to as a **donut scope**.
+
+If you want to select all images inside a `` with a class of `article-body`, you can omit the scope limit:
+
+```css
+@scope (.article-body) {
+ img {
+ border: 5px solid black;
+ background-color: goldenrod;
+ }
+}
+```
+
+Or you could include your `@scope` block inline inside a `
+
+
+
+```
+
+> **Note:** It is important to understand that, while `@scope` allows you to isolate the application of selectors to specific DOM subtrees, it does not completely isolate the applied styles to within those subtrees. This is most noticeable with inheritance — properties that are inherited by children (for example {{cssxref("color")}} or {{cssxref("font-family")}}) will still be inherited, beyond any set scope limit.
+
+### The `:scope` pseudo-class
+
+In the context of a `@scope` block, the {{cssxref(":scope")}} pseudo-class represents the scope root — it provides an easy way to apply styles to the scope root itself, from inside the scope:
+
+```css
+@scope (.feature) {
+ :scope {
+ background: rebeccapurple;
+ color: antiquewhite;
+ font-family: sans-serif;
+ }
+}
+```
+
+In fact, `:scope` is implicitly prepended to all scoped style rules. If you want, you can explicitly prepend `:scope` or prepend the [nesting](/en-US/docs/Web/CSS/CSS_nesting) selector (`&`) to get the same effect if you find these representations easier to understand.
+
+The three rules in the following block are all equivalent in what they select:
+
+```css
+@scope (.feature) {
+ img { ... }
+
+ :scope img { ... }
+
+ & img { ... }
+}
+```
+
+### Notes on scoped selector usage
+
+- A scope limit can use `:scope` to specify a specific relationship requirement between the scope limit and root. For example:
+
+ ```css
+ /* figure is only a limit when it is a direct child of the :scope */
+ @scope (.article-body) to (:scope > figure) { ... }
+ ```
+
+- A scope limit can reference elements outside the scope root using `:scope`. For example:
+
+ ```css
+ /* figure is only a limit when the :scope is inside .feature */
+ @scope (.article-body) to (.feature :scope figure) { ... }
+ ```
+
+- Scoped style rules can't escape the subtree. Selections like `:scope + p` are invalid because that selection would be outside the subtree.
+
+- It is perfectly valid to define the scope root and limit as a selector list, in which case multiple scopes will be defined. In the following example the styles are applied to any `` with a class of `article-hero` or `article-body`, but not if it is nested inside a ``:
+
+ ```css
+ @scope (.article-hero, .article-body) to (figure) {
+ img {
+ border: 5px solid black;
+ background-color: goldenrod;
+ }
+ }
+ ```
+
+### Specificity in `@scope`
+
+Including a ruleset inside a `@scope` block does not affect the specificity of its selector, regardless of the selectors used inside the scope root and limit. For example:
+
+```css
+@scope (.article-body) {
+ /* img has a specificity of 0-0-1, as expected */
+ img { ... }
+}
+```
+
+However, if you decide to explicitly prepend the `:scope` pseudo-class to your scoped selectors, you'll need to factor it in when calculating their specificity. `:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:
+
+```css
+@scope (.article-body) {
+ /* :scope img has a specificity of 0-1-0 + 0-0-1 = 0-1-1 */
+ :scope img { ... }
+}
+```
+
+When using the `&` selector inside a `@scope` block, `&` represents the scope root selector; it is internally calculated as that selector wrapped inside an {{cssxref(":is", ":is()")}} pseudo-class function. So for example, in:
+
+```css
+@scope (figure, #primary) {
+ & img { ... }
+}
+```
+
+`& img` is equivalent to `:is(figure, #primary) img`. Since `:is()` takes the specificity of its most specific argument (`#primary`, in this case), the specificity of the scoped `& img` selector is therefore 1-0-0 + 0-0-1 = 1-0-1.
+
+### The difference between `:scope` and `&` inside `@scope`
+
+`:scope` represents the matched scope root, whereas `&` represents the selector used to match the scope root. Because of this, it is possible to chain `&` multiple times. However, you can only use `:scope` once — you can't match a scope root inside a scope root.
+
+```css
+@scope (.feature) {
+ /* Selects a .feature inside the matched root .feature */
+ & & { ... }
+
+ /* Doesn't work */
+ :root :root { ... }
+}
+```
+
+### How `@scope` conflicts are resolved
+
+`@scope` adds a new criterion to the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade): **scoping proximity**. This states that when two scopes have conflicting styles, the style that has the smallest number of hops up the DOM tree hierarchy to the scope root is applied. Let's look at an example to see what this means.
+
+Take the following HTML snippet, where different-themed cards are nested inside one another:
+
+```html
+
+```
+
+If you wrote the theme CSS like so, you'd run into trouble:
+
+```css
+.light-theme {
+ background: #ccc;
+}
+
+.dark-theme {
+ background: #333;
+}
+
+.light-theme p {
+ color: black;
+}
+
+.dark-theme p {
+ color: white;
+}
+```
+
+The innermost paragraph is supposed to be colored black because it is inside a light theme card. However, it's targeted by both `.light-theme p` and `.dark-theme p`. Because the `.dark-theme p` rule appears later in the source order, it is applied, and the paragraph ends up being wrongly colored white.
+
+To fix this, you can use `@scope` as follows:
+
+```css
+@scope (.light-theme) {
+ :scope {
+ background: #ccc;
+ }
+ p {
+ color: black;
+ }
+}
+
+@scope (.dark-theme) {
+ :scope {
+ background: #333;
+ }
+ p {
+ color: white;
+ }
+}
+```
+
+Now the innermost paragraph is correctly colored black. This is because it is only one DOM tree hierarchy level away from the `.light-theme` scope root, but two levels away from the `.dark-theme` scope root. Therefore, the light style wins.
+
+> **Note:** Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as [importance](/en-US/docs/Web/CSS/important), [layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers), and [specificity](/en-US/docs/Web/CSS/Specificity).
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Basic style inside scope roots
+
+In this example, we use two separate `@scope` blocks to match links inside elements with a `.light-scheme` and `.dark-scheme` class respectively. Note how `:scope` is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the {{htmlelement("div")}} elements that have the classes applied to them.
+
+#### HTML
+
+```html
+
+
+
+```
+
+#### CSS
+
+```css hidden
+div {
+ padding: 10px;
+}
+```
+
+```css
+@scope (.light-scheme) {
+ :scope {
+ background-color: plum;
+ }
+
+ a {
+ color: darkmagenta;
+ }
+}
+
+@scope (.dark-scheme) {
+ :scope {
+ background-color: darkmagenta;
+ color: antiquewhite;
+ }
+
+ a {
+ color: plum;
+ }
+}
+```
+
+#### Result
+
+The above code renders like this:
+
+{{ EmbedLiveSample("Basic style inside scope roots", "100%", "150") }}
+
+### Scope roots and scope limits
+
+In this example, we have an HTML snippet that matches the DOM structure we talked about earlier in the [Description](#description) section. This structure represents a typical article summary. The key features to note are the {{htmlelement("img")}} elements, which are nested at various levels in the structure.
+
+The aim of this example is to show how to use a scope root and limit to style `
+
+ Article heading
+
+
+
+ Article subheading
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod
+ consectetur leo, nec eleifend quam volutpat vitae. Duis quis felis at
+ augue imperdiet aliquam. Morbi at felis et massa mattis lacinia. Cras
+ pharetra velit nisi, ac efficitur magna luctus nec.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+ My infographic
+
+
+
+
+ Written by Chris Mills.
+
+
+```
+
+#### CSS
+
+```css hidden
+* {
+ box-sizing: border-box;
+}
+
+article {
+ margin-bottom: 20px;
+ padding: 10px;
+ border: 2px solid gray;
+}
+
+.article-hero,
+.article-body,
+article footer {
+ padding: 20px;
+ margin: 10px;
+ border: 2px solid lightgray;
+}
+
+img {
+ height: 100px;
+ width: 100%;
+ display: block;
+ background-color: lightgray;
+ color: black;
+ padding: 10px;
+}
+```
+
+In our CSS, we have two `@scope` blocks:
+
+- The first `@scope` block defines its scope root as elements with a class of `.feature` (in this case, the outer `` only), demonstrating how `@scope` can be used to theme a specific HTML subset.
+- The second `@scope` block also defines its scope root as elements with a class of `.feature`, but in addition defines a scope limit of `figure`. This ensures that contained rulesets will only be applied to matching elements within the scope root (`
...
` in this case) that **are not** nested inside descendant `
` elements. This `@scope` block contains a single ruleset that styles `` element (labeled "My infographic").
+
+{{ EmbedLiveSample("Scope roots and scope limits", "100%", "400") }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSxRef(":scope")}}
+- {{DOMxRef("CSSScopeRule")}}
+- [Limit the reach of your selectors with the CSS `@scope` at-rule](https://developer.chrome.com/docs/css-ui/at-scope) on developer.chrome.com (2023)
diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md
new file mode 100644
index 000000000000000..2c66c32bb7eb02d
--- /dev/null
+++ b/files/en-us/web/css/@starting-style/index.md
@@ -0,0 +1,470 @@
+---
+title: "@starting-style"
+slug: Web/CSS/@starting-style
+page-type: css-at-rule
+status:
+ - experimental
+browser-compat: css.at-rules.starting-style
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+The **`@starting-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.
+
+## Syntax
+
+The `@starting-style` at rule can be used in two ways:
+
+1. As a standalone block, in which case it contains one or more rulesets defining starting style declarations and selecting the elements they apply to:
+
+ ```css
+ @starting-style {
+ rulesets
+ }
+ ```
+
+2. Nested within an existing ruleset, in which case it contains one or more declarations defining starting property values for the elements already selected by that ruleset:
+
+ ```css
+ selector { /* existing ruleset */
+ /* ... */
+
+ @starting-style {
+ declarations
+ }
+ }
+ ```
+
+## Description
+
+To avoid unexpected behavior, [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) are by default not triggered on an element's initial style update, or when its {{CSSxRef("display")}} type changes from `none` to another value. To enable first-style transitions, `@starting-style` rules are needed. They provide starting styles for elements that do not have a previous state, defining the property values to transition from.
+
+`@starting-style` is especially useful when creating entry and exit transitions for elements displayed in the [top layer](/en-US/docs/Glossary/Top_layer) (such as [popovers](/en-US/docs/Web/API/Popover_API) and modal {{htmlelement("dialog")}}s), elements that are changing to and from `display: none`, and elements when first added to or removed from the DOM.
+
+> **Note:** `@starting-style` is only relevant to CSS transitions. When using [CSS animations](/en-US/docs/Web/CSS/CSS_animations) to implement such effects, `@starting-style` is not needed. See [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) for an example.
+
+There are two ways to use `@starting-style`: as a standalone rule or nested within a ruleset.
+
+Let's consider a scenario where we want to animate a [popover](/en-US/docs/Web/API/Popover_API) when shown (that is, when added to the top layer). The "original rule" specifying the styles for the open popover could look something like this (see the [popover example](#animating_a_popover) below):
+
+```css
+[popover]:popover-open {
+ opacity: 1;
+ transform: scaleX(1);
+}
+```
+
+To specify the starting values of the popover's properties that will be animated using the first method, you include a standalone `@starting-style` block in your CSS:
+
+```css
+@starting-style {
+ [popover]:popover-open {
+ opacity: 0;
+ transform: scaleX(0);
+ }
+}
+```
+
+> **Note:** The `@starting-style` at-rule and the "original rule" have the same {{cssxref("specificity")}}. To ensure that starting styles get applied, include the `@starting-style` at-rule _after_ the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles.
+
+To specify the starting style for the popover using the nested method, you can nest the `@starting-style` block inside the "original rule":
+
+```css
+[popover]:popover-open {
+ opacity: 1;
+ transform: scaleX(1);
+
+ @starting-style {
+ opacity: 0;
+ transform: scaleX(0);
+ }
+}
+```
+
+### When exactly are starting styles used?
+
+It is important to understand that an element will transition from its `@starting-style` styles when it is first rendered in the DOM, or when it transitions from {{cssxref("display", "display: none")}} to a visible value. When it transitions back from its initial visible state, it will no longer use the `@starting-style` styles as it is now visible in the DOM. Instead, it will transition back to whatever styles exist for that element's default state.
+
+In effect, there are three style states to manage in these situations — starting-style state, transitioned state, and default state. It is possible for the "to" and "from" transitions to be different in such cases. You can see a proof of this in our [Demonstration of when starting styles are used](#demonstration_of_when_starting_styles_are_used) example, below.
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Basic @starting-style usage
+
+Transition an element's {{cssxref("background-color")}} from transparent to green when it is initially rendered:
+
+```css
+#target {
+ transition: background-color 1.5s;
+ background-color: green;
+}
+
+@starting-style {
+ #target {
+ background-color: transparent;
+ }
+}
+```
+
+Transition the {{cssxref("opacity")}} of an element when it changes its {{cssxref("display")}} value to or from `none`:
+
+```css
+#target {
+ transition-property: opacity, display;
+ transition-duration: 0.5s;
+ display: block;
+ opacity: 1;
+ @starting-style {
+ opacity: 0;
+ }
+}
+
+#target.hidden {
+ display: none;
+ opacity: 0;
+}
+```
+
+### Demonstration of when starting styles are used
+
+In this example, a button is pressed to create a {{htmlelement("div")}} element, give it a `class` of `showing`, and add it to the DOM.
+
+`showing` is given a `@starting-style` of `background-color: red` and a style of `background-color: blue` to transition to. The default `div` ruleset contains `background-color: yellow`, and is also where the `transition` is set.
+
+When the `` is first added to the DOM, you'll see the background transition from red to blue. After a timeout, we remove the `showing` class from the `
` via JavaScript. At that point it transitions from blue back to yellow, not red. This proves that the starting styles are only used when the element is first rendered in the DOM. Once it has appeared, the element transitions back to the default style set on it.
+
+After another timeout, we then remove the `
` from the DOM altogether, resetting the initial state of the example so it can be run again.
+
+#### HTML
+
+```html
+
Display <div>
+```
+
+#### CSS
+
+```css hidden
+div {
+ width: 200px;
+ height: 100px;
+ border: 1px solid black;
+ margin-top: 10px;
+}
+
+div::after {
+ content: "class: " attr(class);
+ position: relative;
+ top: 3px;
+ left: 3px;
+}
+```
+
+```css
+div {
+ background-color: yellow;
+ transition: background-color 3s;
+}
+
+div.showing {
+ background-color: skyblue;
+}
+
+@starting-style {
+ div.showing {
+ background-color: red;
+ }
+}
+```
+
+#### JavaScript
+
+```js
+const btn = document.querySelector("button");
+
+btn.addEventListener("click", () => {
+ btn.disabled = true;
+ const divElem = document.createElement("div");
+ divElem.classList.add("showing");
+ document.body.append(divElem);
+
+ setTimeout(() => {
+ divElem.classList.remove("showing");
+
+ setTimeout(() => {
+ divElem.remove();
+ btn.disabled = false;
+ }, 3000);
+ }, 3000);
+});
+```
+
+#### Result
+
+The code renders as follows:
+
+{{ EmbedLiveSample("Demonstration of when starting styles are used", "100%", "150") }}
+
+### Animating a popover
+
+In this example, a [popover](/en-US/docs/Web/API/Popover_API) is animated using [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions). Basic entry and exit animations are provided using the {{CSSxRef("transition")}} property.
+
+#### HTML
+
+The HTML contains a {{htmlelement("div")}} element declared as a popover using the [popover](/en-US/docs/Web/HTML/Global_attributes/popover) attribute and a {{htmlelement("button")}} element designated as the popover's display control using its [popovertarget](/en-US/docs/Web/HTML/Element/button#popovertarget) attribute.
+
+```html
+
Show the popover
+
I'm a Popover! I should animate.
+```
+
+#### CSS
+
+In this example, we want to animate two properties, [`opacity`](/en-US/docs/Web/CSS/opacity) and [`transform`](/en-US/docs/Web/CSS/transform) (specifically, a horizontally scaling transform), to make the popover fade in and out as well as grow and shrink horizontally.
+
+```css
+html {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+[popover]:popover-open {
+ opacity: 1;
+ transform: scaleX(1);
+}
+
+[popover] {
+ font-size: 1.2rem;
+ padding: 10px;
+
+ /* Final state of the exit animation */
+ opacity: 0;
+ transform: scaleX(0);
+
+ transition:
+ opacity 0.7s,
+ transform 0.7s,
+ overlay 0.7s allow-discrete,
+ display 0.7s allow-discrete;
+ /* Equivalent to
+ transition: all 0.7s allow-discrete; */
+}
+
+/* Include after the [popover]:popover-open rule */
+@starting-style {
+ [popover]:popover-open {
+ opacity: 0;
+ transform: scaleX(0);
+ }
+}
+
+/* Transition for the popover's backdrop */
+[popover]::backdrop {
+ background-color: rgb(0 0 0 / 0%);
+ transition:
+ display 0.7s allow-discrete,
+ overlay 0.7s allow-discrete,
+ background-color 0.7s;
+ /* Equivalent to
+ transition: all 0.7s allow-discrete; */
+}
+
+[popover]:popover-open::backdrop {
+ background-color: rgb(0 0 0 / 25%);
+}
+
+/* Nesting (&) is not supported for pseudo-elements
+so specify a standalone starting-style block. */
+@starting-style {
+ [popover]:popover-open::backdrop {
+ background-color: rgb(0 0 0 / 0%);
+ }
+}
+```
+
+To achieve this, we have set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an ending state on the open state of the popover (selected via the [`:popover-open`](/en-US/docs/Web/CSS/:popover-open) pseudo-class).
+
+We then set a [`transition`](/en-US/docs/Web/CSS/transition) property to animate between the two states. A starting state for the animation is included inside a `@starting-style` at-rule to enable the entry animation.
+
+Because the animated element is being promoted to the [top layer](/en-US/docs/Glossary/Top_layer) when shown and removed from the top layer when hidden (with [`display: none`](/en-US/docs/Web/CSS/display)), some extra steps are required to ensure the animation works in both directions:
+
+- `display` is added to the list of transitioned elements to ensure the animated element is visible (set to `display: block` or another visible `display` value) throughout both the entry and exit animations. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Note that the [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) value is also set in the shorthand to activate the animation.
+- [`overlay`](/en-US/docs/Web/CSS/overlay) is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for simple animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.
+
+> **Note:** We've also included a transition on the [`::backdrop`](/en-US/docs/Web/CSS/::backdrop) that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is used to select the backdrop when the popover is open.
+
+#### Result
+
+The code renders as follows:
+
+{{ EmbedLiveSample("Animating a popover", "100%", "200") }}
+
+> **Note:** Because popovers change from `display: none` to `display: block` each time they are shown, the popover transitions from its `@starting-style` styles to its `[popover]:popover-open` styles every time the entry transition occurs. When the popover closes, it transitions from its `[popover]:popover-open` state to the default `[popover]` state.
+
+> **Note:** You can find an example that demonstrates transitioning a {{htmlelement("dialog")}} element and its backdrop as it is shown and hidden on the `
` reference page — see [Transitioning dialog elements](/en-US/docs/Web/HTML/Element/dialog#transitioning_dialog_elements).
+
+### Transitioning elements on DOM addition and removal
+
+This example contains a button which, when pressed, appends new elements to a {{htmlelement("section")}} container. Each element, in turn, contains a nested button, which when pressed, removes the element. This example demonstrates how to use transitions to animate elements when they are added to or removed from the DOM.
+
+#### HTML
+
+```html
+Create new column
+
+```
+
+#### JavaScript
+
+JavaScript enables the addition and removal of elements:
+
+```js
+const btn = document.querySelector("button");
+const sectionElem = document.querySelector("section");
+
+btn.addEventListener("click", createColumn);
+
+function randomColor() {
+ function randomNum() {
+ return Math.floor(Math.random() * 255);
+ }
+
+ return `rgb(${randomNum()} ${randomNum()} ${randomNum()})`;
+}
+
+function createColumn() {
+ const divElem = document.createElement("div");
+ divElem.style.backgroundColor = randomColor();
+
+ const closeBtn = document.createElement("button");
+ closeBtn.textContent = "✖";
+ closeBtn.setAttribute("aria-label", "close");
+ divElem.append(closeBtn);
+ sectionElem.append(divElem);
+
+ closeBtn.addEventListener("click", () => {
+ divElem.classList.add("fade-out");
+
+ setTimeout(() => {
+ divElem.remove();
+ }, 1000);
+ });
+}
+```
+
+When the "Create new column" button is clicked, the `createColumn()` function is called. This creates a {{htmlelement("div")}} element with a randomly generated background color and a {{htmlelement("button")}} element to close the ``. It then appends the `
` to the `` and the `
` to the `
` container.
+
+We then add an event listener to the close button via {{domxref("EventTarget.addEventListener", "addEventListener")}}. Clicking the close button does two things:
+
+- Adds the `fade-out` class to the ``. Adding the class triggers the exit animation set on that class.
+- Removes the `
` after a 1000ms delay. The {{domxref("setTimeout()")}} delays removal of the `
` from the DOM (via {{domxref("Element.remove()")}}) until after the animation ends.
+
+#### CSS
+
+We include a {{cssxref("transition")}} that animates the {{cssxref("opacity")}} and {{cssxref("scale")}} of each column as they are added and removed:
+
+```css hidden
+html * {
+ box-sizing: border-box;
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ gap: 10px;
+}
+
+body > button {
+ margin: 10px 10px 0 10px;
+}
+
+section {
+ display: flex;
+ flex: 1;
+ gap: 10px;
+ margin: 10px;
+}
+```
+
+```css
+div {
+ flex: 1;
+ border: 1px solid gray;
+ position: relative;
+ background: linear-gradient(
+ to right,
+ rgb(255 255 255 / 0%),
+ rgb(255 255 255 / 50%)
+ );
+ opacity: 1;
+ scale: 1 1;
+
+ transition:
+ opacity 0.7s,
+ scale 0.7s,
+ display 0.7s allow-discrete;
+ all 0.7s allow-discrete
+ /* Equivalent to
+ transition: all 0.7s allow-discrete; */
+}
+
+/* Include after the `div` rule */
+@starting-style {
+ div {
+ opacity: 0;
+ scale: 1 0;
+ }
+}
+
+.fade-out {
+ opacity: 0;
+ display: none;
+ scale: 1 0;
+}
+
+div > button {
+ font-size: 1.6rem;
+ background: none;
+ border: 0;
+ text-shadow: 2px 1px 1px white;
+ border-radius: 15px;
+ position: absolute;
+ top: 1px;
+ right: 1px;
+ cursor: pointer;
+}
+```
+
+To animate the [`opacity`](/en-US/docs/Web/CSS/opacity) and [`scale`](/en-US/docs/Web/CSS/scale) of each `
` as it is added to the DOM and then reverse the animation as it is removed from the DOM, we:
+
+- Specify the ending state of the properties we want to transition on the `div { ... }` rule.
+- Specify the starting state from which to transition the properties inside a `@starting-style` block.
+- Specify the exit animation inside the `.fade-out` rule — this is the class that the JavaScript assigns to the `
` elements when their close buttons are pressed. Besides setting the `opacity` and `scale` ending states, we also set [`display: none`](/en-US/docs/Web/CSS/display) on the `
`s — we want them to become immediately unavailable when removed from the UI.
+- Specify the [`transition`](/en-US/docs/Web/CSS/transition) list inside the `div { ... }` rule to animate `opacity`, `scale`, and `display`. Note that for `display`, the [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) value is also set in the shorthand so that it will animate.
+
+#### Result
+
+The final result looks like this:
+
+{{ EmbedLiveSample("Transitioning elements on DOM addition and removal", "100%", "400") }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module
+- [`overlay`](/en-US/docs/Web/CSS/overlay)
+- [`transition-behavior`](/en-US/docs/Web/CSS/transition-behavior)
+- {{domxref("CSSStartingStyleRule")}}
+- [Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/) on developer.chrome.com (2023)
diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md
index d9a2c77893c6ec7..77bc42b071bb069 100644
--- a/files/en-us/web/css/@supports/index.md
+++ b/files/en-us/web/css/@supports/index.md
@@ -74,21 +74,26 @@ The following example returns true and applies the CSS style if the browser supp
}
```
-The table below describes the available font technologies that can be queried using this function:
-
-| Technology | Supports |
-| :------------------ | :-------------------------------------------------------------------------------------------- |
-| `color-colrv0` | Multi-colored glyphs via COLR version 0 table |
-| `color-colrv1` | Multi-colored glyphs via COLR version 1 table |
-| `color-svg` | SVG multi-colored tables |
-| `color-sbix` | Standard bitmap graphics tables |
-| `color-cbdt` | Color bitmap data tables |
-| `features-opentype` | OpenType `GSUB` and `GPOS` tables |
-| `features-aat` | TrueType `morx` and `kerx` tables |
-| `features-graphite` | Graphite features, namely `Silf`, `Glat` , `Gloc` , `Feat`, and `Sill` tables |
-| `incremental` | Incremental font loading |
-| `variations` | Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc. |
-| `palettes` | Font palettes by means of `font-palette` to select one of many color palettes in the font |
+The table below describes the font technologies (`
`), including color font technologies (``), font feature technologies (``), and other available font technologies that can be queried using the `font-tech()` function:
+
+| Technology | Supports |
+| :----------------------------- | :-------------------------------------------------------------------------------------------- |
+| **``** |
+| `color-colrv0` | Multi-colored glyphs via COLR version 0 table |
+| `color-colrv1` | Multi-colored glyphs via COLR version 1 table |
+| `color-svg` | SVG multi-colored tables |
+| `color-sbix` | Standard bitmap graphics tables |
+| `color-cbdt` | Color bitmap data tables |
+| **``** |
+| `features-opentype` | OpenType `GSUB` and `GPOS` tables |
+| `features-aat` | TrueType `morx` and `kerx` tables |
+| `features-graphite` | Graphite features, namely `Silf`, `Glat` , `Gloc` , `Feat`, and `Sill` tables |
+| **Other `` values** |
+| `incremental-patch` | Incremental font loading using the patch subset method |
+| `incremental-range` | Incremental font loading using the range request method |
+| `incremental-auto` | Incremental font loading using method negotiation |
+| `variations` | Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc. |
+| `palettes` | Font palettes by means of `font-palette` to select one of many color palettes in the font |
#### `font-format()`
@@ -100,7 +105,7 @@ The following example returns true and applies the CSS style if the browser supp
}
```
-The following table describes the available formats that can be queried with this function:
+The following table describes the available formats (`` values) that can be queried with this function:
| Format | Description | File extensions |
| :------------------ | :------------------------------ | :-------------- |
@@ -254,7 +259,8 @@ If a browser doesn't support the font technology, a fallback font (`Bungee-fallb
```css
@font-face {
font-family: "Bungee Spice";
- src: url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
+ src:
+ url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
url("Bungee-fallback.otf") format("opentype");
}
```
@@ -280,5 +286,5 @@ The following example applies the CSS style if the browser supports the `woff2`
## See also
-- [Using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)
-- The CSSOM class {{DOMxRef("CSSSupportsRule")}}, and the {{DOMxRef("CSS.supports()")}} method that allows the same check to be performed via JavaScript.
+- [Using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
+- The CSSOM class {{DOMxRef("CSSSupportsRule")}}, and the {{DOMxref("CSS.supports_static", "CSS.supports()")}} method that allows the same check to be performed via JavaScript.
diff --git a/files/en-us/web/css/_colon_-moz-drag-over/index.md b/files/en-us/web/css/_colon_-moz-drag-over/index.md
index c0113206c2d8e9f..2b57337526af5a6 100644
--- a/files/en-us/web/css/_colon_-moz-drag-over/index.md
+++ b/files/en-us/web/css/_colon_-moz-drag-over/index.md
@@ -47,10 +47,6 @@ td:-moz-drag-over {
Not part of any standard.
-## Browser compatibility
-
-{{Compat}}
-
## See also
- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)
diff --git a/files/en-us/web/css/_colon_-moz-focusring/index.md b/files/en-us/web/css/_colon_-moz-focusring/index.md
deleted file mode 100644
index 674ef81fc148f37..000000000000000
--- a/files/en-us/web/css/_colon_-moz-focusring/index.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: ":-moz-focusring"
-slug: Web/CSS/:-moz-focusring
-page-type: css-pseudo-class
-status:
- - non-standard
-browser-compat: css.selectors.-moz-focusring
----
-
-{{Non-standard_header}}{{CSSRef}}
-
-The **`:-moz-focusring`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that is similar to the {{cssxref(":focus")}} pseudo-class, but it only matches an element if it's currently focused _and_ a focus ring or other indicator should be drawn around it.
-
-> **Note:** This selector has been renamed to {{cssxref(":focus-visible")}} for the CSS Selectors 4 specification.
-
-If `:-moz-focusring` matches, then `:focus` also matches, but the converse is not always true: it depends on whether the [user agent](/en-US/docs/Glossary/User_agent) has focus ring drawing enabled and how the element was focused. Whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform.
-
-The working group previously [intended to add this feature to CSS Selectors 4 or 5](https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html) as `:focus-ring`, and has since [decided to rename it](https://lists.w3.org/Archives/Public/www-style/2017Dec/0018.html) to {{cssxref(":focus-visible")}} and added it to CSS Selectors 4.
-
-> **Note:** Developers tend to use `:-moz-focusring` to differentiate between the `focus` state when the user focuses an element via a **mouse click** versus **keyboard tabbing**. It is also potentially useful if you are creating a [custom element](/en-US/docs/Web/Web_Components/Using_custom_elements) and you want to change its style based on its behavior.
-
-## Syntax
-
-```css
-:-moz-focusring {
- /* ... */
-}
-```
-
-## Example
-
-### HTML
-
-```html
-
- Item 1
- Item 2
- Item 3
-
-```
-
-#### CSS
-
-```css
-::-moz-list-bullet {
- color: red;
- font-size: 1.5em;
-}
-```
-
-#### Result
-
-{{ EmbedLiveSample('Styling list item markers') }}
-
-## Specifications
-
-Not part of any standard.
-
-## See also
-
-- {{cssxref(":-moz-list-number")}}
-- {{cssxref("::marker")}}
diff --git a/files/en-us/web/css/_colon_-moz-list-number/index.md b/files/en-us/web/css/_colon_-moz-list-number/index.md
deleted file mode 100644
index 596682cd5a9d56e..000000000000000
--- a/files/en-us/web/css/_colon_-moz-list-number/index.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: "::-moz-list-number"
-slug: Web/CSS/:-moz-list-number
-page-type: css-pseudo-class
-status:
- - non-standard
----
-
-{{CSSRef}}{{Non-standard_header}}
-
-The **`::-moz-list-number`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents the marker (typically a number) of a list item ({{HTMLElement("li")}}) in an ordered list ({{HTMLElement("ol")}}).
-
-## Syntax
-
-```css
-li::-moz-list-number {
- /* ... */
-}
-```
-
-## Examples
-
-### HTML
-
-```html
-
- First item
- Second item
- Third item
-
-```
-
-### CSS
-
-```css
-li::-moz-list-number {
- font-style: italic;
- font-weight: bold;
-}
-```
-
-### Result
-
-{{ EmbedLiveSample("Examples", "auto", "auto", "moz-list-number.png") }}
-
-## Specifications
-
-Not part of any standard.
-
-## See also
-
-- {{cssxref(":-moz-list-bullet")}}
-- {{cssxref("::marker")}}
diff --git a/files/en-us/web/css/_colon_-moz-window-inactive/index.md b/files/en-us/web/css/_colon_-moz-window-inactive/index.md
index 074cec33b76a5ae..f4c7b71cbd76521 100644
--- a/files/en-us/web/css/_colon_-moz-window-inactive/index.md
+++ b/files/en-us/web/css/_colon_-moz-window-inactive/index.md
@@ -70,4 +70,4 @@ Not part of any standard.
- [`:active`](/en-US/docs/Web/CSS/:active)
-- The {{domxref("Document.activeElement")}} property for regular DOM, and the {{domxref("ShadowRoot.activeElement")}} property for [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) roots.
+- The {{domxref("Document.activeElement")}} property for regular DOM, and the {{domxref("ShadowRoot.activeElement")}} property for [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) roots.
diff --git a/files/en-us/web/css/_colon_autofill/index.md b/files/en-us/web/css/_colon_autofill/index.md
index df81cf1112d6005..d71b4a50f00fae5 100644
--- a/files/en-us/web/css/_colon_autofill/index.md
+++ b/files/en-us/web/css/_colon_autofill/index.md
@@ -14,7 +14,7 @@ The **`:autofill`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) match
> **Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:
>
> ```css
-> background-color: rgb(232, 240, 254) !important;
+> background-color: rgb(232 240 254) !important;
> background-image: none !important;
> color: -internal-light-dark(black, white) !important;
> ```
diff --git a/files/en-us/web/css/_colon_buffering/index.md b/files/en-us/web/css/_colon_buffering/index.md
new file mode 100644
index 000000000000000..426a7ddbb6b3587
--- /dev/null
+++ b/files/en-us/web/css/_colon_buffering/index.md
@@ -0,0 +1,56 @@
+---
+title: ":buffering"
+slug: Web/CSS/:buffering
+page-type: css-pseudo-class
+browser-compat: css.selectors.buffering
+---
+
+{{CSSRef}}
+
+The **`:buffering`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when the playable element is buffering a media resource.
+
+An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback.
+For more information, see the [Media buffering, seeking, and time ranges](/en-US/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges#seekable) guide.
+
+> **Note:** An element is still considered to be {{cssxref(":playing")}} when it is "buffering".
+> If `:buffering` matches an element, `:playing` will also match that element.
+
+## Syntax
+
+```css
+:buffering {
+ /* ... */
+}
+```
+
+## Examples
+
+### CSS
+
+```css
+:buffering {
+ outline: 5px solid red;
+}
+
+video:buffering {
+ outline: 5px solid blue;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref(":muted")}}
+- {{cssxref(":paused")}}
+- {{cssxref(":playing")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":stalled")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
diff --git a/files/en-us/web/css/_colon_current/index.md b/files/en-us/web/css/_colon_current/index.md
index cba889fc3f15e56..75abfb445ed6ee5 100644
--- a/files/en-us/web/css/_colon_current/index.md
+++ b/files/en-us/web/css/_colon_current/index.md
@@ -3,6 +3,7 @@ title: ":current"
slug: Web/CSS/:current
page-type: css-pseudo-class
browser-compat: css.selectors.current
+spec-urls: https://drafts.csswg.org/selectors/#the-current-pseudo
---
{{CSSRef}}
@@ -17,7 +18,15 @@ The **`:current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS
## Syntax
-{{csssyntax}}
+```css-nolint
+:current {
+ /* ... */
+}
+
+:current() {
+ /* ... */
+}
+```
## Examples
@@ -46,7 +55,7 @@ The **`:current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS
### WebVTT
-```
+```plain
WEBVTT FILE
1
@@ -68,7 +77,7 @@ This is the third caption
## Browser compatibility
-{{Compat}}
+There is no browser implementing this feature.
## See also
diff --git a/files/en-us/web/css/_colon_defined/index.md b/files/en-us/web/css/_colon_defined/index.md
index b2417d8a447704c..3cc04966a8058d0 100644
--- a/files/en-us/web/css/_colon_defined/index.md
+++ b/files/en-us/web/css/_colon_defined/index.md
@@ -49,7 +49,7 @@ customElements.define(
let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
}
- }
+ },
);
```
@@ -103,4 +103,4 @@ This is useful if you have a complex custom element that takes a while to load i
## See also
-- [Web components](/en-US/docs/Web/Web_Components)
+- [Web components](/en-US/docs/Web/API/Web_components)
diff --git a/files/en-us/web/css/_colon_disabled/index.md b/files/en-us/web/css/_colon_disabled/index.md
index aa63fe54b174c95..e01c86bbb6c9068 100644
--- a/files/en-us/web/css/_colon_disabled/index.md
+++ b/files/en-us/web/css/_colon_disabled/index.md
@@ -64,7 +64,7 @@ document.addEventListener(
// Attach `change` event listener to checkbox
document.getElementById("billing-checkbox").onchange = toggleBilling;
},
- false
+ false,
);
function toggleBilling() {
diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md
index 8175e5ccdc53db1..980b383fc474694 100644
--- a/files/en-us/web/css/_colon_focus-visible/index.md
+++ b/files/en-us/web/css/_colon_focus-visible/index.md
@@ -21,19 +21,35 @@ This selector is useful to provide a different focus indicator based on the user
}
```
+## :focus vs :focus-visible
+
+Originally, user-agent CSS set focus styles based only on the `:focus` pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can negatively impact usability, while removing focus styles makes keyboard navigation inaccessible for sighted users.
+
+Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention.
+
+The `:focus` pseudo-class always matches the currently-focused element. The `:focus-visible` pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is. Because the `:focus-visible` pseudo-class matches the focused element when needed, using the `:focus-visible` (instead of the `:focus` pseudo-class) allows authors to change the appearance of the focus indicator without changing when the focus indicator appears.
+
+When the [`:focus`](/en-US/docs/Web/CSS/:focus) pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The `:focus-visible` pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization.
+
## Examples
-### Basic example
+### Comparing :focus and :focus-visible
+
+This example presents three pairs of controls. Each pair consists of a [`text`](/en-US/docs/Web/HTML/Element/input/text) input and a button.
-In this example, the `:focus-visible` selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with `:focus`.
+- The first pair does not add any custom styles for focus states, and shows the default case.
+- The second pair adds styles using the `:focus` pseudo-class.
+- The third pair add styles using the `:focus-visible` pseudo-class.
```html
-Default styles :focus only :focus-visible only
+
+:focus :focus-visible
```
```css
@@ -51,7 +67,13 @@ button {
}
```
-{{EmbedLiveSample("Basic_example", "100%", 300)}}
+If you click each element in turn, you will see that when `:focus` is used to style the focus ring, the UA draws the focus ring when the user clicks the button. However, when `:focus-visible` is used to style the focus ring, the UA does not draw the focus ring when the user clicks the button, just like in the default case.
+
+If you then tab through each element, you will see that in all three cases — default, `:focus`, and `:focus-visible` — the UA draws the focus ring around the button when the user navigates to it with the keyboard.
+
+This shows how `:focus-visible` enables a designer to follow the browser's logic in determining when a focus ring should be shown.
+
+{{EmbedLiveSample("Comparing :focus and :focus-visible", "100%", 300)}}
### Providing a :focus fallback
diff --git a/files/en-us/web/css/_colon_focus-within/index.md b/files/en-us/web/css/_colon_focus-within/index.md
index b19757551300f89..183250821c691de 100644
--- a/files/en-us/web/css/_colon_focus-within/index.md
+++ b/files/en-us/web/css/_colon_focus-within/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.focus-within
{{CSSRef}}
-The **`:focus-within`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the {{CSSxRef(":focus")}} pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in [shadow trees](/en-US/docs/Web/Web_Components/Using_shadow_DOM).)
+The **`:focus-within`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the {{CSSxRef(":focus")}} pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in [shadow trees](/en-US/docs/Web/API/Web_components/Using_shadow_DOM).)
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus-within.html", "tabbed-shorter")}}
diff --git a/files/en-us/web/css/_colon_fullscreen/index.md b/files/en-us/web/css/_colon_fullscreen/index.md
index 6dac9fcae8f9e72..4c2a58fe5335138 100644
--- a/files/en-us/web/css/_colon_fullscreen/index.md
+++ b/files/en-us/web/css/_colon_fullscreen/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.fullscreen
{{CSSRef}}
-The **`:fullscreen`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
+The **`:fullscreen`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
## Syntax
@@ -23,44 +23,58 @@ The `:fullscreen` pseudo-class lets you configure your stylesheets to automatica
## Examples
-In this example, the color of a button is changed depending on whether or not the document is in fullscreen mode. This is done without needing to specifically apply style changes using JavaScript.
+### Styling a Fullscreen Element
-### HTML
-
-The page's HTML looks like this:
+This example applies a different background color to a {{htmlelement("div")}} element, depending on whether or not it is in fullscreen mode. It includes a {{htmlelement("button")}} to toggle fullscreen on and off.
```html
-MDN Web Docs Demo: :fullscreen pseudo-class
-
-
- This demo uses the :fullscreen pseudo-class to automatically
- change the style of a button used to toggle fullscreen mode on and off,
- entirely using CSS.
-
+
+
MDN :fullscreen pseudo-class demo
-
Toggle Fullscreen
-```
+
+ This demo uses the :fullscreen pseudo-class to automatically
+ change the background color of the .element div.
+
-The {{HTMLElement("button")}} with the ID `"fs-toggle"` will change between pale red and pale green depending on whether or not the document is in fullscreen mode.
+
+ Normally, the background is light yellow. In fullscreen mode, the background
+ is light pink.
+
-### CSS
+
Toggle Fullscreen
+
` when it is in fullscreen mode.
```css
-#fs-toggle:not(:fullscreen) {
- background-color: #afa;
+.element {
+ background-color: lightyellow;
}
-```
-
-When the document _is_ in fullscreen mode, the following CSS applies instead, setting the background color to a pale shade of red.
-```css
-#fs-toggle:fullscreen {
- background-color: #faa;
+.element:fullscreen {
+ background-color: lightpink;
}
```
+The following JavaScript provides an event handler function that toggles fullscreen when the `
` is clicked.
+
+```js
+document.querySelector(".toggle").addEventListener("click", function (event) {
+ if (document.fullscreenElement) {
+ // If there is a fullscreen element, exit full screen.
+ document.exitFullscreen();
+ return;
+ }
+ // Make the .element div fullscreen.
+ document.querySelector(".element").requestFullscreen();
+});
+```
+
+#### Demo
+
+[See the example live](https://jsfiddle.net/yookoala/oLc1uws0/).
+
## Specifications
{{Specifications}}
@@ -73,7 +87,6 @@ When the document _is_ in fullscreen mode, the following CSS applies instead, se
- [Fullscreen API](/en-US/docs/Web/API/Fullscreen_API)
- [Guide to the Fullscreen API](/en-US/docs/Web/API/Fullscreen_API/Guide)
-- {{cssxref(":not")}}
- {{cssxref("::backdrop")}}
- DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}
- [`allowfullscreen`](/en-US/docs/Web/HTML/Element/iframe#allowfullscreen) attribute
diff --git a/files/en-us/web/css/_colon_future/index.md b/files/en-us/web/css/_colon_future/index.md
index 5724ca394167f19..c6f346527b6283c 100644
--- a/files/en-us/web/css/_colon_future/index.md
+++ b/files/en-us/web/css/_colon_future/index.md
@@ -2,12 +2,10 @@
title: ":future"
slug: Web/CSS/:future
page-type: css-pseudo-class
-status:
- - experimental
browser-compat: css.selectors.future
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:future`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches {{cssxref(":current")}}. For example in a video with captions which are being displayed by [WebVTT](/en-US/docs/Web/API/WebVTT_API).
@@ -52,7 +50,7 @@ The **`:future`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/
### WebVTT
-```
+```plain
WEBVTT FILE
1
diff --git a/files/en-us/web/css/_colon_has/index.md b/files/en-us/web/css/_colon_has/index.md
index f8e3511d8d9f4a8..f93798977eab498 100644
--- a/files/en-us/web/css/_colon_has/index.md
+++ b/files/en-us/web/css/_colon_has/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.has
{{CSSRef}}
-The functional **`:has()`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element if any of the [relative selectors](/en-US/docs/Web/CSS/CSS_Selectors#relative_selector) that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a [relative selector list](/en-US/docs/Web/CSS/Selector_list#relative_selector_list) as an argument.
+The functional **`:has()`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element if any of the [relative selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector) that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a [relative selector list](/en-US/docs/Web/CSS/Selector_list#relative_selector_list) as an argument.
```css
/* Selects an h1 heading with a
@@ -83,7 +83,7 @@ h2 {
h2 {
font-size: 1em;
- color: rgb(150, 149, 149);
+ color: rgb(150 149 149);
}
```
@@ -102,7 +102,7 @@ h1:has(+ h2) {
{{EmbedLiveSample('With_the_sibling_combinator', 600, 150)}}
-This example shows two similar texts side-by-side for comparison – the left one with an `H1` heading followed by a paragraph and the right one with an `H1` heading followed by an `H2` heading and then a paragraph. In the example on the right, `:has()` helps to select the `H1` element that is immediately followed by an `H2` element (indicated by the adjacent sibling combinator[`+`](/en-US/docs/Web/CSS/Adjacent_sibling_combinator)) and the CSS rule reduces the spacing after such an `H1` element. Without the `:has()` pseudo-class, you cannot use CSS selectors to select a preceding sibling of a different type or a parent element.
+This example shows two similar texts side-by-side for comparison – the left one with an `H1` heading followed by a paragraph and the right one with an `H1` heading followed by an `H2` heading and then a paragraph. In the example on the right, `:has()` helps to select the `H1` element that is immediately followed by an `H2` element (indicated by the next-sibling combinator[`+`](/en-US/docs/Web/CSS/Next-sibling_combinator)) and the CSS rule reduces the spacing after such an `H1` element. Without the `:has()` pseudo-class, you cannot use CSS selectors to select a preceding sibling of a different type or a parent element.
### With the :is() pseudo-class
@@ -152,7 +152,7 @@ h1 {
h2 {
font-size: 1em;
- color: rgb(150, 149, 149);
+ color: rgb(150 149 149);
}
h3 {
@@ -177,7 +177,7 @@ h3 {
{{EmbedLiveSample('With_the_:is()_pseudo-class', 600, 170)}}
-Here, the first [`:is()`](/en-US/docs/Web/CSS/:is) pseudo-class is used to select any of the heading elements in the list. The second `:is()` pseudo-class is used to pass a list of adjacent sibling selectors as an argument to `:has()`. The `:has()` pseudo-class helps to select any `H1`, `H2`, or `H3` element that is immediately followed by (indicated by [`+`](/en-US/docs/Web/CSS/Adjacent_sibling_combinator)) an `H2`, `H3`, or `H4` element and the CSS rule reduces the spacing after such `H1`, `H2`, or `H3` elements.
+Here, the first [`:is()`](/en-US/docs/Web/CSS/:is) pseudo-class is used to select any of the heading elements in the list. The second `:is()` pseudo-class is used to pass a list of next-sibling selectors as an argument to `:has()`. The `:has()` pseudo-class helps to select any `H1`, `H2`, or `H3` element that is immediately followed by (indicated by [`+`](/en-US/docs/Web/CSS/Next-sibling_combinator)) an `H2`, `H3`, or `H4` element and the CSS rule reduces the spacing after such `H1`, `H2`, or `H3` elements.
This selector could have also been written as:
@@ -204,6 +204,20 @@ body:has(video):has(audio) {
}
```
+## Analogy between :has() and regular expressions
+
+Interestingly, we can relate some CSS `:has()` constructs with the [lookahead assertion](/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion) in regular expressions because they both allow you to select elements (or strings in regular expressions) based on a condition without actually selecting the condition matching the element (or string) itself.
+
+### Positive lookahead (?=pattern)
+
+In the regular expression `abc(?=xyz)`, the string `abc` is matched only if it is immediately followed by the string `xyz`. As it is a lookahead operation, the `xyz` is not included in the match.
+
+The analogous construct in CSS would be `.abc:has(+ .xyz)`: it selects the element `.abc` only if there is a next sibling `.xyz`. The part `:has(+ .xyz)` acts as a lookahead operation because the element `.abc` is selected and not the element `.xyz`.
+
+### Negative lookahead (?!pattern)
+
+Similarly, for the negative lookahead case, in the regular expression `abc(?!xyz)`, the string `abc` is matched only if it is _not_ followed by `xyz`. The analogous CSS construct `.abc:has(+ :not(.xyz))` doesn't select the element `.abc` if the next element is `.xyz`.
+
## Specifications
{{Specifications}}
@@ -215,7 +229,8 @@ body:has(video):has(audio) {
## See also
- [`:is()`](/en-US/docs/Web/CSS/:is), [`:where()`](/en-US/docs/Web/CSS/:where), [`:not()`](/en-US/docs/Web/CSS/:not)
-- [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors)
-- [CSS combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+- [CSS selectors and combinators](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators)
+- [CSS selector structure](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure)
- [Selector list](/en-US/docs/Web/CSS/Selector_list)
+- [CSS selector module](/en-US/docs/Web/CSS/CSS_selectors)
- [Locating DOM elements using selectors](/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
index 554121d0f813d40..33aa3c355c665c5 100644
--- a/files/en-us/web/css/_colon_host-context/index.md
+++ b/files/en-us/web/css/_colon_host-context/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.host-context
{{CSSRef}}
-The **`:host-context()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
+The **`:host-context()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.
@@ -15,6 +15,8 @@ One typical use of this is with a descendant selector expression — for example
> **Note:** This has no effect when used outside a shadow DOM.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host-context.html", "tabbed-shorter")}}
+
```css
/* Selects a shadow root host, only if it is
a descendant of the selector argument given */
@@ -22,10 +24,6 @@ One typical use of this is with a descendant selector expression — for example
font-weight: bold;
}
-:host-context(main article) {
- font-weight: bold;
-}
-
/* Changes paragraph text color from black to white when
a .dark-theme class is applied to the document body */
p {
@@ -74,9 +72,8 @@ style.textContent =
"span:hover { text-decoration: underline; }" +
":host-context(h1) { font-style: italic; }" +
':host-context(h1):after { content: " - no links in headers!" }' +
- ":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
- ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+ ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```
The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: " - no links in headers!" }` rules style the instance of the `` element (the shadow host in this instance) inside the ``. We've used it to make it clear that the custom element shouldn't appear inside the `` in our design.
@@ -91,6 +88,9 @@ The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { c
## See also
-- [Web components](/en-US/docs/Web/Web_Components)
-- {{cssxref(":host")}}
-- {{cssxref(":host_function", ":host()")}}
+- [Web components](/en-US/docs/Web/API/Web_components)
+- CSS {{cssxref(":host")}} pseudo-class
+- CSS {{cssxref(":host_function", ":host()")}} pseudo-class
+- CSS {{CSSXref("::slotted")}} pseudo-element
+- HTML {{HTMLElement("template")}} element
+- [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
diff --git a/files/en-us/web/css/_colon_host/index.md b/files/en-us/web/css/_colon_host/index.md
index 0dcbc76cf20a900..632c18916f89b78 100644
--- a/files/en-us/web/css/_colon_host/index.md
+++ b/files/en-us/web/css/_colon_host/index.md
@@ -7,10 +7,12 @@ browser-compat: css.selectors.host
{{CSSRef}}
-The **`:host`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.
+The **`:host`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the shadow host of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.
> **Note:** This has no effect when used outside a shadow DOM.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host.html", "tabbed-shorter")}}
+
```css
/* Selects a shadow root host */
:host {
@@ -57,10 +59,10 @@ style.textContent =
':host-context(h1):after { content: " - no links in headers!" }' +
":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
- ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+ ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```
-The `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all instances of the `` element (the shadow host in this instance) in the document.
+The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all instances of the `` element (the shadow host in this instance) in the document.
## Specifications
@@ -72,6 +74,8 @@ The `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all i
## See also
-- [Web components](/en-US/docs/Web/Web_Components)
+- [Web components](/en-US/docs/Web/API/Web_components)
- {{cssxref(":host_function", ":host()")}}
- {{cssxref(":host-context", ":host-context()")}}
+- {{CSSXref("::slotted")}}
+- [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
diff --git a/files/en-us/web/css/_colon_host_function/index.md b/files/en-us/web/css/_colon_host_function/index.md
index 35b57428269418a..71630459bda0620 100644
--- a/files/en-us/web/css/_colon_host_function/index.md
+++ b/files/en-us/web/css/_colon_host_function/index.md
@@ -7,12 +7,14 @@ browser-compat: css.selectors.hostfunction
{{CSSRef}}
-The **`:host()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
+The **`:host()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of {{CSSxRef(":host-context", ":host-context()")}}.
> **Note:** This has no effect when used outside a shadow DOM.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_function.html", "tabbed-shorter")}}
+
```css
/* Selects a shadow root host, only if it is
matched by the selector argument */
@@ -60,7 +62,7 @@ style.textContent =
':host-context(h1):after { content: " - no links in headers!" }' +
":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
- ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+ ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```
The `:host(.footer) { color : red; }` rule styles all instances of the `` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the {{htmlelement("footer")}} a special color.
@@ -75,6 +77,6 @@ The `:host(.footer) { color : red; }` rule styles all instances of the ` whose state is indeterminate */
@@ -131,6 +131,6 @@ progress:indeterminate {
- [Web forms — Working with user data](/en-US/docs/Learn/Forms)
- [Styling web forms](/en-US/docs/Learn/Forms/Styling_web_forms)
-- The [`) {
+:lang( [, ]*)
/* ... */
}
```
-### Parameter
+### Parameters
- ``
- - : A {{cssxref("<string>")}} representing the language you want to target. Acceptable values are specified in the [HTML](/en-US/docs/Web/HTML) spec.
+ - : A comma separated list of one or more {{cssxref("<string>")}}s that target an element with a language value according to [BCP 47](https://tools.ietf.org/html/bcp47) language codes.
+ Matching by language range is case-insensitive.
+
+## Description
+
+When selecting languages, there is implicit wildcard matching, so `:lang(de-DE)` will match `de-DE`, `de-DE-1996`, `de-Latn-DE`, `de-Latf-DE`, and `de-Latn-DE-1996`.
+Explicitly using wildcards must include a full match of a language subtag, so `:lang("*-F*")` is invalid but `:lang("*-Fr")` is valid.
## Examples
+### Matching children of a given language
+
In this example, the `:lang()` pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using [child combinators](/en-US/docs/Web/CSS/Child_combinator). Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.
-### HTML
+#### HTML
```html
@@ -46,23 +54,68 @@ In this example, the `:lang()` pseudo-class is used to match the parents of quot
```
-### CSS
+#### CSS
```css
:lang(en) > q {
- quotes: "\201C""\201D""\2018""\2019";
+ quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
quotes: "« " " »";
}
:lang(de) > q {
- quotes: "»" "«" "\2039""\203A";
+ quotes: "»" "«" "\2039" "\203A";
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Matching_children_of_a_given_language', '', '80')}}
+
+### Matching multiple languages
+
+The following example shows how to match multiple languages by providing a comma-separated list of language codes.
+It's also possible to use a wildcard to match languages in a given language range.
+
+```css hidden
+p {
+ margin: 0;
}
```
-### Result
+#### CSS
+
+```css
+/* Matches nl and de */
+:lang("nl", "de") {
+ color: green;
+}
+
+/* Omitting quotes & case-insensitive matching */
+:lang(EN, FR) {
+ color: blue;
+}
+
+/* Wildcard matching a language range */
+:lang("*-Latn") {
+ color: red;
+}
+```
+
+#### HTML
+
+```html
+Dit is een Nederlandse paragraaf.
+Dies ist ein deutscher Satz.
+This is an English sentence.
+Matching the language range of English.
+Ceci est un paragraphe français.
+Ceci est un paragraphe français en latin.
+```
+
+#### Result
-{{EmbedLiveSample('Examples', 350)}}
+{{EmbedLiveSample('Matching_multiple_languages', '', '120')}}
## Specifications
@@ -74,7 +127,7 @@ In this example, the `:lang()` pseudo-class is used to match the parents of quot
## See also
-- Language-related pseudo-classes: {{cssxref(":lang")}}, {{cssxref(":dir")}}
+- The {{cssxref(":dir")}} pseudo-class that matches by directionality of text
- HTML [`lang`](/en-US/docs/Web/HTML/Global_attributes#lang) attribute
- HTML [`translate`](/en-US/docs/Web/HTML/Global_attributes#translate) attribute
- {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}
diff --git a/files/en-us/web/css/_colon_modal/index.md b/files/en-us/web/css/_colon_modal/index.md
index ebbb80bc0fcbfe3..68b58a298f3a170 100644
--- a/files/en-us/web/css/_colon_modal/index.md
+++ b/files/en-us/web/css/_colon_modal/index.md
@@ -9,6 +9,8 @@ browser-compat: css.selectors.modal
The **`:modal`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the `:modal` pseudo-class at the same time, but only one of them will be active and able to receive input.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-modal.html", "tabbed-shorter")}}
+
## Syntax
```css
@@ -63,7 +65,7 @@ This example styles a modal dialog that opens when the "Update details" button i
:modal {
border: 5px solid red;
background-color: yellow;
- box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
+ box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}
```
diff --git a/files/en-us/web/css/_colon_muted/index.md b/files/en-us/web/css/_colon_muted/index.md
new file mode 100644
index 000000000000000..f124212a34101f9
--- /dev/null
+++ b/files/en-us/web/css/_colon_muted/index.md
@@ -0,0 +1,55 @@
+---
+title: ":muted"
+slug: Web/CSS/:muted
+page-type: css-pseudo-class
+browser-compat: css.selectors.muted
+---
+
+{{CSSRef}}
+
+The **`:muted`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is capable of making sound, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, but is muted (forced silent).
+
+Muted is different from {{cssxref(":volume-locked")}} in that the page author has control over whether a media element can be muted or un-muted.
+User agents may set media `muted` value according to use preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
+An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript because of an operating system or user agent preference.
+
+## Syntax
+
+```css
+:muted {
+ /* ... */
+}
+```
+
+## Examples
+
+### CSS
+
+```css
+:muted {
+ outline: 5px solid red;
+}
+
+video:muted {
+ outline: 5px solid blue;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref(":buffering")}}
+- {{cssxref(":paused")}}
+- {{cssxref(":playing")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":stalled")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
+- [`muted`](/en-US/docs/Web/API/HTMLMediaElement/muted) property of {{domxref("HTMLMediaElement")}} objects
diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md
index bea86405b2b0eda..327cc334cbc16d1 100644
--- a/files/en-us/web/css/_colon_not/index.md
+++ b/files/en-us/web/css/_colon_not/index.md
@@ -33,11 +33,13 @@ There are several unusual effects and outcomes when using `:not()` that you shou
- `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement("html")}} and {{HTMLElement("body")}}._
- This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("td")}}, {{HTMLElement("caption")}}, etc. can all match the `:not(table)` part of the selector.
- You can negate several selectors at the same time. Example: `:not(.foo, .bar)` is equivalent to `:not(.foo):not(.bar)`.
-- If any selector passed to the `:not()` pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use [`:is()`](/en-US/docs/Web/CSS/:is) pseudo-class, which accepts a forgiving selector list. For example `:not(.foo, :invalid-pseudo-class)` will invalidate a whole rule, but `:not(is(.foo, :invalid-pseudo-class))` will match any (_including {{HTMLElement("html")}} and {{HTMLElement("body")}}_) element that isn't `.foo`.
+- If any selector passed to the `:not()` pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use [`:is()`](/en-US/docs/Web/CSS/:is) pseudo-class, which accepts a forgiving selector list. For example `:not(.foo, :invalid-pseudo-class)` will invalidate a whole rule, but `:not(:is(.foo, :invalid-pseudo-class))` will match any (_including {{HTMLElement("html")}} and {{HTMLElement("body")}}_) element that isn't `.foo`.
## Examples
-### Basic set of :not() examples
+### Using :not() with valid selectors
+
+This example shows some simple cases of using `:not()`.
#### HTML
@@ -68,8 +70,8 @@ body :not(p) {
text-decoration: underline;
}
-/* Elements that are not and not
elements */
-body :not(div):not(span) {
+/* Elements that are not s or `.fancy` */
+body :not(div):not(.fancy) {
font-weight: bold;
}
@@ -86,9 +88,9 @@ h2 :not(span.foo) {
#### Result
-{{EmbedLiveSample('Basic_set_of_not_examples', '100%', 320)}}
+{{EmbedLiveSample('Using_not_with_valid_selectors', '100%', 320)}}
-### :not() with invalid selectors
+### Using :not() with invalid selectors
This example shows the use of `:not()` with invalid selectors and how to prevent invalidation.
@@ -132,7 +134,7 @@ div:not(:is(.foo, .bar)) {
#### Result
-{{EmbedLiveSample('not_with_invalid_selectors', '100%', 320)}}
+{{EmbedLiveSample('Using_not_with_invalid_selectors', '100%', 320)}}
The `p:not(.foo, :invalid-pseudo-class)` rule is invalid because it contains an invalid selector. The `:is()` pseudo-class accepts a forgiving selector list, so the `:is(.foo, :invalid-pseudo-class)` rule is valid and equivalent to `:is(.foo)`. Thus, the `p:not(:is(.foo, :invalid-pseudo-class))` rule is valid and equivalent to `p:not(.foo)`.
@@ -155,3 +157,5 @@ If `:invalid-pseudo-class` was a valid selector, the first two rules above would
- {{cssxref(":has", ":has()")}}
- {{cssxref(":is", ":is()")}}
- {{cssxref(":where", ":where()")}}
+
+- [How :not() chains multiple selectors](/en-US/blog/css-not-pseudo-multiple-selectors/) on MDN blog (2023)
diff --git a/files/en-us/web/css/_colon_nth-child/index.md b/files/en-us/web/css/_colon_nth-child/index.md
index f7859a445f2cee0..f0ac88e7b10efba 100644
--- a/files/en-us/web/css/_colon_nth-child/index.md
+++ b/files/en-us/web/css/_colon_nth-child/index.md
@@ -7,11 +7,11 @@ browser-compat: css.selectors.nth-child
{{CSSRef}}
-The **`:nth-child()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on their position among a group of siblings.
+The **`:nth-child()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on the indexes of the elements in the child list of their parents. In other words, the `:nth-child()` selector selects child elements according to their position among all the sibling elements within a parent element.
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-child.html", "tabbed-shorter")}}
-Note that, in the `element:nth-child()` syntax, the child count includes children of any element type; but it is considered a match only if the element _at that child position_ is of the specified element type.
+> **Note:** In the `element:nth-child()` syntax, the child count includes sibling children of any element type; but it is considered a match only if the element _at that child position_ matches the other components of the selector.
## Syntax
@@ -42,6 +42,24 @@ Note that, in the `element:nth-child()` syntax, the child count includes childre
It can be read as the `An+B`-th element of a list. The `A` and `B` must both have {{cssxref("<integer>")}} values.
+### The `of
` syntax
+
+By passing a selector argument, we can select the **nth** element that matches that selector. For example, the following selector matches the first three list items which have a `class="important"` set.
+
+```css
+:nth-child(-n + 3 of li.important) {
+}
+```
+
+This is different from moving the selector outside of the function, like:
+
+```css
+li.important:nth-child(-n + 3) {
+}
+```
+
+This selector selects list items if they are among the first three children and match the selector `li.important`.
+
## Examples
### Example selectors
@@ -136,23 +154,25 @@ Note that, in the `element:nth-child()` syntax, the child count includes childre
#### CSS
-```css
-html {
+```css hidden
+* {
font-family: sans-serif;
}
span,
div em {
padding: 5px;
- border: 1px solid green;
+ border: 1px solid tomato;
display: inline-block;
margin-bottom: 3px;
}
+```
+```css
.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
- background-color: lime;
+ background-color: tomato;
}
```
@@ -160,6 +180,238 @@ div em {
{{EmbedLiveSample('Detailed_example', 550, 550)}}
+### Using 'of <selector>'
+
+In this example there is an unordered list of names, some of them have been marked as **noted** using `class="noted"`. These have been highlighted with a thick bottom border.
+
+#### HTML
+
+```html
+
+ Diego
+ Shilpa
+ Caterina
+ Jayla
+ Tyrone
+ Ricardo
+ Gila
+ Sienna
+ Titilayo
+ Lexi
+ Aylin
+ Leo
+ Leyla
+ Bruce
+ Aisha
+ Veronica
+ Kyouko
+ Shireen
+ Tanya
+ Marlene
+
+```
+
+#### CSS
+
+```css hidden
+* {
+ font-family: sans-serif;
+}
+
+ul {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ font-size: 1.2rem;
+ padding-left: 0;
+}
+
+li {
+ margin: 0.125rem;
+ padding: 0.25rem;
+}
+
+li {
+ border: 1px solid tomato;
+}
+
+.noted {
+ border-bottom: 5px solid tomato;
+}
+```
+
+In the following CSS we are targeting the **even** list items that are marked with `class="noted"`.
+
+```css
+li:nth-child(even of .noted) {
+ background-color: tomato;
+ border-bottom-color: seagreen;
+}
+```
+
+#### Result
+
+Items with `class="noted"` have a thick bottom border and items 3, 10 and 17 have a solid background as they are the _even_ list items with `class="noted"`.
+
+{{EmbedLiveSample('of_selector_syntax_example', 550, 120)}}
+
+### of selector syntax vs selector nth-child
+
+In this example, there are two unordered lists of names. The first list shows the effect of `li:nth-child(-n + 3 of .noted)` and the second list shows the effect of `li.noted:nth-child(-n + 3)`.
+
+#### HTML
+
+```html
+
+ Diego
+ Shilpa
+ Caterina
+ Jayla
+ Tyrone
+ Ricardo
+ Gila
+ Sienna
+ Titilayo
+ Lexi
+
+
+ Diego
+ Shilpa
+ Caterina
+ Jayla
+ Tyrone
+ Ricardo
+ Gila
+ Sienna
+ Titilayo
+ Lexi
+
+```
+
+#### CSS
+
+```css hidden
+* {
+ font-family: sans-serif;
+}
+
+ul {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ font-size: 1.2rem;
+ padding-left: 0;
+}
+
+li {
+ margin: 0.125rem;
+ padding: 0.25rem;
+}
+
+li {
+ border: 1px solid tomato;
+}
+
+.noted {
+ border-bottom: 5px solid tomato;
+}
+```
+
+```css
+ul.one > li:nth-child(-n + 3 of .noted) {
+ background-color: tomato;
+ border-bottom-color: seagreen;
+}
+
+ul.two > li.noted:nth-child(-n + 3) {
+ background-color: tomato;
+ border-bottom-color: seagreen;
+}
+```
+
+#### Result
+
+The first case applies a style to the first three list items with `class="noted"` whether or not they are the first three items in the list.
+
+The second case applies a style to the items with `class="noted"` if they are within the first 3 items in the list.
+
+{{EmbedLiveSample('of_selector_syntax_vs_selector_nth-child', 550, 150)}}
+
+### Using of selector to fix striped tables
+
+A common practice for tables is to use _zebra-stripes_ which alternates between light and dark background colors for rows, making tables easier to read and more accessible. If a row is hidden, the stripes will appear merged and alter the desired effect. In this example, you can see two tables with a `hidden` row. The second table handles hidden rows using `of :not([hidden])`.
+
+#### HTML
+
+```html-nolint hidden
+
+```
+
+```html-nolint
+
+
+ Name Age Country
+
+ Mamitiana 23 Madagascar Yuki 48 Japan Tlayolotl 36 Mexico Adilah 27 Morocco Vieno 55 Finland Ricardo 66 Brazil
+
+
+
+ Name Age Country
+
+ Mamitiana 23 Madagascar Yuki 48 Japan Tlayolotl 36 Mexico Adilah 27 Morocco Vieno 55 Finland Ricardo 66 Brazil
+
+```
+
+```html hidden
+
-
- one
- two
- three
- four
-
-
- one
- two
- three
- four
-
-
-```
-
-#### CSS
-
-```css
-td {
- border: 1px solid #ccc;
- padding: 0.2em;
-}
-
-/* Odd columns */
-:nth-col(2n + 1) {
- background-color: pink;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample('Basic_example', 250, 200)}}
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/en-us/web/css/_colon_nth-last-child/index.md b/files/en-us/web/css/_colon_nth-last-child/index.md
index 03b559dc73041a3..6071e64ed695fce 100644
--- a/files/en-us/web/css/_colon_nth-last-child/index.md
+++ b/files/en-us/web/css/_colon_nth-last-child/index.md
@@ -40,6 +40,23 @@ The `nth-last-child` pseudo-class is specified with a single argument, which rep
It can be read as the `An+B`-th element of a list. The index of the first element, counting from the end, is `1`. The `A` and `B` must both have {{cssxref("<integer>")}} values.
+### The `of ` syntax
+
+By passing a selector argument, we can select the **nth-last** element that matches that selector. For example, the following selector matches the last three _important_ list items, which are assigned with `class="important"`.
+
+```css
+:nth-last-child(-n + 3 of li.important) {
+}
+```
+
+> **Note:** This is different from moving the selector outside of the function, like:
+
+```css
+li.important: nth-last-child(-n + 3);
+```
+
+This selector applies a style to list items if they are also within the last three children.
+
## Examples
### Example selectors
@@ -116,7 +133,7 @@ tr:nth-last-child(2) {
### Quantity query
-A _quantity query_ styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the `nth-last-child` pseudo-class and the [general sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator).
+A _quantity query_ styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the `nth-last-child` pseudo-class and the [subsequent-sibling combinator](/en-US/docs/Web/CSS/Subsequent-sibling_combinator).
#### HTML
@@ -151,6 +168,78 @@ li:nth-last-child(3) ~ li {
{{EmbedLiveSample('Quantity_query', '100%', 270)}}
+### `of ` syntax example
+
+In this example, there is an unordered list of names. Some items have a `noted` class applied and are then highlighted with a thick bottom border.
+
+#### HTML
+
+```html
+
+ Diego
+ Shilpa
+ Caterina
+ Jayla
+ Tyrone
+ Ricardo
+ Gila
+ Sienna
+ Titilayo
+ Lexi
+ Aylin
+ Leo
+ Leyla
+ Bruce
+ Aisha
+ Veronica
+ Kyouko
+ Shireen
+ Tanya
+ Marlene
+
+```
+
+#### CSS
+
+```css
+* {
+ font-family: sans-serif;
+}
+
+ul {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ font-size: 1.2rem;
+ padding-left: 0;
+}
+
+li {
+ margin: 0.125rem;
+ padding: 0.25rem;
+ border: 1px solid tomato;
+}
+
+.noted {
+ border-bottom: 5px solid tomato;
+}
+```
+
+In the following CSS we are targeting the **odd** list items that are marked with `class="noted"`.
+
+```css
+li:nth-last-child(odd of .noted) {
+ background-color: tomato;
+ border-bottom-color: seagreen;
+}
+```
+
+#### Result
+
+Items with `class="noted"` have a think bottom border and items 1, 7, 14, and 20 have a solid background as they are the _odd_ list items with `class="noted"`.
+
+{{EmbedLiveSample('of_selector_syntax_example', 550, 120)}}
+
## Specifications
{{Specifications}}
@@ -161,5 +250,6 @@ li:nth-last-child(3) ~ li {
## See also
-- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
+- {{Cssxref(":nth-child")}}
+- {{Cssxref(":nth-last-of-type")}}
- [Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css/)
diff --git a/files/en-us/web/css/_colon_nth-last-col/index.md b/files/en-us/web/css/_colon_nth-last-col/index.md
deleted file mode 100644
index ec1d23083ac5e4b..000000000000000
--- a/files/en-us/web/css/_colon_nth-last-col/index.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: ":nth-last-col()"
-slug: Web/CSS/:nth-last-col
-page-type: css-pseudo-class
-browser-compat: css.selectors.nth-last-col
----
-
-{{CSSRef}}{{SeeCompatTable}}
-
-The **`:nth-last-col()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(":nth-child")}} selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.
-
-```css
-/* Selects every odd column in a table */
-:nth-last-col(odd) {
- background-color: pink;
-}
-```
-
-## Syntax
-
-The `nth-last-col()` pseudo-class is specified with a single argument, which represents the pattern for matching elements. It uses `:nth-last-col(An+B)` syntax.
-
-See {{Cssxref(":nth-child")}} for a more detailed explanation of its syntax.
-
-```css
-:nth-last-col(An + B) {
- /* ... */
-}
-```
-
-## Examples
-
-### Basic example
-
-#### HTML
-
-```html
-
-
- one
- two
- three
- four
-
-
- one
- two
- three
- four
-
-
-```
-
-#### CSS
-
-```css
-td {
- border: 1px solid #ccc;
- padding: 0.2em;
-}
-
-/* Odd columns starting with the final column of the table */
-:nth-last-col(2n + 1) {
- background-color: pink;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample('Basic_example', 250, 200)}}
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/en-us/web/css/_colon_only-child/index.md b/files/en-us/web/css/_colon_only-child/index.md
index 2e110a219d890de..34aac6f8b11f1ee 100644
--- a/files/en-us/web/css/_colon_only-child/index.md
+++ b/files/en-us/web/css/_colon_only-child/index.md
@@ -11,8 +11,6 @@ The **`:only-child`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) rep
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-child.html", "tabbed-shorter")}}
-> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.
-
## Syntax
```css
diff --git a/files/en-us/web/css/_colon_only-of-type/index.md b/files/en-us/web/css/_colon_only-of-type/index.md
index 2d8e27ff5bea2fb..e8ef211a31b460c 100644
--- a/files/en-us/web/css/_colon_only-of-type/index.md
+++ b/files/en-us/web/css/_colon_only-of-type/index.md
@@ -11,8 +11,6 @@ The **`:only-of-type`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) r
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}}
-> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.
-
## Syntax
```css
diff --git a/files/en-us/web/css/_colon_out-of-range/index.md b/files/en-us/web/css/_colon_out-of-range/index.md
index fad64144a248e2d..da9374b9010fc40 100644
--- a/files/en-us/web/css/_colon_out-of-range/index.md
+++ b/files/en-us/web/css/_colon_out-of-range/index.md
@@ -59,11 +59,11 @@ input {
}
input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
+ background-color: rgb(0 255 0 / 25%);
}
input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
+ background-color: rgb(255 0 0 / 25%);
border: 2px solid red;
}
diff --git a/files/en-us/web/css/_colon_past/index.md b/files/en-us/web/css/_colon_past/index.md
index f2d522eb64e40a1..50c53ed332fff1b 100644
--- a/files/en-us/web/css/_colon_past/index.md
+++ b/files/en-us/web/css/_colon_past/index.md
@@ -2,12 +2,10 @@
title: ":past"
slug: Web/CSS/:past
page-type: css-pseudo-class
-status:
- - experimental
browser-compat: css.selectors.past
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:past`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches {{cssxref(":current")}}. For example in a video with captions which are being displayed by [WebVTT](/en-US/docs/Web/API/WebVTT_API).
@@ -52,7 +50,7 @@ The **`:past`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps
### WebVTT
-```
+```plain
WEBVTT FILE
1
diff --git a/files/en-us/web/css/_colon_paused/index.md b/files/en-us/web/css/_colon_paused/index.md
index 168749e25b2f386..f44f58ff78f5e85 100644
--- a/files/en-us/web/css/_colon_paused/index.md
+++ b/files/en-us/web/css/_colon_paused/index.md
@@ -7,9 +7,10 @@ browser-compat: css.selectors.paused
{{CSSRef}}
-The **`:paused`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".
+The **`:paused`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when that element is "paused" (i.e. not "playing").
-A resource is paused if the user explicitly paused it, or if it is in a non-activated state.
+A resource is paused if the user explicitly paused it, or if it is in a non-activated or other non-playing state, like "loaded, hasn't been activated yet".
+This is different from `:buffering` or `:stalled`, which are states that occur while the resource is considered "playing".
## Syntax
@@ -39,4 +40,10 @@ A resource is paused if the user explicitly paused it, or if it is in a non-acti
## See also
+- {{cssxref(":buffering")}}
+- {{cssxref(":muted")}}
- {{cssxref(":playing")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":stalled")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
diff --git a/files/en-us/web/css/_colon_picture-in-picture/index.md b/files/en-us/web/css/_colon_picture-in-picture/index.md
index 71b5c707e4eaa66..d5da14c1dfde17e 100644
--- a/files/en-us/web/css/_colon_picture-in-picture/index.md
+++ b/files/en-us/web/css/_colon_picture-in-picture/index.md
@@ -64,7 +64,6 @@ The magic happens in the CSS.
- [Picture-in-picture API](/en-US/docs/Web/API/Picture-in-Picture_API)
- {{DOMxRef("HTMLVideoElement.requestPictureInPicture()")}}
-- {{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}
- {{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}
- {{DOMxRef("Document.pictureInPictureEnabled")}}
- {{DOMxRef("Document.exitPictureInPicture()")}}
diff --git a/files/en-us/web/css/_colon_playing/index.md b/files/en-us/web/css/_colon_playing/index.md
index 7c262dca42d5ce5..a49d08c862faf7f 100644
--- a/files/en-us/web/css/_colon_playing/index.md
+++ b/files/en-us/web/css/_colon_playing/index.md
@@ -7,9 +7,8 @@ browser-compat: css.selectors.playing
{{CSSRef}}
-The **`:playing`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing".
-
-A resource is playing even if in buffering state or paused for any reason other than a user interaction to cause it to be paused.
+The **`:playing`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents the playback state of an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when that element is "playing".
+An element is considered to be playing if it is currently playing the media resource, or if it has temporarily stopped for reasons other than user intent (such as {{cssxref(":buffering")}} or {{cssxref(":stalled")}}).
## Syntax
@@ -39,4 +38,10 @@ A resource is playing even if in buffering state or paused for any reason other
## See also
+- {{cssxref(":buffering")}}
+- {{cssxref(":muted")}}
- {{cssxref(":paused")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":stalled")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
diff --git a/files/en-us/web/css/_colon_popover-open/index.md b/files/en-us/web/css/_colon_popover-open/index.md
new file mode 100644
index 000000000000000..4f388c246cbc4a5
--- /dev/null
+++ b/files/en-us/web/css/_colon_popover-open/index.md
@@ -0,0 +1,64 @@
+---
+title: ":popover-open"
+slug: Web/CSS/:popover-open
+page-type: css-pseudo-class
+browser-compat: css.selectors.popover-open
+---
+
+{{CSSRef}}
+
+The **`:popover-open`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a {{domxref("Popover API", "popover", "", "nocode")}} element (i.e. one with a [`popover` attribute](/en-US/docs/Web/HTML/Global_attributes/popover)) that is in the showing state. You can use this to apply style to popover elements only when they are shown.
+
+## Syntax
+
+```css
+:popover-open {
+ /* ... */
+}
+```
+
+## Examples
+
+By default, popovers appear in the middle of the viewport. The default styling is achieved like this in the UA stylesheet:
+
+```css
+[popover] {
+ position: fixed;
+ inset: 0;
+ width: fit-content;
+ height: fit-content;
+ margin: auto;
+ border: solid;
+ padding: 0.25em;
+ overflow: auto;
+ color: CanvasText;
+ background-color: Canvas;
+}
+```
+
+To override the default styles and get the popover to appear somewhere else on your viewport, you could need to override the above styles with something like this:
+
+```css
+:popover-open {
+ width: 200px;
+ height: 100px;
+ position: absolute;
+ inset: unset;
+ bottom: 5px;
+ right: 5px;
+ margin: 0;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Popover API](/en-US/docs/Web/API/Popover_API)
+- [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) HTML global attribute
diff --git a/files/en-us/web/css/_colon_scope/index.md b/files/en-us/web/css/_colon_scope/index.md
index bae63c1ddf02912..19b1f86ce1c720d 100644
--- a/files/en-us/web/css/_colon_scope/index.md
+++ b/files/en-us/web/css/_colon_scope/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.scope
{{CSSRef}}
-The **`:scope`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents elements that are a reference point for selectors to match against.
+The **`:scope`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents elements that are a reference point, or scope, for selectors to match against.
```css
/* Selects a scoped element */
@@ -16,7 +16,11 @@ The **`:scope`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/P
}
```
-Currently, when used in a stylesheet, `:scope` is the same as {{cssxref(":root")}}, since there is not at this time a way to explicitly establish a scoped element. When used from a DOM API such as {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, or {{domxref("Element.closest()")}}, `:scope` matches the element on which the method was called.
+Which element(s) `:scope` matches depends on the context in which it is used:
+
+- When used at the root level of a stylesheet, `:scope` is equivalent to {{cssxref(":root")}}, which in a regular HTML document matches the {{htmlelement("html")}} element.
+- When used inside a {{cssxref("@scope")}} block, `:scope` matches the block's defined scope root. It provides a way to apply styles to the root of the scope from inside the `@scope` block itself.
+- When used within a DOM API call — such as {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, or {{domxref("Element.closest()")}} — `:scope` matches the element on which the method was called.
## Syntax
@@ -28,48 +32,92 @@ Currently, when used in a stylesheet, `:scope` is the same as {{cssxref(":root")
## Examples
-### Identity match
+### Using `:scope` as an alternative to `:root`
-In this simple example, we demonstrate that using the `:scope` pseudo-class from the {{domxref("Element.matches()")}} method matches the element on which it's called.
+This example shows that `:scope` is equivalent to `:root` when used at the root level of a stylesheet. In this case, the provided CSS colors the background of the `` element orange.
-#### JavaScript
+#### HTML
-```js
-const paragraph = document.getElementById("para");
-const output = document.getElementById("output");
+```html
+
+```
-if (paragraph.matches(":scope")) {
- output.textContent = "Yep, the element is its own scope as expected!";
+#### CSS
+
+```css
+:scope {
+ background-color: orange;
}
```
+#### Result
+
+{{ EmbedLiveSample("Using :scope as an alternative to :root", "100%", 50) }}
+
+### Using `:scope` to style the scope root in a `@scope` block
+
+In this example, we use two separate `@scope` blocks to match links inside elements with a `.light-scheme` and `.dark-scheme` class respectively. Note how `:scope` is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the {{htmlelement("div")}} elements that have the classes applied to them.
+
#### HTML
```html
-
- This is a paragraph. It is not an interesting paragraph. Sorry about that.
-
-
+
+
+
```
-#### Result
+#### CSS
-{{ EmbedLiveSample('Identity_match') }}
+```css hidden
+div {
+ padding: 10px;
+}
+```
-### Direct children
+```css
+@scope (.light-scheme) {
+ :scope {
+ background-color: plum;
+ }
+
+ a {
+ color: darkmagenta;
+ }
+}
-A situation where the `:scope` pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved {{domxref("Element")}}.
+@scope (.dark-scheme) {
+ :scope {
+ background-color: darkmagenta;
+ color: antiquewhite;
+ }
-#### JavaScript
+ a {
+ color: plum;
+ }
+}
+```
-```js
-const context = document.getElementById("context");
-const selected = context.querySelectorAll(":scope > div");
+#### Result
-document.getElementById("results").innerHTML = Array.prototype.map
- .call(selected, (element) => `#${element.getAttribute("id")}`)
- .join(", ");
-```
+{{ EmbedLiveSample("Using :scope to style the scope root in a @scope block", "100%", 150) }}
+
+### Using `:scope` in JavaScript
+
+This example demonstrates using the `:scope` pseudo-class in JavaScript. This can be useful if you need to get a direct descendant of an already retrieved {{domxref("Element")}}.
#### HTML
@@ -84,14 +132,27 @@ document.getElementById("results").innerHTML = Array.prototype.map
- Selected elements ids :
+ Selected element ids :
```
+#### JavaScript
+
+```js
+const context = document.getElementById("context");
+const selected = context.querySelectorAll(":scope > div");
+
+document.getElementById("results").innerHTML = Array.prototype.map
+ .call(selected, (element) => `#${element.getAttribute("id")}`)
+ .join(", ");
+```
+
#### Result
-{{ EmbedLiveSample('Direct_children') }}
+The scope of `context` is the element with the [`id`](/en-US/docs/Web/HTML/Global_attributes#id) of `context`. The selected elements are the `` elements that are direct children of that context — `element-1` and `element-2` — but not their descendants.
+
+{{ EmbedLiveSample('Using :scope in JavaScript') }}
## Specifications
@@ -103,6 +164,7 @@ document.getElementById("results").innerHTML = Array.prototype.map
## See also
+- The {{cssxref("@scope")}} [at-rule](/en-US/docs/Web/CSS/At-rule)
- The {{cssxref(":root")}} [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes)
- [Locating DOM elements using selectors](/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- {{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}
diff --git a/files/en-us/web/css/_colon_seeking/index.md b/files/en-us/web/css/_colon_seeking/index.md
new file mode 100644
index 000000000000000..e0ba9c67e8fdd09
--- /dev/null
+++ b/files/en-us/web/css/_colon_seeking/index.md
@@ -0,0 +1,54 @@
+---
+title: ":seeking"
+slug: Web/CSS/:seeking
+page-type: css-pseudo-class
+browser-compat: css.selectors.seeking
+---
+
+{{CSSRef}}
+
+The **`:seeking`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when the playable element is seeking a playback position in the media resource.
+A resource is considered to be seeking if the user has requested playback of a specific position in the media resource, but the media element has not yet reached that position.
+
+Seeking is different from {{cssxref(":buffering")}} in that the media element is not currently loading data, but is instead skipping to a new position in the media resource.
+For more information, see the [Media buffering, seeking, and time ranges](/en-US/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges#seekable) guide.
+
+## Syntax
+
+```css
+:seeking {
+ /* ... */
+}
+```
+
+## Examples
+
+### CSS
+
+```css
+:seeking {
+ outline: 5px solid red;
+}
+
+video:seeking {
+ outline: 5px solid blue;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref(":buffering")}}
+- {{cssxref(":muted")}}
+- {{cssxref(":paused")}}
+- {{cssxref(":playing")}}
+- {{cssxref(":stalled")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
diff --git a/files/en-us/web/css/_colon_stalled/index.md b/files/en-us/web/css/_colon_stalled/index.md
new file mode 100644
index 000000000000000..7e67b2b18b28208
--- /dev/null
+++ b/files/en-us/web/css/_colon_stalled/index.md
@@ -0,0 +1,56 @@
+---
+title: ":stalled"
+slug: Web/CSS/:stalled
+page-type: css-pseudo-class
+browser-compat: css.selectors.stalled
+---
+
+{{CSSRef}}
+
+The **`:stalled`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when playback is stalled.
+A resource is considered to be stalled if the user has requested playback of a specific position in the media resource, but it has failed to receive any data for some amount of time.
+This is different from {{cssxref(":buffering")}} in that the media element is unexpectedly not loading data when stalled (e.g. due to a network error) for around 3 seconds (the exact time is [user agent dependent](https://html.spec.whatwg.org/multipage/media.html#stall-timeout)).
+
+> **Note:** Like with the {{cssxref(":buffering")}} pseudo-class, the element is still considered to be "playing" when it is "stalled".
+> If `:stalled` matches an element, {{cssxref(":playing")}} will also match that element.
+
+## Syntax
+
+```css
+:stalled {
+ /* ... */
+}
+```
+
+## Examples
+
+### CSS
+
+```css
+:stalled {
+ outline: 5px solid red;
+}
+
+audio:stalled {
+ background-color: red;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref(":buffering")}}
+- {{cssxref(":muted")}}
+- {{cssxref(":paused")}}
+- {{cssxref(":playing")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":volume-locked")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
+- [`stalled`](/en-US/docs/Web/API/HTMLMediaElement/stalled_event) event
diff --git a/files/en-us/web/css/_colon_target-within/index.md b/files/en-us/web/css/_colon_target-within/index.md
index ff673df783ab20c..e0cbefc90360d9b 100644
--- a/files/en-us/web/css/_colon_target-within/index.md
+++ b/files/en-us/web/css/_colon_target-within/index.md
@@ -9,7 +9,7 @@ browser-compat: css.selectors.target-within
{{CSSRef}}{{SeeCompatTable}}
-The **`:target-within`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element that is a target element or _contains_ an element that is a target. A target element is a unique element with an [`id`](/en-US/docs/Web/HTML/Global_attributes#id) matching the URL's fragment. In other words, it represents an element that is itself matched by the {{CSSxRef(":target")}} pseudo-class or has a descendant that is matched by `:target`. (This includes descendants in [shadow trees](/en-US/docs/Web/Web_Components/Using_shadow_DOM).)
+The **`:target-within`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element that is a target element or _contains_ an element that is a target. A target element is a unique element with an [`id`](/en-US/docs/Web/HTML/Global_attributes#id) matching the URL's fragment. In other words, it represents an element that is itself matched by the {{CSSxRef(":target")}} pseudo-class or has a descendant that is matched by `:target`. (This includes descendants in [shadow trees](/en-US/docs/Web/API/Web_components/Using_shadow_DOM).)
```css
/* Selects a
when one of its descendants is a target */
diff --git a/files/en-us/web/css/_colon_target/index.md b/files/en-us/web/css/_colon_target/index.md
index 1e24900ea368a1d..d1c2bd995162ff6 100644
--- a/files/en-us/web/css/_colon_target/index.md
+++ b/files/en-us/web/css/_colon_target/index.md
@@ -18,7 +18,7 @@ The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/
For example, the following URL has a fragment (denoted by the _#_ sign) that points to an element called `section2`:
-```
+```url
http://www.example.com/index.html#section2
```
@@ -36,6 +36,8 @@ The following element would be selected by a `:target` selector when the current
}
```
+> **Note:** Due to [a possible bug in the CSS specification](https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070), `:target` doesn't work within a [web component](/en-US/docs/Web/API/Web_components) because the [shadow root](/en-US/docs/Web/API/ShadowRoot) doesn't pass the target element down to the shadow tree.
+
## Examples
### A table of contents
@@ -92,109 +94,6 @@ p:target i {
{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
-### Pure-CSS lightbox
-
-You can use the `:target` pseudo-class to create a lightbox without using any JavaScript. This technique relies on the ability of anchor links to point to elements that are initially hidden on the page. Once targeted, the CSS changes their `display` so that they are shown.
-
-> **Note:** A more complete pure-CSS lightbox based on the `:target` pseudo-class is [available on GitHub](https://github.com/madmurphy/takefive.css/) ([demo](https://madmurphy.github.io/takefive.css/)).
-
-#### HTML
-
-```html
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
- placerat id eleifend eu, semper vel sem.
-
-
-
-
-
-
-
- Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
- quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
-
-
-
-```
-
-#### CSS
-
-```css
-/* Unopened lightbox */
-.lightbox {
- display: none;
-}
-
-/* Opened lightbox */
-.lightbox:target {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* Lightbox content */
-.lightbox figcaption {
- width: 25rem;
- position: relative;
- padding: 1.5em;
- background-color: lightpink;
-}
-
-/* Close button */
-.lightbox .close {
- position: relative;
- display: block;
-}
-
-.lightbox .close::after {
- right: -1rem;
- top: -1rem;
- width: 2rem;
- height: 2rem;
- position: absolute;
- display: flex;
- z-index: 1;
- align-items: center;
- justify-content: center;
- background-color: black;
- border-radius: 50%;
- color: white;
- content: "×";
- cursor: pointer;
-}
-
-/* Lightbox overlay */
-.lightbox .close::before {
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- position: fixed;
- background-color: rgba(0, 0, 0, 0.7);
- content: "";
- cursor: default;
-}
-```
-
-#### Result
-
-{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
-
## Specifications
{{Specifications}}
@@ -205,4 +104,4 @@ You can use the `:target` pseudo-class to create a lightbox without using any Ja
## See also
-- [Using the :target pseudo-class in selectors](/en-US/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors)
+- [Using the :target pseudo-class in selectors](/en-US/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors)
diff --git a/files/en-us/web/css/_colon_user-invalid/index.md b/files/en-us/web/css/_colon_user-invalid/index.md
index 6e9f31385616b6b..4997da82e7b6ae5 100644
--- a/files/en-us/web/css/_colon_user-invalid/index.md
+++ b/files/en-us/web/css/_colon_user-invalid/index.md
@@ -1,20 +1,16 @@
---
-title: ":user-invalid (:-moz-ui-invalid)"
+title: ":user-invalid"
slug: Web/CSS/:user-invalid
page-type: css-pseudo-class
-status:
- - experimental
browser-compat: css.selectors.user-invalid
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:user-invalid`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any validated form element whose value isn't valid based on their [validation constraints](/en-US/docs/Learn/Forms#constraint_validation), after the user has interacted with it.
The `:user-invalid` pseudo-class must match an {{CSSxRef(":invalid")}}, {{CSSxRef(":out-of-range")}}, or blank-but {{CSSxRef(":required")}} element between the time the user has attempted to submit the form and before the user has interacted again with the form element.
-> **Note:** The pseudo-class behaves in the same way as the non-standard `:-moz-ui-invalid` pseudo-class.
-
## Syntax
```css
diff --git a/files/en-us/web/css/_colon_user-valid/index.md b/files/en-us/web/css/_colon_user-valid/index.md
index d74120184183362..fc17d46e770c0a7 100644
--- a/files/en-us/web/css/_colon_user-valid/index.md
+++ b/files/en-us/web/css/_colon_user-valid/index.md
@@ -1,18 +1,14 @@
---
-title: ":user-valid (:-moz-ui-valid)"
+title: ":user-valid"
slug: Web/CSS/:user-valid
page-type: css-pseudo-class
-status:
- - experimental
browser-compat: css.selectors.user-valid
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`:user-valid`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any validated form element whose value validates correctly based on its [validation constraints](/en-US/docs/Learn/Forms#constraint_validation). However, unlike {{cssxref(":valid")}} it only matches once the user has interacted with it.
-> **Note:** The pseudo-class behaves in the same way as the non-standard `:-moz-ui-valid` pseudo-class.
-
This pseudo-class is applied according to the following rules:
- If the control does not have focus, and the value is valid, apply this pseudo-class.
diff --git a/files/en-us/web/css/_colon_visited/index.md b/files/en-us/web/css/_colon_visited/index.md
index cebcaf17fb49103..25229ee465a2764 100644
--- a/files/en-us/web/css/_colon_visited/index.md
+++ b/files/en-us/web/css/_colon_visited/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.visited
{{CSSRef}}
-The **`:visited`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The `:visited` pseudo-class applies only {{htmlelement("a")}} and {{htmlelement("area")}} elements that have an `href` attribute.
+The **`:visited`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The `:visited` pseudo-class applies only to {{htmlelement("a")}} and {{htmlelement("area")}} elements that have an `href` attribute.
{{EmbedInteractiveExample("pages/tabbed/pseudo-class-visited.html", "tabbed-shorter")}}
diff --git a/files/en-us/web/css/_colon_volume-locked/index.md b/files/en-us/web/css/_colon_volume-locked/index.md
new file mode 100644
index 000000000000000..a27ef739152e015
--- /dev/null
+++ b/files/en-us/web/css/_colon_volume-locked/index.md
@@ -0,0 +1,54 @@
+---
+title: ":volume-locked"
+slug: Web/CSS/:volume-locked
+page-type: css-pseudo-class
+browser-compat: css.selectors.volume-locked
+---
+
+{{CSSRef}}
+
+The **`:volume-locked`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is capable of making sound, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, but the audio volume of the media element is currently "locked" by the user.
+
+User agents may set media [`muted`](/en-US/docs/Web/API/HTMLMediaElement/muted) or [`volume`](/en-US/docs/Web/API/HTMLMediaElement/volume) values according to user preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise).
+An element that is `:volume-locked` cannot be muted, un-muted, or have its volume changed via JavaScript. The locked status is an operating system or user agent preference.
+
+## Syntax
+
+```css
+:volume-locked {
+ /* ... */
+}
+```
+
+## Examples
+
+### CSS
+
+```css
+:volume-locked {
+ border: 5px solid green;
+}
+
+video:volume-locked {
+ border: 5px solid aqua;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref(":buffering")}}
+- {{cssxref(":muted")}}
+- {{cssxref(":paused")}}
+- {{cssxref(":playing")}}
+- {{cssxref(":seeking")}}
+- {{cssxref(":stalled")}}
+- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)
+- [`volume`](/en-US/docs/Web/API/HTMLMediaElement/volume) property of {{domxref("HTMLMediaElement")}} objects
diff --git a/files/en-us/web/css/_colon_where/index.md b/files/en-us/web/css/_colon_where/index.md
index 24867eac3771416..218cbfee5594c31 100644
--- a/files/en-us/web/css/_colon_where/index.md
+++ b/files/en-us/web/css/_colon_where/index.md
@@ -9,10 +9,10 @@ browser-compat: css.selectors.where
The **`:where()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
-{{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}}
-
The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments.
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}}
+
### Forgiving Selector Parsing
The specification defines `:is()` and `:where()` as accepting a [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list).
@@ -149,4 +149,4 @@ However, selectors inside `:where()` have specificity 0, so the orange footer li
- {{CSSxRef(":is", ":is()")}}
- [Selector list](/en-US/docs/Web/CSS/Selector_list)
-- [Web components](/en-US/docs/Web/Web_Components)
+- [Web components](/en-US/docs/Web/API/Web_components)
diff --git a/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md b/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
index 5750bafc1d99fe1..142323eaf3864ff 100644
--- a/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
+++ b/files/en-us/web/css/_doublecolon_-moz-focus-inner/index.md
@@ -3,11 +3,11 @@ title: "::-moz-focus-inner"
slug: Web/CSS/::-moz-focus-inner
page-type: css-pseudo-element
status:
- - non-standard
+ - experimental
browser-compat: css.selectors.-moz-focus-inner
---
-{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{SeeCompatTable}}
The **`::-moz-focus-inner`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents an inner focus ring of the {{HTMLElement("button")}} element as well as the {{HTMLElement("input/button","button")}}, {{HTMLElement("input/submit","submit")}}, {{HTMLElement("input/reset","reset")}}, and {{HTMLElement("input/color","color")}} types of the {{HTMLElement("input")}} element.
@@ -66,7 +66,6 @@ Not part of any standard.
- Related CSS selectors:
- - [`:-moz-focusring`](/en-US/docs/Web/CSS/:-moz-focusring)
- [`:focus`](/en-US/docs/Web/CSS/:focus)
- [`:focus-visible`](/en-US/docs/Web/CSS/:focus-visible)
- [`:focus-within`](/en-US/docs/Web/CSS/:focus-within)
diff --git a/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md b/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md
new file mode 100644
index 000000000000000..b91e325831d42c7
--- /dev/null
+++ b/files/en-us/web/css/_doublecolon_-moz-list-bullet/index.md
@@ -0,0 +1,55 @@
+---
+title: "::-moz-list-bullet"
+slug: Web/CSS/::-moz-list-bullet
+page-type: css-pseudo-element
+status:
+ - non-standard
+---
+
+{{CSSRef}}{{Non-standard_header}}
+
+The **`::-moz-list-bullet`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents the marker (typically a bullet) of a list item ({{htmlelement("li")}}) in an unordered list ({{htmlelement("ul")}}).
+
+## Syntax
+
+```css
+li::-moz-list-bullet {
+ /* ... */
+}
+```
+
+## Examples
+
+### Styling list item markers
+
+#### HTML
+
+```html
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+#### CSS
+
+```css
+::-moz-list-bullet {
+ color: red;
+ font-size: 1.5em;
+}
+```
+
+#### Result
+
+{{ EmbedLiveSample('Styling list item markers') }}
+
+## Specifications
+
+Not part of any standard.
+
+## See also
+
+- {{cssxref("::-moz-list-number")}}
+- {{cssxref("::marker")}}
diff --git a/files/en-us/web/css/_doublecolon_-moz-list-number/index.md b/files/en-us/web/css/_doublecolon_-moz-list-number/index.md
new file mode 100644
index 000000000000000..34a3cc6dd00bbfb
--- /dev/null
+++ b/files/en-us/web/css/_doublecolon_-moz-list-number/index.md
@@ -0,0 +1,53 @@
+---
+title: "::-moz-list-number"
+slug: Web/CSS/::-moz-list-number
+page-type: css-pseudo-element
+status:
+ - non-standard
+---
+
+{{CSSRef}}{{Non-standard_header}}
+
+The **`::-moz-list-number`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents the marker (typically a number) of a list item ({{HTMLElement("li")}}) in an ordered list ({{HTMLElement("ol")}}).
+
+## Syntax
+
+```css
+li::-moz-list-number {
+ /* ... */
+}
+```
+
+## Examples
+
+### HTML
+
+```html
+
+ First item
+ Second item
+ Third item
+
+```
+
+### CSS
+
+```css
+li::-moz-list-number {
+ font-style: italic;
+ font-weight: bold;
+}
+```
+
+### Result
+
+{{ EmbedLiveSample("Examples", "auto", "auto", "moz-list-number.png") }}
+
+## Specifications
+
+Not part of any standard.
+
+## See also
+
+- {{cssxref("::-moz-list-bullet")}}
+- {{cssxref("::marker")}}
diff --git a/files/en-us/web/css/_colon_-moz-list-number/moz-list-number.png b/files/en-us/web/css/_doublecolon_-moz-list-number/moz-list-number.png
similarity index 100%
rename from files/en-us/web/css/_colon_-moz-list-number/moz-list-number.png
rename to files/en-us/web/css/_doublecolon_-moz-list-number/moz-list-number.png
diff --git a/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
index f530f9a1fb2b1b9..4f35e3206ea2965 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-inner-spin-button/index.md
@@ -55,6 +55,5 @@ Not part of any standard.
## See also
-- {{cssxref("::-webkit-outer-spin-button")}}
- {{cssxref("::-webkit-textfield-decoration-container")}}
- [Styling Form Controls – WebKit](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement)
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
index d5c480a298e6bbf..ac25b5a4e70c477 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -28,24 +28,47 @@ Not part of any standard.
### HTML
```html
-
Score out of 10
+Normal:
Score 6/10
+
+Styled:
Score 6/10
```
### CSS
```css
-meter {
- /* Reset the default appearance for -webkit- only */
+body {
+ font-family: monospace;
+}
+
+.safari meter {
+ /* Reset the default appearance for Safari only */
+ /* .safari class is added via JavaScript */
-webkit-appearance: none;
}
-meter::-webkit-meter-bar {
+#styled::-webkit-meter-bar {
background: #eee;
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
+ box-shadow: 0 2px 3px rgb(0 0 0 / 20%) inset;
border-radius: 3px;
}
```
+### JavaScript
+
+```js
+// Safari requires
elements to have an `appearance` of `none` for custom styling
+// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
+// Therefore, we must check if the browser is Safari-based.
+
+const is_safari =
+ navigator.userAgent.includes("AppleWebKit/") &&
+ !navigator.userAgent.includes("Chrome/");
+
+if (is_safari) {
+ document.body.classList.add("safari");
+}
+```
+
### Result
{{ EmbedLiveSample('Examples') }}
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
index 843ff58b34105f6..019ad29cc165377 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
@@ -9,7 +9,9 @@ browser-compat: css.selectors.-webkit-meter-even-less-good-value
{{CSSRef}}{{Non-standard_header}}
-The **`::-webkit-meter-even-less-good-value`** gives a red color to a {{htmlelement("meter")}} element when the value and the optimum attributes fall outside the low-high range, but in opposite zones. To illustrate, it applies when _value_ < _low_ < _high_ < _optimum_ or _value_ > _high_ > _low_ > _optimum_.
+The **`::-webkit-meter-even-less-good-value`** styles the {{htmlelement("meter")}} element when the value and the optimum attributes fall outside the low-high range, but in opposite zones. To illustrate, it applies when _value_ < _low_ < _high_ < _optimum_ or _value_ > _high_ > _low_ > _optimum_.
+
+Red is the default color.
## Syntax
@@ -28,19 +30,53 @@ Not part of any standard.
### HTML
```html
-Score out of 10
+Normal:
+
+ Score 2/10
+
+
+ Score 2/10
+
```
### CSS
```css
-meter::-webkit-meter-even-less-good-value {
- background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+body {
+ font-family: monospace;
+}
+
+.safari meter {
+ /* Reset the default appearance for Safari only */
+ /* .safari class is added via JavaScript */
+ -webkit-appearance: none;
+}
+
+#styled::-webkit-meter-even-less-good-value {
+ background: linear-gradient(to bottom, #f77, #900 45%, #900 55%, #f77);
height: 100%;
box-sizing: border-box;
}
```
+### JavaScript
+
+```js
+// Safari requires elements to have an `appearance` of `none` for custom styling
+// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
+// Therefore, we must check if the browser is Safari-based.
+
+const is_safari =
+ navigator.userAgent.includes("AppleWebKit/") &&
+ !navigator.userAgent.includes("Chrome/");
+
+if (is_safari) {
+ document.body.classList.add("safari");
+}
+```
+
### Result
{{ EmbedLiveSample('Examples', '100%', 50) }}
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
index 1bc62c1d651d639..dddb902a0dd835a 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md
@@ -30,21 +30,44 @@ This will only work in WebKit and Blink-based browsers, such as Safari, Chrome,
### HTML
```html
-Score out of 10
+Normal: Score 6/10
+Score 6/10
```
### CSS
```css
-meter {
- /* Reset the default appearance for -webkit- only */
+body {
+ font-family: monospace;
+}
+
+.safari meter {
+ /* Reset the default appearance for Safari only */
+ /* .safari class is added via JavaScript */
-webkit-appearance: none;
}
-meter::-webkit-meter-inner-element {
+#styled::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
- border: 1px solid #aaa;
+ border: 1px dashed #aaa;
+}
+```
+
+### JavaScript
+
+```js
+// Safari requires elements to have an `appearance` of `none` for custom styling
+// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
+// Therefore, we must check if the browser is Safari-based.
+
+const is_safari =
+ navigator.userAgent.includes("AppleWebKit/") &&
+ !navigator.userAgent.includes("Chrome/");
+
+if (is_safari) {
+ document.body.classList.add("safari");
}
```
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
index 0f054ce563625e4..8c17e12451a776e 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
@@ -9,7 +9,7 @@ browser-compat: css.selectors.-webkit-meter-optimum-value
{{CSSRef}}{{Non-standard_header}}
-The **`::-webkit-meter-optimum-value`** CSS [pseudo-element](/en-US/docs/Glossary/Pseudo-element) styles the {{htmlelement("meter")}} element when its value is inside the low-high range.
+The **`::-webkit-meter-optimum-value`** CSS [pseudo-element](/en-US/docs/Glossary/Pseudo-element) styles the {{htmlelement("meter")}} element when its value is inside the low-high range, or when the value is equivalent to the optimum value.
Green is the default color.
@@ -32,21 +32,50 @@ This example will only work in browsers based on WebKit or Blink.
### HTML
```html
-Score out of 10
+Normal:
+
+ Score 6/10
+
+
+ Score 6/10
+
```
### CSS
```css
-meter::-webkit-meter-bar {
- /* Required to get rid of the default background property */
- background: none;
- background-color: whiteSmoke;
- box-shadow: 0 5px 5px -5px #333 inset;
+body {
+ font-family: monospace;
}
-meter::-webkit-meter-optimum-value {
- box-shadow: 0 5px 5px -5px #999 inset;
+.safari meter {
+ /* Reset the default appearance for Safari only */
+ /* .safari class is added via JavaScript */
+ -webkit-appearance: none;
+}
+
+#styled::-webkit-meter-optimum-value {
+ background: linear-gradient(to bottom, #7f7, #090 45%, #090 55%, #7f7);
+ height: 100%;
+ box-sizing: border-box;
+}
+```
+
+### JavaScript
+
+```js
+// Safari requires elements to have an `appearance` of `none` for custom styling
+// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
+// Therefore, we must check if the browser is Safari-based.
+
+const is_safari =
+ navigator.userAgent.includes("AppleWebKit/") &&
+ !navigator.userAgent.includes("Chrome/");
+
+if (is_safari) {
+ document.body.classList.add("safari");
}
```
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
index 729f6ad953820da..3a5ae62fea38c9d 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
@@ -9,7 +9,9 @@ browser-compat: css.selectors.-webkit-meter-suboptimum-value
{{CSSRef}}{{Non-standard_header}}
-The **`::-webkit-meter-suboptimum-value`** [pseudo-element](/en-US/docs/Glossary/Pseudo-element) gives a yellow color to the {{htmlelement("meter")}} element when the value attribute falls outside of the low-high range.
+The **`::-webkit-meter-suboptimum-value`** [pseudo-element](/en-US/docs/Glossary/Pseudo-element) styles the {{htmlelement("meter")}} element when the value attribute falls outside of the low-high range and is not equivalent to the optimum value.
+
+Yellow is the default color.
## Syntax
@@ -26,19 +28,53 @@ This example will only work in browsers based on WebKit or Blink.
### HTML
```html
-Score out of 10
+Normal:
+
+ Score 2/10
+
+
+ Score 2/10
+
```
### CSS
```css
-meter::-webkit-meter-suboptimum-value {
- background: pink;
+body {
+ font-family: monospace;
+}
+
+.safari meter {
+ /* Reset the default appearance for Safari only */
+ /* .safari class is added via JavaScript */
+ -webkit-appearance: none;
+}
+
+#styled::-webkit-meter-suboptimum-value {
+ background: linear-gradient(to bottom, #ff7, #990 45%, #990 55%, #ff7);
height: 100%;
box-sizing: border-box;
}
```
+### JavaScript
+
+```js
+// Safari requires elements to have an `appearance` of `none` for custom styling
+// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
+// Therefore, we must check if the browser is Safari-based.
+
+const is_safari =
+ navigator.userAgent.includes("AppleWebKit/") &&
+ !navigator.userAgent.includes("Chrome/");
+
+if (is_safari) {
+ document.body.classList.add("safari");
+}
+```
+
### Result
{{ EmbedLiveSample('Examples', '100%', 50) }}
diff --git a/files/en-us/web/css/_doublecolon_-webkit-outer-spin-button/index.md b/files/en-us/web/css/_doublecolon_-webkit-outer-spin-button/index.md
deleted file mode 100644
index d5fb52f451b6d12..000000000000000
--- a/files/en-us/web/css/_doublecolon_-webkit-outer-spin-button/index.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: "::-webkit-outer-spin-button"
-slug: Web/CSS/::-webkit-outer-spin-button
-page-type: css-pseudo-element
-status:
- - non-standard
-browser-compat: css.selectors.-webkit-outer-spin-button
----
-
-{{CSSRef}}{{Non-standard_header}}
-
-The **`::-webkit-outer-spin-button`** CSS pseudo-element is used to style the outer part of the spinner button of number picker {{htmlelement("input")}} elements.
-
-## Syntax
-
-```css
-::-webkit-outer-spin-button {
- /* ... */
-}
-```
-
-## Examples
-
-> **Note:** These examples only works on browsers based on WebKit or Blink.
-
-### Hiding the spinner
-
-This example uses `input::-webkit-outer-spin-button` to find {{HTMLElement("input")}} elements' spinner widgets and set their `-webkit-appearance` to `none`, thus hiding them.
-
-#### HTML
-
-```html
-
@@ -52,7 +52,7 @@ In this demo we use a simple template with three slots:
```
-A custom element — `` — is defined like so:
+We define the `` custom element. In this case, we add styles with JavaScript, though we could have added them in a {{HTMLElement("style")}} block within the {{HTMLElement("template")}} with the same effect:
```js
customElements.define(
@@ -71,27 +71,44 @@ customElements.define(
"h2 { margin: 0 0 10px; }" +
"ul { margin: 0; }" +
"p { margin: 10px 0; }" +
- "::slotted(*) { color: gray; font-family: sans-serif; } ";
+ "::slotted(*) { color: gray; font-family: sans-serif; } " +
+ "::slotted(span) {text-decoration: underline;} ";
shadowRoot.appendChild(style);
shadowRoot.appendChild(templateContent.cloneNode(true));
}
- }
+ },
);
```
-You'll see that when filling the `style` element with content, we select all slotted elements (`::slotted(*)`) and give them a different font and color. This allows them to stand out better next to the slots that haven't been successfully filled.
+When filling the `style` element with content, you'll see that we select all slotted elements (`::slotted(*)`) and give them a different font and color. This differentiates them from the slots that haven't been filled. We styled all the slotted {{HTMLElement("span")}}s (`::slotted(span)`) to differentiate the ``s from the {{HTMLElement("p")}}s.
-The element looks like this when inserted into the page:
+Our markup includes three custom elements, including a custom element with an invalid slot name in a source order that differs from the ``:
```html
- Dr. Shazaam
+ Wonder Woman
Immortal
Superhero
+
+
+ Malala Yousafzai
+ 17
+ Activist
+
+
+
+ 44
+ Time traveller
+ Dr. Who
+
```
+#### Result
+
+{{EmbedLiveSample('Highlighting_slotted_elements', 500, 500)}}
+
## Specifications
{{Specifications}}
@@ -102,4 +119,11 @@ The element looks like this when inserted into the page:
## See also
-- [Web components](/en-US/docs/Web/Web_Components)
+- {{cssxref(":host")}}
+- {{cssxref(":host_function", ":host()")}}
+- {{cssxref(":host-context", ":host-context()")}}
+- [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
+- HTML [`slot`](/en-US/docs/Web/HTML/Global_attributes/slot) attribute
+- HTML {{HTMLElement("slot")}} element
+- HTML {{HTMLElement("template")}} element
+- [Web components](/en-US/docs/Web/API/Web_components)
diff --git a/files/en-us/web/css/_doublecolon_view-transition-group/index.md b/files/en-us/web/css/_doublecolon_view-transition-group/index.md
index 4831a025846f670..e35c5146060a29a 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-group/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-group/index.md
@@ -30,7 +30,7 @@ By default, selected elements initially mirror the size and position of the {{cs
If there's both an "old" and "new" view state, styles in the view transition style sheet animate this pseudo-element's {{cssxref("width")}} and {{cssxref("height")}} from the size of the "old" view state's border box to that of the "new" view state's border box.
-> **Note:** View transition style sheet styles are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
+> **Note:** View transition style sheet styles are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
In addition, the element's transform is animated from the "old" view state's screen space transform to the new view state's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
diff --git a/files/en-us/web/css/_doublecolon_view-transition-new/index.md b/files/en-us/web/css/_doublecolon_view-transition-new/index.md
index 2682588fcb7ffd8..ece636dfcc35b1c 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-new/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-new/index.md
@@ -36,7 +36,7 @@ html::view-transition-new(*) {
}
```
-> **Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-new`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
+> **Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-new`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
## Syntax
diff --git a/files/en-us/web/css/_doublecolon_view-transition-old/index.md b/files/en-us/web/css/_doublecolon_view-transition-old/index.md
index c82747219dd7220..736763ce535e926 100644
--- a/files/en-us/web/css/_doublecolon_view-transition-old/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition-old/index.md
@@ -36,7 +36,7 @@ html::view-transition-old(*) {
}
```
-> **Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-old`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
+> **Note:** Additional view transition style sheet styles are also setup to animate `::view-transition-old`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details.
## Syntax
diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md
index 88ff26050de1313..0bd00af1a053401 100644
--- a/files/en-us/web/css/_doublecolon_view-transition/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition/index.md
@@ -36,7 +36,7 @@ All {{cssxref("::view-transition-group")}} pseudo-elements are positioned relati
```css
::view-transition {
- background-color: rgba(0, 0, 0, 0.25);
+ background-color: rgb(0 0 0 / 25%);
}
```
diff --git a/files/en-us/web/css/abs/index.md b/files/en-us/web/css/abs/index.md
index c9653bab3e408f4..ca556ec9ca17dfe 100644
--- a/files/en-us/web/css/abs/index.md
+++ b/files/en-us/web/css/abs/index.md
@@ -2,12 +2,10 @@
title: abs()
slug: Web/CSS/abs
page-type: css-function
-status:
- - experimental
browser-compat: css.types.abs
---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
The **`abs()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) returns the absolute value of the argument, as the same type as the input.
diff --git a/files/en-us/web/css/absolute-size/index.md b/files/en-us/web/css/absolute-size/index.md
new file mode 100644
index 000000000000000..6bc75fcd4ae6fdc
--- /dev/null
+++ b/files/en-us/web/css/absolute-size/index.md
@@ -0,0 +1,132 @@
+---
+title:
+slug: Web/CSS/absolute-size
+page-type: css-type
+spec-urls: https://drafts.csswg.org/css-fonts/#valdef-font-size-absolute-size
+---
+
+{{CSSRef}}
+
+The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the absolute size keywords. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties.
+
+The font size keywords are mapped to the deprecated HTML `size` attribute. See the [HTML size attribute](#html_size_attribute) section below).
+
+## Syntax
+
+```plain
+ = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
+```
+
+### Values
+
+The `` data type is defined using a keyword value chosen from the list below.
+
+- `xx-small`
+
+ - : An absolute size 60% the size of `medium`. Mapped to the deprecated `size="1"`.
+
+- `x-small`
+
+ - : An absolute size 75% the size of `medium`.
+
+- `small`
+
+ - : An absolute size 89% the size of `medium`. Mapped to the deprecated `size="2"`.
+
+- `medium`
+
+ - : A user's preferred font size. This value is used as the reference middle value. Mapped to `size="3"`.
+
+- `large`
+
+ - : An absolute size 20% larger than `medium`. Mapped to the deprecated `size="4"`.
+
+- `x-large`
+
+ - : An absolute size 50% larger than `medium`. Mapped to the deprecated `size="5"`.
+
+- `xx-large`
+
+ - : An absolute size twice the size of `medium`. Mapped to the deprecated `size="6"`.
+
+- `xxx-large`
+ - : An absolute size three times the size of `medium`. Mapped to the deprecated `size="7"`.
+
+## Description
+
+Each `` keyword value is sized relative to the `medium` size and the individual device's characteristics, such as device resolution. User agents maintain a table of font sizes for each font, with the `` keywords being the index.
+
+In CSS1 (1996), the scaling factor between adjacent keyword value indexes was 1.5, which was too large. In CSS2 (1998), the scaling factor between adjacent keyword value indexes was 1.2, which created issues for the small values. As a single fixed ratio between adjacent absolute-size keywords was found to be problematic, there is no longer a fixed ratio recommendation. The only recommendation to preserve readability is that the smallest font size should not be less than `9px`.
+
+For each `` keyword value, the following table lists the scaling factor, mapping to [`` to ``](/en-US/docs/Web/HTML/Element/Heading_Elements) headings, and mapping to the deprecated [HTML `size` attribute](#html-size-attribute).
+
+| `` | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
+| --------------------- | -------- | ------- | ----- | ------ | ----- | ------- | -------- | --------- |
+| scaling factor | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
+| HTML headings | h6 | | h5 | h4 | h3 | h2 | h1 | |
+| HTML `size` attribute | 1 | | 2 | 3 | 4 | 5 | 6 | 7 |
+
+### HTML size attribute
+
+The `size` attribute to set a font's size in HTML is deprecated. The attribute value was either an integer between `1` and `7` or a relative value. Relative values were an integer preceded by `+` or `-` to increase or decrease the font size, respectively. A value of `+1` meant increasing the `size` by one and `-2` meant decreasing the size by two, with the computed value clamped at a minimum of `1` and a maximum computed value of `7`.
+
+## Examples
+
+### Comparing the keyword values
+
+```html
+
+ font-size: xx-small;
+ font-size: x-small;
+ font-size: small;
+ font-size: medium;
+ font-size: large;
+ font-size: x-large;
+ font-size: xx-large;
+ font-size: xxx-large;
+
+```
+
+```css
+li {
+ margin-bottom: 0.3em;
+}
+.xx-small {
+ font-size: xx-small;
+}
+.x-small {
+ font-size: x-small;
+}
+.small {
+ font-size: small;
+}
+.medium {
+ font-size: medium;
+}
+.large {
+ font-size: large;
+}
+.x-large {
+ font-size: x-large;
+}
+.xx-large {
+ font-size: xx-large;
+}
+.xxx-large {
+ font-size: xxx-large;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Comparing the keyword values', '100%', 400)}}
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- CSS {{cssxref("relative-size")}} data type
+- CSS {{cssxref("font")}} and {{cssxref("font-size")}} properties
+- [CSS fonts](/en-US/docs/Web/CSS/CSS_fonts) module
diff --git a/files/en-us/web/css/accent-color/index.md b/files/en-us/web/css/accent-color/index.md
index 38356362bfaafcc..ee0dbd1eaae8add 100644
--- a/files/en-us/web/css/accent-color/index.md
+++ b/files/en-us/web/css/accent-color/index.md
@@ -18,6 +18,11 @@ Browsers that support `accent-color` currently apply it to the following HTML el
- [``](/en-US/docs/Web/HTML/Element/progress)
+Each user agent has an accent color, with variations to ensure legibility and
+contrast. That accent color is not used by every user-interface control nor in
+every state of the control. The `accent-color` is only applied to user-interface
+controls that use an accent color in the states where it is applicable.
+
## Syntax
```css
@@ -27,8 +32,8 @@ accent-color: auto;
/* values */
accent-color: darkred;
accent-color: #5729e9;
-accent-color: rgb(0, 200, 0);
-accent-color: hsl(228, 4%, 24%);
+accent-color: rgb(0 200 0);
+accent-color: hsl(228 4% 24%);
/* Global values */
accent-color: inherit;
@@ -93,7 +98,7 @@ input.custom {
## See also
-- The {{HTMLElement("input")}} element
-- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color)
-- The {{cssxref("<color>")}} data type
-- Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
+- {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("caret-color")}}, {{cssxref("color")}}, {{cssxref("column-rule-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}: Other color-related properties
+- {{cssxref("<color>")}}: Related data type
+- {{HTMLElement("input")}}: Related HTML element
+- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color)
diff --git a/files/en-us/web/css/actual_value/index.md b/files/en-us/web/css/actual_value/index.md
index ee188b54233613c..c0340cd9592f264 100644
--- a/files/en-us/web/css/actual_value/index.md
+++ b/files/en-us/web/css/actual_value/index.md
@@ -13,7 +13,7 @@ The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value
The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:
-1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/Cascade), [inheritance](/en-US/docs/Web/CSS/inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value).
+1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value).
2. Next, the [computed value](/en-US/docs/Web/CSS/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/used_value).
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
@@ -29,11 +29,11 @@ The {{glossary("user agent")}} performs four steps to calculate a property's act
- [At-rules](/en-US/docs/Web/CSS/At-rule)
- [Comments](/en-US/docs/Web/CSS/Comments)
- [Specificity](/en-US/docs/Web/CSS/Specificity)
- - [Inheritance](/en-US/docs/Web/CSS/inheritance)
- - [Box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+ - [Inheritance](/en-US/docs/Web/CSS/Inheritance)
+ - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
- [Layout modes](/en-US/docs/Web/CSS/Layout_mode)
- [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model)
- - [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
+ - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
- Values
- [Initial values](/en-US/docs/Web/CSS/initial_value)
- [Computed values](/en-US/docs/Web/CSS/computed_value)
diff --git a/files/en-us/web/css/adjacent_sibling_combinator/index.md b/files/en-us/web/css/adjacent_sibling_combinator/index.md
deleted file mode 100644
index 78e01eebce271e8..000000000000000
--- a/files/en-us/web/css/adjacent_sibling_combinator/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Adjacent sibling combinator
-slug: Web/CSS/Adjacent_sibling_combinator
-page-type: css-combinator
-browser-compat: css.selectors.adjacent_sibling
----
-
-{{CSSRef("Selectors")}}
-
-The **adjacent sibling combinator** (`+`) separates two selectors and matches the second element only if it _immediately_ follows the first element, and both are children of the same parent {{DOMxRef("element")}}.
-
-```css
-/* Paragraphs that come immediately after any image */
-img + p {
- font-weight: bold;
-}
-```
-
-## Syntax
-
-```css
-former_element + target_element { style properties }
-```
-
-## Examples
-
-### CSS
-
-```css
-li:first-of-type + li {
- color: red;
-}
-```
-
-### HTML
-
-```html
-