link parameters property & param() function

files/en-us/web/css/reference/properties/link-parameters/index.md

@@ -0,0 +1,83 @@
+---
+title: "`link-parameters` CSS property"
+short-title: link-parameters
+slug: Web/CSS/Reference/Properties/link-parameters
+page-type: css-property
+browser-compat: css.properties.link-parameters
+sidebar: cssref
+---
+
+The **`link-parameters`** [CSS](/en-US/docs/Web/CSS) property sets values of external resources, such as SVGs, whose attributes have been set with the {{cssxref("env")}} CSS function
+
+## Syntax
+
+```css-nolint
+/* single value */
+link-parameters: param(--color, red);
+
+/* multiple values */
+link-parameters:
+  param(--color1, red),
+  param(--color2, blue),
+  param(--color3, green);
+```
+
+## Values
+
+- `none`
+  - : No link parameters are specified.
+
+- {{cssxref("param")}}
+  - : A list of one or more link parameters.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Example
+
+### Updating the colors of an external SVG file
+
+In this example the original SVG, on the left, is a square with `stroke` attribute set with `env(--color1, chartreuse)` and `fill` attribute set with `env(--color2, darkgreen)`. The `link-parameters` property is used to update both of these attributes on the updated square, on the right, with multiple {{cssxref("param")}} CSS functions.
+
+```html
+<div class="squares">
+  <img class="original" src="square.svg" alt="A square with a chartreuse border and a dark green fill." />
+  <img class="updated" src="square.svg" alt="A square with a red border and a tomato fill." />
+</div>
+```
+
+```css hidden
+.squares {
+  height: 200px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+img {
+  height: 100%;
+}
+```
+
+```css-nolint
+.updated {
+  link-parameters:
+    param(--color1, red),
+    param(--color2, tomato);
+}
+```
+
+{{EmbedLiveSample('updating_the_colors_of_an_external_SVG_file', '100%', '210px')}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("param")}}
+- {{cssxref("env")}}

files/en-us/web/css/reference/values/dashed-ident/index.md

@@ -79,6 +79,22 @@ h4 {
 }
 ```
 
+### Using with env() and param()
+
+When a `<dashed-dent>` is used in an external resource in an {{cssxref("env")}} CSS function, it can be updated using the {{cssxref("param")}} CSS function.
+
+```svg
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="env(--color, black)" d="..." />
+</svg>
+```
+
+```css
+path:hover {
+  link-parameters: param(--color, tomato);
+}
+```
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/css/reference/values/env/index.md

@@ -7,7 +7,7 @@ browser-compat: css.types.env
 sidebar: cssref
 ---
 
-The **`env()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used to insert the value of a user-agent defined [environment variable](/en-US/docs/Web/CSS/Guides/Environment_variables/Using) into your CSS.
+The **`env()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used to insert the value of a user-agent defined [environment variable](/en-US/docs/Web/CSS/Guides/Environment_variables/Using) into your CSS. Alternatively `env()` can be used to make dynamic values in external SVG files which updated using the {{cssxref("link-parameters")}} CSS property.
 
 ## Syntax
 
@@ -23,9 +23,15 @@ env(titlebar-area-y, 40px);
 env(viewport-segment-width 0 0, 40%);
 ```
 
+```svg
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="env(--color, black)" d="..." />
+</svg>
+```
+
 ### Parameters
 
-The `env( <environment-variable>, <fallback> )` function accepts the following parameters:
+The `env( <environment-variable> | <dashed-ident>, <fallback> | <declaration-value> )` function accepts the following parameters:
 
 - [`<environment-variable>`](/en-US/docs/Web/CSS/Guides/Environment_variables/Using#browser-defined_environment_variables)
   - : A {{cssxref("&lt;custom-ident>")}} specifying the name of the environment variable to be inserted. If the name provided represents an array-like environment variable, the name is followed by {{cssxref("&lt;integer>")}} values identifying the specific instance the name is referencing. The case-sensitive environment variable name can be one of the following:
@@ -42,9 +48,15 @@ The `env( <environment-variable>, <fallback> )` function accepts the following p
     - `viewport-segment-width`, `viewport-segment-height`, `viewport-segment-top`, `viewport-segment-right`, `viewport-segment-bottom`, `viewport-segment-left`
       - : The dimensions and offset positions of specific viewport segments. The `viewport-segment-*` keyword is followed by two space-separated {{cssxref("&lt;integer>")}} values that indicate the segment's horizontal and vertical position, or indices. The viewport-segment keywords are only defined when the viewport is made up of two or more segments, as with foldable or hinged devices.
 
+- [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident)
+  - A `<dashed-ident>`is a user defined variable that can be used as an identifier in the {{cssxref("param")}} CSS function to update the value.
+
 - `<fallback>` {{optional_inline}}
   - : A fallback value to be inserted if the environment variable referenced in the first argument does not exist. Everything after the first comma is deemed to be the fallback value. This can be a single value, another `env()` function, or a comma-separated list of values.
 
+- `<declaration_value>` {{optional_inline}}
+  - : A `<declaration_value>` is the default value of the SVG attribute being set dynamically. If the `<declaration-value>` is omitted, it represents an empty value.
+
 ## Description
 
 The `env()` function is used to insert the value of a globally-scoped, [user-agent-defined environment variable](/en-US/docs/Web/CSS/Guides/Environment_variables/Using#browser-defined_environment_variables) into your CSS. The `env()` function can be used as a property value or in place of any part of a property value or descriptor (for example, in [Media query rules](/en-US/docs/Web/CSS/Reference/At-rules/@media)).

files/en-us/web/css/reference/values/param/index.md

@@ -0,0 +1,138 @@
+---
+title: "`param()` CSS function"
+short-title: param()
+slug: Web/CSS/Reference/Values/param
+page-type: css-function
+browser-compat: css.types.param
+sidebar: cssref
+---
+
+The **`param()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to set link parameters. This can be done using the {{cssxref("link-parameters")}} CSS function, in the fragment URL of an external resource, or in the [`<url-modifier>`](/en-US/docs/Web/CSS/Reference/Values/url_function#url-modifier) of the `url()` CSS function.
+
+## Syntax
+
+```css
+/* a single value */
+param(--color, red);
+
+/* multiple values */
+param(--color1, red),
+param(--color2, blue),
+param(--color3, green);
+```
+
+## Values
+
+- [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident)
+  - A `<dashed-ident>`is a user defined variable that is used as an identifier in the {{cssxref("env")}} CSS function to update the value.
+
+- `<declaration_value>` {{optional_inline}}
+  - : A `<declaration_value>` is the value of the attribute being updated. If the `<declaration-value>` is omitted, it represents an empty value.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Examples
+
+All of the following examples use the same SVG file, which has attributes set with {{cssxref("env")}} CSS function.
+
+```svg
+<!-- example of the code in the external SVG file -->
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    width="100"
+    height="100"
+    stroke="env(--color1, chartreuse)"
+    stroke-width="10"
+    fill="env(--color2, darkgreen)"
+   />
+</svg>
+```
+
+### Using `link-parameters` property
+
+In this example the SVG attributes are updated with the {{cssxref("link-parameters")}} CSS property and `param()` function.
+
+```html
+<div class="squares">
+  <img class="original" src="square.svg" alt="A square with a chartreuse border and a dark green fill." />
+  <img class="greyscale" src="square.svg" alt="A square with a slate grey border and a light grey fill." />
+  <img class="high-contrast" src="square.svg" alt="A square with a fuchsia border and a yellow fill." />
+</div>
+```
+
+```css hidden
+.squares {
+  height: 200px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+img {
+  height: 100%;
+}
+```
+
+```css-nolint
+.greyscale {
+  link-parameters:
+    param(--color1, slategrey),
+    param(--color2, lightgrey);
+  &:hover {
+    link-parameters:
+      param(--color1, lightgrey),
+      param(--color2, slategrey);
+  }
+}
+.high-contrast {
+  link-parameters:
+    param(--color1, fuchsia),
+    param(--color2, yellow);
+  &:hover {
+    link-parameters:
+      param(--color1, yellow),
+      param(--color2, fuchsia);
+  }
+}
+```
+
+{{EmbedLiveSample('using_link-parameters_property', '100%', '210px')}}
+
+### Passing `param()` into URL modifier
+
+In this example the SVG attributes are updated by passing the `param()` function into the URL fragment of the [`src`](/en-US/docs/Web/HTML/Reference/Elements/img#src) attribute of the {{htmlelement("img")}} HTML element.
+
+```html-nolint
+<img
+  src="square.svg#param(--color1, slategrey)&param(--color2, lightgrey)"
+  alt="A square with a slate grey border and a light grey fill."
+/>
+```
+
+### Using `param()` with `background-image` property
+
+In this example the SVG attributes are updated by passing the `param()` function into the {{cssxref("url","url()")}} data type of the {{cssxref("background-image")}} CSS property.
+
+```css-nolint
+.foo {
+  background-image: url(
+    "square.svg"
+    param(--color1, slategrey),
+    param(--color2, lightgrey)
+  );
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("link-parameters")}}
+- {{cssxref("env")}}