diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 81f819342d4d1a1..6bf7db646021b31 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -561,7 +561,7 @@ /en-US/docs/CSS/Using_CSS_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds /en-US/docs/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms /en-US/docs/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions -/en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties +/en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties /en-US/docs/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries /en-US/docs/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/Value_definition_syntax /en-US/docs/Web/CSS/Value_definition_syntax @@ -11973,8 +11973,9 @@ /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /en-US/docs/Web/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts +/en-US/docs/Web/CSS/Using_CSS_custom_properties /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties /en-US/docs/Web/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries -/en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties +/en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties /en-US/docs/Web/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries /en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/CSS/_image /en-US/docs/Web/CSS/image/image diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 55b52e6fc682b53..ad6849933a014c0 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -76243,6 +76243,66 @@ "modified": "2020-07-07T12:03:44.891Z", "contributors": ["wbamberg", "mfluehr"] }, + "Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties": { + "modified": "2020-10-15T21:21:03.349Z", + "contributors": [ + "mfuji09", + "Geo1088", + "chrisdavidmills", + "Awk34", + "danielleleb", + "elharony", + "estelle", + "Sajag", + "cartinez", + "mfluehr", + "Rohitkrops", + "Sheppy", + "dan10gc", + "aleshkanet", + "chafic", + "cbb", + "equinusocio", + "joyously", + "pixelass", + "jhpratt", + "FlorTello", + "erikadoyle", + "gilbertginsberg", + "cPhost", + "Rishiahya", + "PhantomWatson", + "beingmrkenny", + "m_gol", + "jpmedley", + "stevemao", + "Sebastianz", + "igor9silva", + "JeroenNoten", + "keithjgrant", + "xDarkShadowKnightx", + "robertclaytonreed", + "teoli", + "Volker-E", + "Manuel_Strehl", + "TabAtkins", + "pldz", + "George8211", + "nhoizey", + "wesj", + "jonathanKingston", + "MTonly", + "jmccraw", + "watilde", + "Ekanan", + "kohei.yoshino", + "jfla", + "AlexPl", + "velvel53", + "HumanBlade", + "ethertank" + ] + }, "Web/CSS/CSS_colors": { "modified": "2020-12-02T11:04:05.642Z", "contributors": ["peterbe", "wbamberg", "fscholz", "Sheppy", "mfluehr"] @@ -78591,66 +78651,6 @@ "BijuGC" ] }, - "Web/CSS/Using_CSS_custom_properties": { - "modified": "2020-10-15T21:21:03.349Z", - "contributors": [ - "mfuji09", - "Geo1088", - "chrisdavidmills", - "Awk34", - "danielleleb", - "elharony", - "estelle", - "Sajag", - "cartinez", - "mfluehr", - "Rohitkrops", - "Sheppy", - "dan10gc", - "aleshkanet", - "chafic", - "cbb", - "equinusocio", - "joyously", - "pixelass", - "jhpratt", - "FlorTello", - "erikadoyle", - "gilbertginsberg", - "cPhost", - "Rishiahya", - "PhantomWatson", - "beingmrkenny", - "m_gol", - "jpmedley", - "stevemao", - "Sebastianz", - "igor9silva", - "JeroenNoten", - "keithjgrant", - "xDarkShadowKnightx", - "robertclaytonreed", - "teoli", - "Volker-E", - "Manuel_Strehl", - "TabAtkins", - "pldz", - "George8211", - "nhoizey", - "wesj", - "jonathanKingston", - "MTonly", - "jmccraw", - "watilde", - "Ekanan", - "kohei.yoshino", - "jfla", - "AlexPl", - "velvel53", - "HumanBlade", - "ethertank" - ] - }, "Web/CSS/Value_definition_syntax": { "modified": "2020-10-06T14:06:23.915Z", "contributors": [ diff --git a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md index 5352cf37a305fbb..d289a992227fc54 100644 --- a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md @@ -346,7 +346,7 @@ The most popular pre-processor is [Sass](https://sass-lang.com/). This is not a #### Defining variables -CSS now has native [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place. +CSS now has native [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place. If we created a variable called `$base-color`, as in the first line below, we could then use it through the stylesheet anywhere that required that color. diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md index 73fe85cc44651c4..1194938b2f05146 100644 --- a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md +++ b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md @@ -94,7 +94,7 @@ h1 { ## How do I derive one style from another? -CSS does not exactly allow one style to be defined in terms of another. However, assigning multiple classes to a single element can provide the same effect, and [CSS Variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) now provide a way to define style information in one place that can be reused in multiple places. +CSS does not exactly allow one style to be defined in terms of another. However, assigning multiple classes to a single element can provide the same effect, and [CSS Variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) now provide a way to define style information in one place that can be reused in multiple places. ## How do I assign multiple classes to an element? diff --git a/files/en-us/mozilla/firefox/releases/29/index.md b/files/en-us/mozilla/firefox/releases/29/index.md index ecdb30a765cf68a..d9f7815a0989579 100644 --- a/files/en-us/mozilla/firefox/releases/29/index.md +++ b/files/en-us/mozilla/firefox/releases/29/index.md @@ -26,7 +26,7 @@ _See the [Mozilla Hacks blog post](https://hacks.mozilla.org/2014/02/css-source- ### CSS -- [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) have been implemented ([Firefox bug 773296](https://bugzil.la/773296)). Mozilla Hacks article can be found [here](https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/). They are enabled by default only for non-release builds (on release builds flip the pref `layout.css.variables.enabled` to `true` if you want to play with them). +- [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) have been implemented ([Firefox bug 773296](https://bugzil.la/773296)). Mozilla Hacks article can be found [here](https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/). They are enabled by default only for non-release builds (on release builds flip the pref `layout.css.variables.enabled` to `true` if you want to play with them). - Flexboxes now support {{cssxref("visibility")}}`: collapse` ([Firefox bug 783470](https://bugzil.la/783470)). - The {{cssxref("box-sizing")}} property has been unprefixed ([Firefox bug 243412](https://bugzil.la/243412)). - The {{cssxref("will-change")}} property, a hint to that something will animate has been added. The preference `layout.css.will-change.enabled` must be switched to `true` to enable it. ([Firefox bug 940842](https://bugzil.la/940842)) diff --git a/files/en-us/mozilla/firefox/releases/55/index.md b/files/en-us/mozilla/firefox/releases/55/index.md index 5689e9b5e902fd0..52128c5c54d1901 100644 --- a/files/en-us/mozilla/firefox/releases/55/index.md +++ b/files/en-us/mozilla/firefox/releases/55/index.md @@ -29,7 +29,7 @@ Firefox 55 was released on August 8, 2017. This article lists key changes that a - Implemented the {{cssxref("text-justify")}} property ([Firefox bug 1343512](https://bugzil.la/1343512), [Firefox bug 276079](https://bugzil.la/276079)). - \[css-grid] {{cssxref("fit-content")}} unexpectedly reserves space for full clamp size in {{cssxref("repeat", "repeat()")}} ([Firefox bug 1359060](https://bugzil.la/1359060)). - The {{cssxref("float")}} / {{cssxref("clear")}} logical values — `inline-start` and `inline-end` — which were previously implemented but preffed off in release channels, are now available in all channels by default ([Firefox bug 1253919](https://bugzil.la/1253919)). -- The `layout.css.variables.enabled` preference has been removed completely meaning that the [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) feature is enabled all the time and can no longer be disabled ([Firefox bug 1312328](https://bugzil.la/1312328)). +- The `layout.css.variables.enabled` preference has been removed completely meaning that the [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) feature is enabled all the time and can no longer be disabled ([Firefox bug 1312328](https://bugzil.la/1312328)). - Implemented the proprietary `-moz-context-properties` property ([Firefox bug 1058040](https://bugzil.la/1058040)). - Zero (0) angle value without degree unit is not correctly interpreted in {{cssxref("gradient/linear-gradient")}} ([Firefox bug 1363292](https://bugzil.la/1363292)). - The {{cssxref("::cue")}} pseudo-element is now supported; it matches on text cues presented within a media element ([Firefox bug 1318542](https://bugzil.la/1318542)). diff --git a/files/en-us/mozilla/firefox/releases/60/index.md b/files/en-us/mozilla/firefox/releases/60/index.md index e359b0e9d334147..6f190a87056dd26 100644 --- a/files/en-us/mozilla/firefox/releases/60/index.md +++ b/files/en-us/mozilla/firefox/releases/60/index.md @@ -17,7 +17,7 @@ This article provides information about the changes in Firefox 60 that will affe ### Developer tools - In the CSS Pane rules view (see [Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from `Alt` + `Up`/`Down` to `Ctrl` + `Up`/`Down` on Linux and Windows, to avoid clashes with default OS-level shortcuts (see [Firefox bug 1413314](https://bugzil.la/1413314)). -- Also in the CSS Pane rules view, [CSS variable names](/en-US/docs/Web/CSS/Using_CSS_custom_properties) will now auto-complete ([Firefox bug 1422635](https://bugzil.la/1422635)). If you enter `var(` into a property value and then type a dash (`-`), any variables you have declared in your CSS will then appear in an autocomplete list. +- Also in the CSS Pane rules view, [CSS variable names](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) will now auto-complete ([Firefox bug 1422635](https://bugzil.la/1422635)). If you enter `var(` into a property value and then type a dash (`-`), any variables you have declared in your CSS will then appear in an autocomplete list. - In [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html), a _Reload when…_ dropdown has been added to allow users to enable/disable automatic page reloads when touch simulation is toggled, or simulated user agent is changed. See [Controlling page reload behavior](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html#controlling-page-reload-behavior) for more details ([Firefox bug 1428816](https://bugzil.la/1428816)). - The `view_source.tab` preference has been removed so you can no longer toggle [View Source](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) mode between appearing in a new tab or new window. Page sources will always appear in new tabs from now on ([Firefox bug 1418403](https://bugzil.la/1418403)). diff --git a/files/en-us/web/api/css_typed_om_api/guide/index.md b/files/en-us/web/api/css_typed_om_api/guide/index.md index 7c888518fa1a0b8..d9eda6a36773a7e 100644 --- a/files/en-us/web/api/css_typed_om_api/guide/index.md +++ b/files/en-us/web/api/css_typed_om_api/guide/index.md @@ -331,7 +331,7 @@ The following examples reference `allComputedStyles`: ### CSSUnparsedValue -The {{domxref('CSSUnparsedValue')}} represents [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties): +The {{domxref('CSSUnparsedValue')}} represents [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties): ```js // CSSUnparsedValue diff --git a/files/en-us/web/api/cssvariablereferencevalue/cssvariablereferencevalue/index.md b/files/en-us/web/api/cssvariablereferencevalue/cssvariablereferencevalue/index.md index 502506b79db2603..e9270ce2814680f 100644 --- a/files/en-us/web/api/cssvariablereferencevalue/cssvariablereferencevalue/index.md +++ b/files/en-us/web/api/cssvariablereferencevalue/cssvariablereferencevalue/index.md @@ -22,7 +22,7 @@ new CSSVariableReferenceValue(variable, fallback) - `variable` - : A [custom property name](/en-US/docs/Web/CSS/--*). - `fallback` {{optional_inline}} - - : A [custom property fallback value](/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values). + - : A [custom property fallback value](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties#custom_property_fallback_values). ## Specifications diff --git a/files/en-us/web/api/cssvariablereferencevalue/fallback/index.md b/files/en-us/web/api/cssvariablereferencevalue/fallback/index.md index 0ecf84a3e26d194..e3f4c91f18c4ca5 100644 --- a/files/en-us/web/api/cssvariablereferencevalue/fallback/index.md +++ b/files/en-us/web/api/cssvariablereferencevalue/fallback/index.md @@ -9,7 +9,7 @@ browser-compat: api.CSSVariableReferenceValue.fallback {{APIRef("CSSOM")}} The **`fallback`** read-only property of the -{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property fallback value](/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) of the {{domxref("CSSVariableReferenceValue")}}. +{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property fallback value](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties#custom_property_fallback_values) of the {{domxref("CSSVariableReferenceValue")}}. ## Value diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md index ee59057e8b1c141..e9e234d2e39afe7 100644 --- a/files/en-us/web/css/--_star_/index.md +++ b/files/en-us/web/css/--_star_/index.md @@ -89,5 +89,5 @@ Custom properties are scoped to the element(s) they are declared on, and partici - The {{cssxref("var", "var()")}} function - {{cssxref("@property")}} at-rule -- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide +- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md index 67c87a9e8d1417a..a943a3c3c5d9361 100644 --- a/files/en-us/web/css/@font-palette-values/index.md +++ b/files/en-us/web/css/@font-palette-values/index.md @@ -20,7 +20,7 @@ The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/ } ``` -The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var). +The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var). ### Descriptors diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 6eec0d5f5ec6e31..7e54de53d55b2f5 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -141,5 +141,5 @@ For item three, the `--item-size` value gets set to `1000px`. While `1000px` is - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API) - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API) - [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs) -- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide +- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module diff --git a/files/en-us/web/css/_colon_root/index.md b/files/en-us/web/css/_colon_root/index.md index 747dc1ca984cf14..8ef27823ac46cf3 100644 --- a/files/en-us/web/css/_colon_root/index.md +++ b/files/en-us/web/css/_colon_root/index.md @@ -29,7 +29,7 @@ The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps ### Declaring global CSS variables -`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties): +`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties): ```css :root { diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 3432422f0d086d9..6606cf95b8f0969 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -7,13 +7,13 @@ browser-compat: css.properties.all {{CSSRef}} -The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. +The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. {{EmbedInteractiveExample("pages/css/all.html")}} ## Constituent properties -This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). +This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). ## Syntax diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index 45667a5ce8cb759..429e777214362e0 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/at-rule/index.md @@ -60,7 +60,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - {{cssxref("@position-try")}} - : Defines custom position options which can be used to define fallback positioning and alignment options for anchor-positioned elements ([CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)). - {{cssxref("@property")}} - - : Defines a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)). + - : Defines a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)). - {{cssxref("@scope")}} - : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)). - {{cssxref("@starting-style")}} diff --git a/files/en-us/web/css/calc-size/index.md b/files/en-us/web/css/calc-size/index.md index d24a8e1e71d519e..5e8d942df9e3ade 100644 --- a/files/en-us/web/css/calc-size/index.md +++ b/files/en-us/web/css/calc-size/index.md @@ -68,7 +68,7 @@ The first `calc-size()` argument can be one of the following intrinsic values: There are also a few special values that this argument can take: -- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/Using_CSS_custom_properties) as the `` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work: +- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) as the `` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work: ```css section { diff --git a/files/en-us/web/css/css_cascading_variables/index.md b/files/en-us/web/css/css_cascading_variables/index.md index 254af62f8a3804d..c719a82355e9a09 100644 --- a/files/en-us/web/css/css_cascading_variables/index.md +++ b/files/en-us/web/css/css_cascading_variables/index.md @@ -109,7 +109,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom ## Guides -- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) +- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) - : Explains how to use custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance. diff --git a/files/en-us/web/css/using_css_custom_properties/index.md b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md similarity index 99% rename from files/en-us/web/css/using_css_custom_properties/index.md rename to files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md index 830c704c8734847..b75d12d90c0f3a9 100644 --- a/files/en-us/web/css/using_css_custom_properties/index.md +++ b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md @@ -1,6 +1,6 @@ --- title: Using CSS custom properties (variables) -slug: Web/CSS/Using_CSS_custom_properties +slug: Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties page-type: guide --- diff --git a/files/en-us/web/css/css_colors/relative_colors/index.md b/files/en-us/web/css/css_colors/relative_colors/index.md index f28761fd670c689..298ec845f133f68 100644 --- a/files/en-us/web/css/css_colors/relative_colors/index.md +++ b/files/en-us/web/css/css_colors/relative_colors/index.md @@ -26,7 +26,7 @@ color(from origin-color colorspace channel1 channel2 channel3 / alpha) Relative colors are created using the same [color functions](/en-US/docs/Web/CSS/CSS_colors#functions) as absolute colors, but with different parameters: 1. Include a basic color function (represented by _`color-function()`_ above) such as [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), etc. Which one you pick depends on the color model you want to use for the relative color you are creating (the **output color**). -2. Pass in the **origin color** (represented above by _`origin-color`_) your relative color will be based on, preceded by the `from` keyword. This can be any valid {{cssxref("<color>")}} value using any available color model including a color value contained in a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), system colors, `currentColor`, or even another relative color. +2. Pass in the **origin color** (represented above by _`origin-color`_) your relative color will be based on, preceded by the `from` keyword. This can be any valid {{cssxref("<color>")}} value using any available color model including a color value contained in a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), system colors, `currentColor`, or even another relative color. 3. In the case of the [`color()`](/en-US/docs/Web/CSS/color_value/color) function, include the _[`colorspace`](/en-US/docs/Web/CSS/color_value/color#colorspace)_ of the output color. 4. Provide an output value for each individual channel. The output color is defined after the origin color — represented above by the _`channel1`_, _`channel2`_, and _`channel3`_ placeholders. The channels defined here depend on the [color function](/en-US/docs/Web/CSS/CSS_colors#functions) you are using for your relative color. For example, if you are using [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), you would need to define the values for hue, saturation, and lightness. Each channel value can be a new value, the same as the original value, or a value relative to the channel value of the origin color. 5. Optionally, an `alpha` channel value for the output color can be defined, preceded by a slash (`/`). If the `alpha` channel value is not explicitly specified, it defaults to the alpha channel value of the _`origin-color`_ (not 100%, which is the case for absolute color values). @@ -173,7 +173,7 @@ It is worth mentioning again that the color system of the origin color doesn't n ## Using custom properties -When creating a relative color, you can use values defined in [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) both for the origin color and within the output color channel value definitions. Let's look at an example. +When creating a relative color, you can use values defined in [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) both for the origin color and within the output color channel value definitions. Let's look at an example. In the below CSS we define two custom properties: diff --git a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md index 7a3471e99da8ecb..6545f8c6ab3db3c 100644 --- a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md +++ b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md @@ -24,7 +24,7 @@ There are two types of container queries: _container size queries_ and _containe - : Size queries enable applying styles to elements based on the current [size](/en-US/docs/Web/CSS/@container#descriptors) of a containing element, including the orientation and {{glossary("aspect ratio")}}. The containing elements need to be explicitly declared as _size query containers_. - **Container style queries** - - : Style queries enable applying styles to elements based on a containing element's style features. Any non-empty element can be a style query container. Currently, the only style feature supported by style queries is CSS [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). In this case, the query returns true or false depending on the computed value of the containing element's custom properties. When container style queries are fully supported, they will enable you to apply styles to any element's descendants based on any property, declaration, or computed value — for example if the container is `display: inline flex` or has a non-transparent background color. + - : Style queries enable applying styles to elements based on a containing element's style features. Any non-empty element can be a style query container. Currently, the only style feature supported by style queries is CSS [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). In this case, the query returns true or false depending on the computed value of the containing element's custom properties. When container style queries are fully supported, they will enable you to apply styles to any element's descendants based on any property, declaration, or computed value — for example if the container is `display: inline flex` or has a non-transparent background color. In this guide, we learn the basics of container queries by looking at: @@ -164,7 +164,7 @@ Now, let's dive in and take a look at the different `` types. ### Style queries for custom properties -Style queries for custom properties allow you to query the [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), also called "CSS variables", of a parent element. They are included within a `` just as you would include any regular CSS property within a feature query: either with or without a value. +Style queries for custom properties allow you to query the [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), also called "CSS variables", of a parent element. They are included within a `` just as you would include any regular CSS property within a feature query: either with or without a value. #### Standalone custom property queries diff --git a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md index deb9673dcfca8da..3833c7787859562 100644 --- a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md @@ -1113,7 +1113,7 @@ checkBox2.addEventListener("change", () => { ## Font feature settings -{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) to set the values). Because of this, it's best to use the standard properties shown above wherever possible. +{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to set the values). Because of this, it's best to use the standard properties shown above wherever possible. There are a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them. diff --git a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md index 12f692b1c75bd1f..1d9b6c9a7017064 100644 --- a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md @@ -58,7 +58,7 @@ In this section we'll demonstrate the five registered axes defined with examples `wght` (weight) is a registered axis, and `GRAD` (grade) is a custom one. -2. If you have set values using `font-variation-settings` and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) (CSS variables) for the individual values, and modifying the value of an individual custom property. Example code follows at the end of the guide. +2. If you have set values using `font-variation-settings` and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) (CSS variables) for the individual values, and modifying the value of an individual custom property. Example code follows at the end of the guide. ### Weight diff --git a/files/en-us/web/css/css_types/index.md b/files/en-us/web/css/css_types/index.md index dff9f36d0b27c4c..77810445ec76127 100644 --- a/files/en-us/web/css/css_types/index.md +++ b/files/en-us/web/css/css_types/index.md @@ -44,7 +44,7 @@ These types include keywords and identifiers as well as strings, and URLs. - {{cssxref("<custom-ident>")}} - : A user-defined identifier, for example the name assigned using the {{cssxref("grid-area")}} property. - {{cssxref("<dashed-ident>")}} - - : A `` with the additional restriction that it must start with two dashes, for example, with [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). + - : A `` with the additional restriction that it must start with two dashes, for example, with [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). - {{cssxref("<string>")}} - : A quoted string, such as used for a value of the {{cssxref("content")}} property. - {{cssxref("url_value", "<url>")}} diff --git a/files/en-us/web/css/dashed-ident/index.md b/files/en-us/web/css/dashed-ident/index.md index 7e1c7e56812788a..b0d2c914d2231ad 100644 --- a/files/en-us/web/css/dashed-ident/index.md +++ b/files/en-us/web/css/dashed-ident/index.md @@ -21,7 +21,7 @@ Just like [``](/en-US/docs/Web/CSS/custom-ident) ``s ### Using with CSS custom properties -When `` is used with [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), the property is declared first and then used within a [CSS var() function](/en-US/docs/Web/CSS/var). +When `` is used with [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), the property is declared first and then used within a [CSS var() function](/en-US/docs/Web/CSS/var). ```css html { diff --git a/files/en-us/web/css/env/index.md b/files/en-us/web/css/env/index.md index 54a98a81ad1c229..709462d15b1c1db 100644 --- a/files/en-us/web/css/env/index.md +++ b/files/en-us/web/css/env/index.md @@ -213,7 +213,7 @@ main { - {{CSSxRef("var", "var(…)")}} - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module - [Custom properties (`--*`): CSS variables](/en-US/docs/Web/CSS/--*) -- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) +- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) - [Customize the window controls overlay of your PWA's title bar](https://web.dev/articles/window-controls-overlay) - [Display content in the title bar](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay) - [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) diff --git a/files/en-us/web/css/hypot/index.md b/files/en-us/web/css/hypot/index.md index 7e8bfa3fa421445..aa453116003bff2 100644 --- a/files/en-us/web/css/hypot/index.md +++ b/files/en-us/web/css/hypot/index.md @@ -59,7 +59,7 @@ This example shows how you can use the `hypot()` function to calculate sizes. #### CSS -Here we are using [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the sizes to be used. First we declare the first size (`--size-0`) which is then used to calculate the other sizes. +Here we are using [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to define the sizes to be used. First we declare the first size (`--size-0`) which is then used to calculate the other sizes. - `--size-1` is calculated with the hypotenuse of `--size-0` (100px). This takes the square value and, as there is no other value, returns the square root of the value, which results in 100px. - `--size-2` is calculated with the hypotenuse of `--size-0` (100px), twice. This takes the square of the value (100px \* 100px = 10000px2) and adds it to the square of `--size-0` again (10000px2 + 10000px2 = 20000px2) and returns the square root of the sum (√(20000px2)), which results in 141.42px. diff --git a/files/en-us/web/css/log/index.md b/files/en-us/web/css/log/index.md index f86698d1773f91e..d07d94054834bcb 100644 --- a/files/en-us/web/css/log/index.md +++ b/files/en-us/web/css/log/index.md @@ -47,7 +47,7 @@ The natural logarithm (base `e`) of `value`, when `base` is not defined. ### Using the `log()` function on a logarithmic scale -This example illustrates how the `log()` function can be used to visualize data values by using a [logarithmic scale](https://en.wikipedia.org/wiki/Logarithmic_scale). The width of each bar in this example is relative to its data value on a logarithmic scale with base 10. On each element, its value is assigned to a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties) named `--value`, which is then used by the `.bar` class to calculate its width. +This example illustrates how the `log()` function can be used to visualize data values by using a [logarithmic scale](https://en.wikipedia.org/wiki/Logarithmic_scale). The width of each bar in this example is relative to its data value on a logarithmic scale with base 10. On each element, its value is assigned to a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) named `--value`, which is then used by the `.bar` class to calculate its width. #### HTML diff --git a/files/en-us/web/css/sqrt/index.md b/files/en-us/web/css/sqrt/index.md index 3b64e9fdbd9c783..4768b358476da46 100644 --- a/files/en-us/web/css/sqrt/index.md +++ b/files/en-us/web/css/sqrt/index.md @@ -58,7 +58,7 @@ This example shows how you can use the `sqrt()` function to calculate sizes. #### CSS -Here we are using [CSS custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes. +Here we are using [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes. - `--size-1` is calculated by multiplying the value of `--size-0` (50px) by the square root of 4 (2), which results in 100px. - `--size-2` is calculated by multiplying the value of `--size-0` (50px) by the square root of 9 (3), which results in 150px. diff --git a/files/en-us/web/css/var/index.md b/files/en-us/web/css/var/index.md index ab73cf596678296..540f291803c37ff 100644 --- a/files/en-us/web/css/var/index.md +++ b/files/en-us/web/css/var/index.md @@ -240,6 +240,6 @@ Note how the paragraphs using `var()` are reset to the default black, but the pa ## See also - {{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent. -- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) +- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) - {{cssxref("@property")}} at-rule - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module