diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index 26627b6e667b437..64b062353e3144b 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -545,7 +545,6 @@ QPACK QTFF qtrs quantizer -quarternion querysets quicklinks quickmenu diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md index ede07caf3652d98..4e0dae10673f47b 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipy/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -28,7 +28,7 @@ A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). ### Inverting a triangle -In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Reference/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The view box has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be withing the viewport after it is transformed. +In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Reference/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The view box has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be within the viewport after it is transformed. #### HTML diff --git a/files/en-us/web/api/fetchlater_api/fetchlater_quotas/index.md b/files/en-us/web/api/fetchlater_api/fetchlater_quotas/index.md index 81cf4bc80e03088..604af6d348b3e6e 100644 --- a/files/en-us/web/api/fetchlater_api/fetchlater_quotas/index.md +++ b/files/en-us/web/api/fetchlater_api/fetchlater_quotas/index.md @@ -48,7 +48,7 @@ By default, subframes of subframes are not allocated a quota and so cannot use ` When quotas are exceeded, a `QuotaExceededError` is thrown when the {{domxref('Window.fetchLater()','fetchLater()')}} method is called to initiate the deferred request. -Permissions Policy checks are not discernable from quota checks. Calling `fetchLater()` will throw a `QuotaExceededError` both if the quota is actually exceeded and if the quota was restricted for that origin via a Permissions Policy. +Permissions Policy checks are not discernible from quota checks. Calling `fetchLater()` will throw a `QuotaExceededError` both if the quota is actually exceeded and if the quota was restricted for that origin via a Permissions Policy. Callers of `fetchLater()` should be defensive and catch `QuotaExceededError` errors in almost all cases, especially if they embed third-party JavaScript. diff --git a/files/en-us/web/api/gamepadpose/index.md b/files/en-us/web/api/gamepadpose/index.md index eb4302ddfa08a92..6e9f45a024d7c7e 100644 --- a/files/en-us/web/api/gamepadpose/index.md +++ b/files/en-us/web/api/gamepadpose/index.md @@ -26,7 +26,7 @@ This interface is accessible through the {{domxref("Gamepad.pose")}} property. - {{domxref("GamepadPose.linearAcceleration")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns the linear acceleration of the {{domxref("Gamepad")}}, in meters per second per second. - {{domxref("GamepadPose.orientation")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : Returns the orientation of the {{domxref("Gamepad")}}, as a quarternion value. + - : Returns the orientation of the {{domxref("Gamepad")}}, as a quaternion value. - {{domxref("GamepadPose.angularVelocity")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns the angular velocity of the {{domxref("Gamepad")}}, in radians per second. - {{domxref("GamepadPose.angularAcceleration")}} {{ReadOnlyInline}} {{Experimental_Inline}} diff --git a/files/en-us/web/api/gamepadpose/orientation/index.md b/files/en-us/web/api/gamepadpose/orientation/index.md index 07e0ffd107b818c..fdaeddad6bc4689 100644 --- a/files/en-us/web/api/gamepadpose/orientation/index.md +++ b/files/en-us/web/api/gamepadpose/orientation/index.md @@ -10,7 +10,7 @@ browser-compat: api.GamepadPose.orientation {{APIRef("WebVR API")}}{{SeeCompatTable}} -The **`orientation`** read-only property of the {{domxref("GamepadPose")}} interface returns the orientation of the {{domxref("Gamepad")}}, as a quarternion value. +The **`orientation`** read-only property of the {{domxref("GamepadPose")}} interface returns the orientation of the {{domxref("Gamepad")}}, as a quaternion value. The value is a {{jsxref("Float32Array")}}, made up of the following values: diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md index 1aa85c7d67f5888..75efd45c896b64e 100644 --- a/files/en-us/web/api/popover_api/using/index.md +++ b/files/en-us/web/api/popover_api/using/index.md @@ -434,6 +434,8 @@ For example, you could use a combination of {{cssxref("anchor()")}} function val ```css .my-popover { + margin: 0; + inset: auto; bottom: calc(anchor(top) + 20px); justify-self: anchor-center; } @@ -443,10 +445,14 @@ Or you could use a {{cssxref("position-area")}} property: ```css .my-popover { + margin: 0; + inset: auto; position-area: top; } ``` +When using {{cssxref("position-area")}} or {{cssxref("anchor()")}} to position popovers, be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those, as in the examples above. The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). + See [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#positioning_elements_relative_to_their_anchor) for more details on associating anchor and positioned elements, and positioning elements relative to their anchor. > [!NOTE] diff --git a/files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md b/files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md index ad9304eae103c16..d0f3c19c329ecac 100644 --- a/files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md +++ b/files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md @@ -176,9 +176,9 @@ function log(text) { The code is similar to the previous example, except that we check a particular returned capability, and we use `try...catch` to catch the case where `getClientCapabilities()` is not supported. ```js -checkisUserVerifyingPlatformAuthenticatorAvailable(); +checkIsUserVerifyingPlatformAuthenticatorAvailable(); -async function checkisUserVerifyingPlatformAuthenticatorAvailable() { +async function checkIsUserVerifyingPlatformAuthenticatorAvailable() { try { const capabilities = await PublicKeyCredential.getClientCapabilities(); diff --git a/files/en-us/web/api/sanitizer/index.md b/files/en-us/web/api/sanitizer/index.md index 3509abeaab74317..355b2abebe5b48f 100644 --- a/files/en-us/web/api/sanitizer/index.md +++ b/files/en-us/web/api/sanitizer/index.md @@ -11,7 +11,7 @@ browser-compat: api.Sanitizer The **`Sanitizer`** interface of the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) defines a configuration object that specifies what elements, attributes and comments are allowed or should be removed when inserting strings of HTML into an {{domxref("Element")}} or {{domxref("ShadowRoot")}}, or when parsing an HTML string into a {{domxref("Document")}}. -A `Sanitizer` instance is effectively a wrapper around a {{domxref("SanitizerConfig")}}, and can be passed as a configuration alterative in the same [sanitization methods](/en-US/docs/Web/API/HTML_Sanitizer_API#sanitization_methods): +A `Sanitizer` instance is effectively a wrapper around a {{domxref("SanitizerConfig")}}, and can be passed as a configuration alternative in the same [sanitization methods](/en-US/docs/Web/API/HTML_Sanitizer_API#sanitization_methods): - {{domxref("Element/setHTML","setHTML()")}} or {{domxref("Element/setHTMLUnsafe","setHTMLUnsafe()")}} on {{domxref("Element")}}. - {{domxref("ShadowRoot/setHTML","setHTML()")}} or {{domxref("ShadowRoot/setHTMLUnsafe","setHTMLUnsafe()")}} on {{domxref("ShadowRoot")}}. diff --git a/files/en-us/web/api/vrpose/index.md b/files/en-us/web/api/vrpose/index.md index 3316a0be4a1b782..5d8dad47866e5d7 100644 --- a/files/en-us/web/api/vrpose/index.md +++ b/files/en-us/web/api/vrpose/index.md @@ -26,7 +26,7 @@ This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and - {{domxref("VRPose.linearAcceleration")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} - : Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRFrameData.timestamp")}}, in meters per second per second. - {{domxref("VRPose.orientation")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} - - : Returns the orientation of the sensor at the current {{domxref("VRFrameData.timestamp")}}, as a quarternion value. + - : Returns the orientation of the sensor at the current {{domxref("VRFrameData.timestamp")}}, as a quaternion value. - {{domxref("VRPose.angularVelocity")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} - : Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRFrameData.timestamp")}}, in radians per second. - {{domxref("VRPose.angularAcceleration")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} diff --git a/files/en-us/web/api/vrpose/orientation/index.md b/files/en-us/web/api/vrpose/orientation/index.md index 6dc62bab5792a81..bef38334b80f60e 100644 --- a/files/en-us/web/api/vrpose/orientation/index.md +++ b/files/en-us/web/api/vrpose/orientation/index.md @@ -11,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 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 quaternion 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/). diff --git a/files/en-us/web/css/@media/shape/index.md b/files/en-us/web/css/@media/shape/index.md index 6333560c4cc04e6..e3c348ef4757a58 100644 --- a/files/en-us/web/css/@media/shape/index.md +++ b/files/en-us/web/css/@media/shape/index.md @@ -78,3 +78,4 @@ Currently, no browsers support this feature. - [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - [@media](/en-US/docs/Web/CSS/@media) +- [CSS round display](/en-US/docs/Web/CSS/CSS_round_display) module diff --git a/files/en-us/web/css/anchor/index.md b/files/en-us/web/css/anchor/index.md index 44e879a56f0c86b..323c7a53219d15b 100644 --- a/files/en-us/web/css/anchor/index.md +++ b/files/en-us/web/css/anchor/index.md @@ -131,6 +131,19 @@ The below table lists the inset properties, and the `` parameter va | `inset-block-start` and `inset-block-end` | `start`, `end`, `self-start`, and `self-end`
`top` and `bottom` in horizontal writing modes
`left` and `right` in vertical writing modes | | `inset-inline-start` and `inset-inline-end` | `start`, `end`, `self-start`, and `self-end`
`left` and `right` in horizontal writing modes
`top` and `bottom` in vertical writing modes | +### Using `anchor()` to position popovers + +When using `anchor()` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those: + +```css +.positionedPopover { + margin: 0; + inset: auto; +} +``` + +The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). + ### Using `anchor()` inside `calc()` When the `anchor()` function refers to a side of the default anchor, you can include a {{cssxref("margin")}} to create spacing between the edges of the anchor and positioned element as needed. Alternatively, you can include the `anchor()` function within a {{cssxref("calc")}} function to add spacing. diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index c05921de4059924..1b0cea3f2637b1e 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -179,6 +179,6 @@ svg { ## See also - {{cssxref("<shape-outside>")}} -- [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes) -- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) -- [SVG Path Syntax Illustrated Guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) +- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module +- [Overview of CSS shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) +- [The SVG `path` syntax: an illustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) via CSS-tricks (2021) diff --git a/files/en-us/web/css/css_round_display/index.md b/files/en-us/web/css/css_round_display/index.md new file mode 100644 index 000000000000000..5944813d5893e0e --- /dev/null +++ b/files/en-us/web/css/css_round_display/index.md @@ -0,0 +1,46 @@ +--- +title: CSS round display +slug: Web/CSS/CSS_round_display +page-type: css-module +spec-urls: https://drafts.csswg.org/css-round-display/ +sidebar: cssref +--- + +The **CSS round display** module defines CSS extensions to support a round display, such as wrist-watches, to help developers build web pages suitable for those devices. + +## Reference + +### Properties + +The CSS round display module introduces the `border-boundary` and `shape-inside` properties. Currently, no browsers support these features. + +### Descriptors + +- {{cssxref("@media/shape", "shape")}} ({{cssxref("@media")}} feature) + +## Guides + +- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) + - : Introduces media queries, their syntax, and the operators and media features used to construct media query expressions. + +- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) + - : Defines basic shapes and how to debug them with developer tools. + +## Related concepts + +- {{cssxref("@media")}} at-rule +- {{cssxref("offset-distance")}} property +- {{cssxref("offset-path")}} property +- {{cssxref("offset-position")}} property +- [`viewport-fit`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#viewport-fit) value for {{htmlelement("meta")}} `content` attribute + +## Specifications + +{{Specifications}} + +## See also + +- {{cssxref("basic-shape")}} data-type +- {{cssxref("shape-outside")}} property +- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module +- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module diff --git a/files/en-us/web/css/position-area/index.md b/files/en-us/web/css/position-area/index.md index dcd3e314f68f560..4411420a9aa0066 100644 --- a/files/en-us/web/css/position-area/index.md +++ b/files/en-us/web/css/position-area/index.md @@ -115,6 +115,19 @@ If the positioned element is placed in a single top-center, bottom-center, or ce If the positioned element is placed in any other single grid square (say with `position-area: top left`) or is set to span two or more grid squares (for example using `position-area: bottom span-all`), it will align with the specified grid area but behave as if it has a {{cssxref("width")}} of `max-content` set on it. It is being sized according to its containing block size, which is the size imposed on it when it was set to `position: fixed`. It will stretch as wide as the text content, although it may also be constrained by the edge of the ``. +### Using `position-area` to position popovers + +When using `position-area` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those: + +```css +.my-popover { + margin: 0; + inset: auto; +} +``` + +The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258). + ## Formal definition {{cssinfo}} diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md index 3fbe3afe1abac51..a2b57bb5adf3659 100644 --- a/files/en-us/web/html/reference/elements/label/index.md +++ b/files/en-us/web/html/reference/elements/label/index.md @@ -12,12 +12,12 @@ The **`