mdn · estelle · May 25, 2023 · May 25, 2023 · May 25, 2023 · May 25, 2023
@@ -0,0 +1,20 @@
+---
+title: CSS cascading variables
+slug: Web/CSS/CSS_cascading_variables
+page-type: css-module
+spec-urls: https://drafts.csswg.org/css-variables/
+---
+
+{{CSSRef}}
+
+The **CSS cascading variables** module adds support for cascading variables in all CSS properties and also lets you create custom properties to define these variables.
+
+## Reference
+
+### Properties
+
+- {{cssxref("--*")}}
+
+## Specifications
+
+{{Specifications}}
@@ -55,4 +55,4 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color
 
 ## See also
 
-- [CSS colors module](/en-US/docs/Web/CSS/CSS_Colors)
+- [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
@@ -1,13 +1,13 @@
 ---
-title: CSS Container Queries
-slug: Web/CSS/CSS_Container_Queries
+title: CSS container queries
+slug: Web/CSS/CSS_container_queries
 page-type: guide
 ---
 
 {{CSSRef}}
 
 Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.
-Container queries are an alternative to [media queries](/en-US/docs/Web/CSS/Media_Queries), which apply styles to elements based on viewport size or other device characteristics.
+Container queries are an alternative to [media queries](/en-US/docs/Web/CSS/CSS_media_queries), which apply styles to elements based on viewport size or other device characteristics.
 
 ![A media query based on the viewport's width, which is the full width of the browser, and a container query based on the width of a container context, which is the width of the container element.](container-query.svg)
 
@@ -157,7 +157,7 @@ If you want to use a single-column layout for devices with a smaller viewport, y
 
 ## See also
 
-- [Media queries](/en-US/docs/Web/CSS/Media_Queries)
+- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
 - CSS {{Cssxref("@container")}} at-rule
 - CSS {{Cssxref("contain")}} property
 - CSS {{Cssxref("container")}} shorthand property

@@ -1,6 +1,6 @@
 ---
 title: CSS filter effects
-slug: Web/CSS/Filter_Effects
+slug: Web/CSS/CSS_filter_effects
 page-type: css-module
 spec-urls:
   - https://drafts.fxtf.org/filter-effects-2/
@@ -39,7 +39,7 @@ To see the code for this filter effects sample, [view the source on GitHub](http
 
 ## Guides
 
-- [Using CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects/Using_filter_effects)
+- [Using CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects/Using_filter_effects)
   - : Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions.
 
 ## Related concepts
@@ -61,5 +61,5 @@ To see the code for this filter effects sample, [view the source on GitHub](http
 
 ## See also
 
-- Properties in the CSS [compositing and blending](/en-US/docs/Web/CSS/Compositing_and_Blending) module enable blending an element's background layers together and blending an element with its container.
-- The SVG {{SVGElement("filter")}} element and the SVG filter primitives, including {{SVGElement("feSpotLight")}}, {{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, and {{SVGElement("feTurbulence")}}.
+- Properties in the [CSS compositing and blending](/en-US/docs/Web/CSS/CSS_compositing_and_blending) module enable blending an element's background layers together and blending an element with its container
+- The SVG {{SVGElement("filter")}} element and the SVG filter primitives: {{SVGElement("feSpotLight")}}, {{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
@@ -1,6 +1,6 @@
 ---
 title: Using filter effects
-slug: Web/CSS/Filter_Effects/Using_filter_effects
+slug: Web/CSS/CSS_filter_effects/Using_filter_effects
 page-type: guide
 ---
 
@@ -10,7 +10,7 @@ Have you ever hovered over a black-and-white or sepia image and the full-color i
 
 ## Advantages of using CSS filter effects
 
-The [Filter effects](/en-US/docs/Web/CSS/Filter_Effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable.
+The [Filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable.
 
 The CSS filter effects module provides the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the {{cssxref("&lt;filter-function&gt;")}} data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create.
 
@@ -312,6 +312,6 @@ The SVG `url()` filter value can be included as the value of the SVG [`<image>`]
 
 - {{cssxref("mask")}}
 - {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}
-- [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects)
+- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects)
 - SVG {{SVGElement("filter")}} element, SVG {{SVGAttr("filter")}} attribute in [SVG](/en-US/docs/Web/SVG)
 - [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
@@ -1,6 +1,6 @@
 ---
 title: Media queries
-slug: Web/CSS/Media_Queries
+slug: Web/CSS/CSS_media_queries
 page-type: css-module
 spec-urls:
   - https://drafts.csswg.org/mediaqueries/
@@ -19,7 +19,7 @@ For example, you may have a smaller font size for devices with small screens, in
 In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query.
 To conditionally apply an entire style sheet, use {{cssxref("@import")}}.
 
-When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_Container_Queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.
+When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.
 
 ### Media queries in HTML
 
@@ -35,7 +35,7 @@ In [JavaScript](/en-US/docs/Web/JavaScript), you can use the {{domxref("Window.m
 You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of a query changes.
 With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.
 
-You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries).
+You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries).
 
 ## Reference
 
@@ -46,11 +46,11 @@ You can learn more about programmatically using media queries in [Testing media
 
 ## Guides
 
-- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
   - : Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
-- [Testing media queries programmatically](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
   - : Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).
-- [Using media queries for accessibility](/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)
+- [Using media queries for accessibility](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility)
   - : Learn how Media Queries can help users understand your website better.
 
 ## Specifications
@@ -59,5 +59,5 @@ You can learn more about programmatically using media queries in [Testing media
 
 ## See also
 
-- [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries)
+- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries)
 - Use {{cssxref("@supports")}} to apply styles that depend on browser support for various CSS technologies.
@@ -1,13 +1,13 @@
 ---
 title: Testing media queries programmatically
-slug: Web/CSS/Media_Queries/Testing_media_queries
+slug: Web/CSS/CSS_media_queries/Testing_media_queries
 page-type: guide
 browser-compat: api.MediaQueryList
 ---
 
 {{CSSRef}}
 
-The {{Glossary("DOM")}} provides features that can test the results of a [media query](/en-US/docs/Web/CSS/Media_Queries) programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a `MediaQueryList` object, you can check the result of the query or receive notifications when the result changes.
+The {{Glossary("DOM")}} provides features that can test the results of a [media query](/en-US/docs/Web/CSS/CSS_media_queries) programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a `MediaQueryList` object, you can check the result of the query or receive notifications when the result changes.
 
 ## Creating a media query list
 
@@ -81,7 +81,7 @@ mediaQueryList.removeEventListener("change", handleOrientationChange);
 
 ## See also
 
-- [Media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - {{domxref("window.matchMedia()")}}
 - {{domxref("MediaQueryList")}}
 - {{domxref("MediaQueryListEvent")}}
@@ -1,6 +1,6 @@
 ---
 title: Using media queries
-slug: Web/CSS/Media_Queries/Using_media_queries
+slug: Web/CSS/CSS_media_queries/Using_media_queries
 page-type: guide
 ---
 
@@ -11,7 +11,7 @@ Media queries are used for the following:
 
 - To conditionally apply styles with the [CSS](/en-US/docs/Web/CSS) {{cssxref("@media")}} and {{cssxref("@import")}} [at-rules](/en-US/docs/Web/CSS/At-rule).
 - To target specific media for the {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, and other [HTML](/en-US/docs/Web/HTML) elements with the `media=` attribute.
-- To [test and monitor media states](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) using the {{domxref("Window.matchMedia()")}} and {{domxref("EventTarget.addEventListener()")}} methods.
+- To [test and monitor media states](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) using the {{domxref("Window.matchMedia()")}} and {{domxref("EventTarget.addEventListener()")}} methods.
 
 > **Note:** The examples on this page use CSS's `@media` for illustrative purposes, but the basic syntax remains the same for all types of media queries.
 
@@ -294,8 +294,8 @@ For example, the following query tests for devices that have a monochrome displa
 ## See also
 
 - [@media](/en-US/docs/Web/CSS/@media)
-- [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries)
-- [Testing media queries programmatically](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries)
+- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
 - [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries)
 - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features)
 - [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features)
@@ -1,10 +1,10 @@
 ---
 title: Using media queries for accessibility
-slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
 page-type: guide
 ---
 
-[**Media Queries**](/en-US/docs/Web/CSS/@media) can be used to help users with disabilities better experience your website.
+[**CSS media queries**](/en-US/docs/Web/CSS/CSS_media_queries) can be used to help users with disabilities better experience your website.
 
 ## Reduced Motion
 

@@ -1,16 +1,16 @@
 ---
 title: Basic concepts of multi-column layout
-slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+slug: Web/CSS/CSS_multicol_layout/Basic_concepts
 page-type: guide
 ---
 
 {{CSSRef}}
 
-Multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples.
+Multi-column layout, usually referred to as multicol layout, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples.
 
 ## Key concepts and terminology
 
-Multicol is unlike any of the other layout methods we have in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with [CSS Paged Media](/en-US/docs/Web/CSS/CSS_Pages) by creating a print stylesheet.
+Multicol is unlike any of the other layout methods we have in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with [CSS Paged Media](/en-US/docs/Web/CSS/CSS_paged_media) by creating a print stylesheet.
 
 The properties defined by the specification are:
 
@@ -91,4 +91,4 @@ This CSS would give the same result as example 3, with both `column-count` and `
 
 ## Next steps
 
-In this guide, we've learned the basic use of multi-column layout. In the next guide, we will look at how much we can [style the columns themselves](/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns).
+In this guide, we've learned the basic use of multi-column layout. In the next guide, we will look at how much we can [style the columns themselves](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns).
@@ -1,6 +1,6 @@
 ---
 title: Handling content breaks in multi-column layout
-slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+slug: Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout
 page-type: guide
 ---
 

@@ -1,6 +1,6 @@
 ---
 title: Handling overflow in multi-column layout
-slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+slug: Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout
 page-type: guide
 ---
 
@@ -44,4 +44,4 @@ In the example below, we have used a `min-height` query to check the height befo
 
 ## Next steps
 
-In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) to give us control over how content breaks between columns.
+In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout) to give us control over how content breaks between columns.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -55,4 +55,4 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color

		## See also

		- [CSS colors module](/en-US/docs/Web/CSS/CSS_Colors)
		- [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module