Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ image.src = "cat.png";

{{EmbedLiveSample("Canvas context scale", "", 520)}}

To fix this, you have to ensure that the image pixels are always drawn at integer multiples of canvas pixels. That is, when you call `drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`, `dWidth` needs to be equal to `sWidth / xScale * n`, where `xScale` is the x scale factor for the context (1.0 if you haven't called `scale()`), and `n` is an integer (1, 2, 3, ...). The same applies to `dHeight`. So if you want to draw a 128x128 pixel image on a canvas that has been scaled by 0.8, you can only draw it at sizes like 160 (128 / 0.8 \* 1), 320 (128 / 0.8 \* 2), etc.
To fix this, you have to ensure that the image pixels are always drawn at integer multiples of canvas pixels. That is, when you call `drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`, `dWidth` needs to be equal to `sWidth / xScale * n`, where `xScale` is the x scale factor for the context (1.0 if you haven't called `scale()`), and `n` is an integer (1, 2, 3, ...). The same applies to `dHeight`. So if you want to draw a 128x128 pixel image on a canvas that has been scaled by 0.8, you can only draw it at sizes like 160 (128 / 0.8 × 1), 320 (128 / 0.8 × 2), etc.

```html hidden live-sample___canvas_context_scale_correct
<canvas id="game" width="128" height="128">A cat</canvas>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/guaranteed_invalid_value/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar: glossarysidebar

In CSS the guaranteed-invalid value is {{CSSXref("initial")}}.

When a [custom property](/en-US/docs/Web/CSS/--*)'s value is the guaranteed-invalid value, the {{CSSXref("var")}} function cannot use it for substitution. Attempting to do so makes the declaration _invalid at computed-value time_, unless a valid fallback is specified.
When a [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*)'s value is the guaranteed-invalid value, the {{CSSXref("var")}} function cannot use it for substitution. Attempting to do so makes the declaration _invalid at computed-value time_, unless a valid fallback is specified.

## See also

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/128/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ This article provides information about the changes in Firefox 128 that affect d
- {{domxref('RTCRtpTransceiver.setCodecPreferences()')}} is now supported for setting the codecs that a WebRTC local peer is able to use for decoding received data, in its preferred codec order. Web applications can use this to cause the remote peer to choose a preferred codec, and to disable the negotiation of specific codecs — including those used for retransmission, redundancy, and forward error correction. ([Firefox bug 1396922](https://bugzil.la/1396922)).
- Serialization of [declarative shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html), including the methods {{domxref('ShadowRoot.getHTML()')}} and {{domxref('Element.getHTML()')}}, and associated properties {{domxref('ShadowRoot.serializable')}} and {{domxref('HTMLTemplateElement.shadowRootSerializable')}}.
- The [`CSSPropertyRule`](/en-US/docs/Web/API/CSSPropertyRule) interface is now supported by default and represents a CSS [`@property`](/en-US/docs/Web/CSS/@property) at-rule. The interface allows you to get the values, including [`name`](/en-US/docs/Web/API/CSSPropertyRule/name), [`syntax`](/en-US/docs/Web/API/CSSPropertyRule/syntax), [`inherits`](/en-US/docs/Web/API/CSSPropertyRule/inherits), and [`initialValue`](/en-US/docs/Web/API/CSSPropertyRule/initialValue), of CSS custom properties defined using the `@property` at-rule ([Firefox bug 1864818](https://bugzil.la/1864818)).
- The [`registerProperty()`](/en-US/docs/Web/API/CSS/registerProperty_static) method is now supported by default. It allows you to define [CSS custom properties](/en-US/docs/Web/CSS/--*) via JavaScript, which is similar to using the `@property` at-rule in CSS ([Firefox bug 1864818](https://bugzil.la/1864818)).
- The [`registerProperty()`](/en-US/docs/Web/API/CSS/registerProperty_static) method is now supported by default. It allows you to define [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*) via JavaScript, which is similar to using the `@property` at-rule in CSS ([Firefox bug 1864818](https://bugzil.la/1864818)).

#### Media, WebRTC, and Web Audio

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/css/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ _The CSS interface is a utility interface and no object of this type can be crea
_No inherited static methods_.

- {{DOMxRef("CSS/registerProperty_static", "CSS.registerProperty()")}}
- : Registers [custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.
- : Registers [custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.
- {{DOMxRef("CSS/supports_static", "CSS.supports()")}}
- : Returns a boolean value indicating if the pair _property-value_, or the condition, given in parameter is supported.
- {{DOMxRef("CSS/escape_static", "CSS.escape()")}}
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/css/registerproperty_static/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ browser-compat: api.CSS.registerProperty_static
{{APIRef("CSSOM")}}

The **`CSS.registerProperty()`** static method registers
[custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking, default
[custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*), allowing for property type checking, default
values, and properties that do or do not inherit their value.

Registering a custom property allows you to tell the browser how the custom property
Expand Down Expand Up @@ -56,7 +56,7 @@ CSS.registerProperty(propertyDefinition)

## Examples

The following will register a [custom property](/en-US/docs/Web/CSS/--*),
The following will register a [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*),
`--my-color`, using `registerProperty()`, as a color, give it a
default value, and have it not inherit its value:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ browser-compat: api.CSS.registerProperty_static

{{DefaultAPISidebar("CSS Properties and Values API")}}

The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows the registration of [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.
The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows the registration of [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.

## Registering a custom property

Registering a custom property allows you to tell the browser how the custom property should behave; what types are allowed, whether the custom property inherits its value, and what the default value of the custom property is. There are two ways to register a property, in [JavaScript](/en-US/docs/Web/JavaScript) or in [CSS](/en-US/docs/Web/CSS).

### CSS.registerProperty

The following will register a [custom property](/en-US/docs/Web/CSS/--*) named `--my-prop` using {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}}. `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:
The following will register a [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) named `--my-prop` using {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}}. `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:

```js
window.CSS.registerProperty({
Expand All @@ -28,7 +28,7 @@ window.CSS.registerProperty({

### @property

The same registration can take place in CSS. The following will register a [custom property](/en-US/docs/Web/CSS/--*) named `--my-prop` using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:
The same registration can take place in CSS. The following will register a [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) named `--my-prop` using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:

```css
@property --my-prop {
Expand Down
8 changes: 4 additions & 4 deletions files/en-us/web/api/css_properties_and_values_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ browser-compat:

{{DefaultAPISidebar("CSS Properties and Values API")}}

The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows developers to explicitly define their [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.
The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs — allows developers to explicitly define their [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*), allowing for property type checking, default values, and properties that do or do not inherit their value.

## Interfaces

- {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}}
- : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/--*). Access this interface through {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} in [JavaScript](/en-US/docs/Web/JavaScript).
- : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*). Access this interface through {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} in [JavaScript](/en-US/docs/Web/JavaScript).
- {{cssxref('@property')}}
- : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/--*). Access this interface through {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) in [CSS](/en-US/docs/Web/CSS).
- : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*). Access this interface through {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) in [CSS](/en-US/docs/Web/CSS).

## Examples

The following will register a [custom property](/en-US/docs/Web/CSS/--*) named `--my-color` using {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} in [JavaScript](/en-US/docs/Web/JavaScript). `--my-color` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:
The following will register a [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) named `--my-color` using {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} in [JavaScript](/en-US/docs/Web/JavaScript). `--my-color` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value:

```js
window.CSS.registerProperty({
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/css_typed_om_api/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ There are other types available:
- An [`<image>`](/en-US/docs/Web/CSS/image) will return a {{domxref('CSSImageValue')}}.
- A [`<color>`](/en-US/docs/Web/CSS/color_value) would return a {{domxref('CSSStyleValue')}}.
- A {{cssxref('transform')}} returns a `CSSTransformValue`.
- A [custom property](/en-US/docs/Web/CSS/--*) returns a {{domxref('CSSUnparsedValue')}}.
- A [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) returns a {{domxref('CSSUnparsedValue')}}.

You can use a `CSSUnitValue` or `CSSKeywordValue` to create other objects.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/css_typed_om_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ The {{domxref('CSSKeywordValue')}} interface of the CSS Typed Object Model API c
- {{domxref('CSSUnitValue')}}
- : An interface representing numeric values that can be represented as a single unit, or a named number and percentage.
- {{domxref('CSSUnparsedValue')}}
- : Represents property values that reference [custom properties](/en-US/docs/Web/CSS/--*). It consists of a list of string fragments and variable references.
- : Represents property values that reference [custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*). It consists of a list of string fragments and variable references.

## Specifications

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ new CSSVariableReferenceValue(variable, fallback)
### Parameters

- `variable`
- : A [custom property name](/en-US/docs/Web/CSS/--*).
- : A [custom property name](/en-US/docs/Web/CSS/Reference/Properties/--*).
- `fallback` {{optional_inline}}
- : A [custom property fallback value](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties#custom_property_fallback_values).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ browser-compat: api.CSSVariableReferenceValue.variable
{{APIRef("CSSOM")}}

The **`variable`** property of the
{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property name](/en-US/docs/Web/CSS/--*) of the
{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property name](/en-US/docs/Web/CSS/Reference/Properties/--*) of the
{{domxref("CSSVariableReferenceValue")}}.

## Value

A string beginning with `--` (that is, a [custom property name](/en-US/docs/Web/CSS/--*)).
A string beginning with `--` (that is, a [custom property name](/en-US/docs/Web/CSS/Reference/Properties/--*)).

## Specifications

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/htmlscriptelement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
- {{domxref("HTMLScriptElement.text")}}
- : A property that represents the inline text content of the {{HTMLElement("script")}} element.
The property accepts either a {{domxref("TrustedScript")}} object or a string.
It acts the same way as the [textContent](#textcontent) property.
It acts the same way as the [`textContent`](/en-US/docs/Web/API/HTMLScriptElement/textContent) property.
- {{domxref("HTMLScriptElement.textContent")}}
- : A property that represents the inline text content of the {{HTMLElement("script")}} element.
The property is redefined from {{domxref("Node/textContent","Node")}} to support {{domxref("TrustedScript")}} as an input.
On this element it behaves exactly like the [text](#text) property.
On this element it behaves exactly like the [`text`](/en-US/docs/Web/API/HTMLScriptElement/text) property.
- {{domxref("HTMLScriptElement.type")}}
- : A string representing the type of the script.
It reflects the `type` attribute of the {{HTMLElement("script")}} element.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/ovr_multiview2/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ For more information, see also:

- [Multiview on WebXR](https://error.ghost.org/)
- [Multiview in babylon.js](https://doc.babylonjs.com/features/featuresDeepDive/cameras/multiViewsPart1)
- [Optimizing Virtual Reality: Understanding Multiview](https://community.arm.com/arm-community-blogs/b/mobile-graphics-and-gaming-blog/posts/optimizing-virtual-reality-understanding-multiview)
- [Optimizing Virtual Reality: Understanding Multiview](https://developer.arm.com/community/arm-community-blogs/b/mobile-graphics-and-gaming-blog/posts/optimizing-virtual-reality-understanding-multiview)
- [Multiview WebGL Rendering for Meta Quest](https://developers.meta.com/horizon/documentation/web/web-multiview/)

WebGL extensions are available using the {{domxref("WebGLRenderingContext.getExtension()")}} method. For more information, see also [Using Extensions](/en-US/docs/Web/API/WebGL_API/Using_Extensions) in the [WebGL tutorial](/en-US/docs/Web/API/WebGL_API/Tutorial).
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/@function/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The different parts of the `@function` syntax are as follows:
- `<function-parameter>#?` {{optional_inline}}
- : Zero or more function parameter definitions. Multiple parameter definitions are separated by commas. Each parameter consists of:
- `--param-name`
- : A [CSS custom property](/en-US/docs/Web/CSS/--*) name to identify the parameter, a [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. Function parameters can be considered custom properties that are locally scoped to the function body.
- : A [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) name to identify the parameter, a [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. Function parameters can be considered custom properties that are locally scoped to the function body.
- `<css-type>` {{optional_inline}}
- : A CSS data type or a {{cssxref("type()")}} function that defines the accepted data type(s) for the parameter. If this is not specified, any data type will be valid for the parameter (the same as specifying `type(*)`).
- `<default-value>` {{optional_inline}}
Expand Down Expand Up @@ -310,7 +310,7 @@ p {

## See also

- [CSS custom properties](/en-US/docs/Web/CSS/--*)
- [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*)
- {{cssxref("&lt;dashed-function>")}} data type
- [`type()`](/en-US/docs/Web/CSS/type) function
- [Using CSS custom functions](/en-US/docs/Web/CSS/CSS_custom_functions_and_mixins/Using_custom_functions)
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/@property/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: css.at-rules.property
sidebar: cssref
---

The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) set of APIs. It allows developers to explicitly define [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) set of APIs. It allows developers to explicitly define [CSS custom properties](/en-US/docs/Web/CSS/Reference/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 JavaScript. Valid `@property` rules result in a registered custom property, which is similar to calling {{domxref('CSS.registerProperty_static', 'registerProperty()')}} with equivalent parameters.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/@property/inherits/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: css.at-rules.property.inherits
sidebar: cssref
---

The **`inherits`** [CSS](/en-US/docs/Web/CSS) descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) controls whether or not the registered [CSS custom property](/en-US/docs/Web/CSS/--*) inherits by default.
The **`inherits`** [CSS](/en-US/docs/Web/CSS) descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) controls whether or not the registered [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) inherits by default.
It is a required descriptor; if missing or invalid, the entire `@property` rule is invalid and ignored.

## Syntax
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/@property/initial-value/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: css.at-rules.property.initial-value
sidebar: cssref
---

The **`initial-value`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) specifies the initial value for the registered [CSS custom property](/en-US/docs/Web/CSS/--*).
The **`initial-value`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) specifies the initial value for the registered [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*).
It is a required descriptor unless the {{cssxref("@property/syntax", "syntax")}} descriptor value is the universal syntax (`*`).
If required but missing or invalid, the entire `@property` rule is invalid and ignored.

Expand Down
Loading