diff --git a/files/en-us/web/css/reference/properties/link-parameters/index.md b/files/en-us/web/css/reference/properties/link-parameters/index.md new file mode 100644 index 000000000000000..913c4ea791ddbe5 --- /dev/null +++ b/files/en-us/web/css/reference/properties/link-parameters/index.md @@ -0,0 +1,89 @@ +--- +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 +
+ A square with a chartreuse border and a dark green fill. + A square with a red border and a tomato fill. +
+``` + +```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")}} diff --git a/files/en-us/web/css/reference/properties/link-parameters/square.svg b/files/en-us/web/css/reference/properties/link-parameters/square.svg new file mode 100644 index 000000000000000..e529dcb237f22c9 --- /dev/null +++ b/files/en-us/web/css/reference/properties/link-parameters/square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/files/en-us/web/css/reference/values/dashed-ident/index.md b/files/en-us/web/css/reference/values/dashed-ident/index.md index 8261f7c370a84c7..9eda21cf263e4ef 100644 --- a/files/en-us/web/css/reference/values/dashed-ident/index.md +++ b/files/en-us/web/css/reference/values/dashed-ident/index.md @@ -79,6 +79,22 @@ h4 { } ``` +### Using with env() and param() + +When a `` is used in an external resource in an {{cssxref("env")}} CSS function, it can be updated using the {{cssxref("param")}} CSS function. + +```svg + + + +``` + +```css +path:hover { + link-parameters: param(--color, tomato); +} +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/reference/values/env/index.md b/files/en-us/web/css/reference/values/env/index.md index 56a6866ddce0d64..f29ae70821b3414 100644 --- a/files/en-us/web/css/reference/values/env/index.md +++ b/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 + + + +``` + ### Parameters -The `env( , )` function accepts the following parameters: +The `env( | , | )` function accepts the following parameters: - [``](/en-US/docs/Web/CSS/Guides/Environment_variables/Using#browser-defined_environment_variables) - : A {{cssxref("<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("<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( , )` 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("<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. +- [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) + - A ``is a user defined variable that can be used as an identifier in the {{cssxref("param")}} CSS function to update the value. + - `` {{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. +- `` {{optional_inline}} + - : A `` is the default value of the SVG attribute being set dynamically. If the `` 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)). diff --git a/files/en-us/web/css/reference/values/param/index.md b/files/en-us/web/css/reference/values/param/index.md new file mode 100644 index 000000000000000..9a6223b6dae49c0 --- /dev/null +++ b/files/en-us/web/css/reference/values/param/index.md @@ -0,0 +1,147 @@ +--- +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 [``](/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 + +- [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) + - A ``is a user defined variable that is used as an identifier in the {{cssxref("env")}} CSS function to update the value. + +- `` {{optional_inline}} + - : A `` is the value of the attribute being updated. If the `` 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 + + + + +``` + +### Using `link-parameters` property + +In this example the SVG attributes are updated with the {{cssxref("link-parameters")}} CSS property and `param()` function. + +```html +
+ A square with a chartreuse border and a dark green fill. + A square with a slate grey border and a light grey fill. + A square with a fuchsia border and a yellow fill. +
+``` + +```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 +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")}} diff --git a/files/en-us/web/css/reference/values/param/square.svg b/files/en-us/web/css/reference/values/param/square.svg new file mode 100644 index 000000000000000..e529dcb237f22c9 --- /dev/null +++ b/files/en-us/web/css/reference/values/param/square.svg @@ -0,0 +1 @@ + \ No newline at end of file