diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 9b9fa6aba8aa19a..d3a97e36ec48651 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -118,7 +118,7 @@ We use the two custom properties to style the items: } ``` -{{ EmbedLiveSample('examples', '100%', '250px') }} +{{ EmbedLiveSample('Using `@property` to register and use a custom property', '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. @@ -128,6 +128,43 @@ For item two, CSS global keywords are set for both custom properties which are v 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. +### Animating a custom property value + +In this example, we define a custom property called `--progress` using `@property`: this accepts [``](/en-US/docs/Web/CSS/percentage) values and has an initial value of `25%`. We use `--progress` to define the position value of the color stops in a {{cssxref("linear-gradient()")}}, specifying where a green color stops, and black starts. We then animate the value of `--progress` to `100%` over 2.5 seconds, giving the effect of animating a progress bar. + +```html +
+``` + +```css +@property --progress { + syntax: ""; + inherits: false; + initial-value: 25%; +} + +.bar { + display: inline-block; + --progress: 25%; + width: 100%; + height: 5px; + background: linear-gradient( + to right, + #00d230 var(--progress), + #000000 var(--progress) + ); + animation: progressAnimation 2.5s ease infinite; +} + +@keyframes progressAnimation { + to { + --progress: 100%; + } +} +``` + +{{ EmbedLiveSample('Animating a custom property value', '100%', '60px') }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/css_values_and_units/index.md b/files/en-us/web/css/css_values_and_units/index.md index bebe82bb3eb0028..7256c9a1db04aff 100644 --- a/files/en-us/web/css/css_values_and_units/index.md +++ b/files/en-us/web/css/css_values_and_units/index.md @@ -88,7 +88,7 @@ Additional functions, including `calc-mix()`, `crossorigin()`, `first-valid()`, #### Units -- [`%` (percentage)](/en-US/docs/Web/CSS/length#cap) +- [`%` (percentage)](/en-US/docs/Web/CSS/percentage) - [`cap`](/en-US/docs/Web/CSS/length#cap) - [`ch`](/en-US/docs/Web/CSS/length#ch) - [`cm`](/en-US/docs/Web/CSS/length#cm) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md b/files/en-us/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md index 409fca26e97f9ae..e15f5e8c98de6ec 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md @@ -24,8 +24,7 @@ try { Intl.getCanonicalLocales("EN_US"); } catch (err) { console.log(err.toString()); - // Expected output (Firefox/Safari): RangeError: invalid language tag: "EN_US" - // Expected output (Chrome): RangeError: Incorrect locale information provided + // Expected output: RangeError: invalid language tag: "EN_US" } ``` diff --git a/files/en-us/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/en-us/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md index 323d6bb70c7f5ee..9139f65e23f9d33 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md @@ -16,8 +16,7 @@ const deListFormatter = new Intl.ListFormat("de-DE", { type: "disjunction" }); const options = deListFormatter.resolvedOptions(); console.log(options.locale); -// Expected output (Firefox / Safari): "de-DE" -// Expected output (Chrome): "de" +// Expected output: "de-DE" console.log(options.style); // Expected output: "long" diff --git a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md index fa27580811b3e0a..95a0ab1d96ffb65 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md @@ -16,8 +16,7 @@ const numberFormat = new Intl.NumberFormat("de-DE"); const options = numberFormat.resolvedOptions(); console.log(options.locale); -// Expected output (Firefox / Safari): "de-DE" -// Expected output (Chrome): "de" +// Expected output: "de-DE" console.log(options.numberingSystem); // Expected output: "latn" diff --git a/files/en-us/web/javascript/reference/global_objects/regexp/tostring/index.md b/files/en-us/web/javascript/reference/global_objects/regexp/tostring/index.md index 250ef13140831bb..a00ef3c5d74db48 100644 --- a/files/en-us/web/javascript/reference/global_objects/regexp/tostring/index.md +++ b/files/en-us/web/javascript/reference/global_objects/regexp/tostring/index.md @@ -22,7 +22,7 @@ console.log(new RegExp("bar", "g").toString()); // Expected output: "/bar/g" console.log(new RegExp("\n", "g").toString()); -// Expected output (if your browser supports escaping): "/\n/g" +// Expected output: "/\n/g" console.log(new RegExp("\\n", "g").toString()); // Expected output: "/\n/g"