chore(ia): Reorganize CSS pages - part 5 (moving at-rules and related files under reference/at-rules) (#41801)

* create at-rules directory and listing page

* move css/css_syntax/at-rule_functions to css/reference/at-rules

* resolve merge conflicts

* update sidebar and page types

* add descriptors to at-rules index listing

* update at-rules guide slug to add an 's'

* add at-rules guide to the sidebar

Author: dipikabh

files/en-us/_redirects.txt

@@ -5,7 +5,7 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-In CSS, the value of a property in a CSS rule is the _underlying value_ of that property, and the value of that same property in a [keyframe](/en-US/docs/Web/CSS/@keyframes) is its _effect value_.
+In CSS, the value of a property in a CSS rule is the _underlying value_ of that property, and the value of that same property in a [keyframe](/en-US/docs/Web/CSS/Reference/At-rules/@keyframes) is its _effect value_.
 
 **Composite operation** is the specific operation that is used to combine an effect value with an underlying value to produce the final keyframe effect value. There are three types of composite operations:
 

files/en-us/_wikihistory.json

@@ -5,7 +5,7 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-A **CSS descriptor** defines the characteristics of an [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). At-rules may have one or multiple descriptors. Each descriptor has:
+A **CSS descriptor** defines the characteristics of an [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rules). At-rules may have one or multiple descriptors. Each descriptor has:
 
 - A name
 - A value, which holds the component values

files/en-us/glossary/composite_operation/index.md

@@ -13,7 +13,7 @@ Traditionally, in web development, the only gamut used was _[sRGB](https://en.wi
 
 Since 2021, browsers have started to provide functionality for other gamuts, like _[Display-P3](/en-US/docs/Glossary/Color_space#display-p3)_, widely used in the movie industry, and _[rec2020](/en-US/docs/Glossary/Color_space#rec2020)_.
 
-Developers can define different sets of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS functions like [`lch()`](/en-US/docs/Web/CSS/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/color_value/lab) for the Lab coordinate system.
+Developers can define different sets of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS functions like [`lch()`](/en-US/docs/Web/CSS/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/color_value/lab) for the Lab coordinate system.
 
 ## See also
 

files/en-us/glossary/css_descriptor/index.md

@@ -15,5 +15,5 @@ CSS offers several features that allow you to tweak your document's styles—or
 
 - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
-- {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule): Conditionally apply part of a CSS stylesheet, based on the result of a media query.
+- {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rules): Conditionally apply part of a CSS stylesheet, based on the result of a media query.
 - {{domxref("Window.matchMedia()")}}: Test the viewing device against a media query

files/en-us/glossary/gamut/index.md

@@ -495,7 +495,7 @@ Next, we will study media queries in more detail and show how to use them to sol
 
 - Working with touchscreen devices:
   - [Touch events](/en-US/docs/Web/API/Touch_events) provide the ability to interpret finger (or stylus) activity on touch screens or trackpads, enabling quality support for complex touch-based user interfaces.
-  - Use the [pointer](/en-US/docs/Web/CSS/@media/pointer) or [any-pointer](/en-US/docs/Web/CSS/@media/any-pointer) media queries to load different CSS on touch-enabled devices.
+  - Use the [pointer](/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) or [any-pointer](/en-US/docs/Web/CSS/Reference/At-rules/@media/any-pointer) media queries to load different CSS on touch-enabled devices.
 - [CSS-Tricks guide to media queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
 - [The Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> from Scrimba teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions. This includes a module on responsive design.
 

files/en-us/glossary/media/css/index.md

@@ -156,7 +156,7 @@ Now that you have worked through our articles on CSS layout, it's time to test y
 
 ## See also
 
-- [`@supports`](/en-US/docs/Web/CSS/@supports) at-rule
-- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule)
+- [`@supports`](/en-US/docs/Web/CSS/Reference/At-rules/@supports) at-rule
+- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rules)
 - [Using feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
 - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -162,7 +162,7 @@ Installing shared assets, as we're about to do, isn't normally a required step f
 
 3. Next, find the [ember-cli-build.js](https://github.com/ember-cli/ember-cli/blob/master/packages/app-blueprint/files/ember-cli-build.js) file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor. ember-cli-build.js is responsible for configuring details about how your project is built — including bundling all your files together, asset minification, and creating sourcemaps — with reasonable defaults, so you don't typically need to worry about this file.
 
-   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
+   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
 
 4. In `ember-cli-build.js`, find the following code:
 

files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md

@@ -5,7 +5,7 @@ page-type: learn-module-chapter
 sidebar: learnsidebar
 ---
 
-This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
+This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
 
 If you are new to CSS, working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course. However, knowing the basics of what cascade layers are should you encounter them in your projects is helpful. The more you work with CSS, understanding cascade layers and knowing how to leverage their power will save you from a lot of pain managing a code base with CSS from different parties, plugins, and development teams.
 
@@ -45,7 +45,7 @@ The 'C' in CSS stands for "Cascading". It is the method by which styles cascade
 3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
 4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
 5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
-6. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example.
+6. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/Reference/At-rules/@scope#how_scope_conflicts_are_resolved) for more details and an example.
 7. **Order of appearance:** When two selectors in the origin layer with precedence have the same specificity and scope proximity, the property value from the last declared selector with the highest specificity wins.
 
 For each step, only the declarations "still in the running" move on to "compete" in the next step. If only one declaration is in the running, it "wins", and the subsequent steps are moot.
@@ -99,7 +99,7 @@ We now understand "cascade origin precedence", but what is "cascade layer preced
 
 Similar to how we have six levels of priority based on origin and importance, cascade layers enable us to create sub-origin level of priority within any of those origins.
 
-Within each of the six origin buckets, there can be multiple cascade layers. The [order of layer creation](/en-US/docs/Web/CSS/@layer) matters a lot. It is the order of creation that sets the precedence order among layers within an origin.
+Within each of the six origin buckets, there can be multiple cascade layers. The [order of layer creation](/en-US/docs/Web/CSS/Reference/At-rules/@layer) matters a lot. It is the order of creation that sets the precedence order among layers within an origin.
 
 In normal origin buckets, layers are sorted in the order of each layer's creation. The order of precedence is from the first layer created to the last, followed by unlayered normal styles.
 
@@ -125,7 +125,7 @@ Layer precedence always beats selector specificity. Styles in layers with preced
 
 Cascade layers allow the creation of nested layers. Each cascade layer can contain nested layers.
 
-For example, a component library may be imported into a `components` layer. A regular cascade layer will add the component library to the author origin, removing any specificity conflicts with other author styles. Within the `components` layer, a developer can choose to define various themes, each as a separate nested layer. The order of these nested theme layers can be defined based on media queries (see the [Layer creation and media queries](#layer_creation_and_media_queries) section below), such as viewport size or [orientation](/en-US/docs/Web/CSS/@media/orientation). These nested layers provide a way to create themes that don't conflict based on specificity.
+For example, a component library may be imported into a `components` layer. A regular cascade layer will add the component library to the author origin, removing any specificity conflicts with other author styles. Within the `components` layer, a developer can choose to define various themes, each as a separate nested layer. The order of these nested theme layers can be defined based on media queries (see the [Layer creation and media queries](#layer_creation_and_media_queries) section below), such as viewport size or [orientation](/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation). These nested layers provide a way to create themes that don't conflict based on specificity.
 
 The ability to nest layers is very useful for anybody who works on developing component libraries, frameworks, third-party widgets, and themes.
 
@@ -139,9 +139,9 @@ The ability to create nested layers also removes the worry of having conflicting
 
 Layers can be created using any one of the following methods:
 
-- The [`@layer`](/en-US/docs/Web/CSS/@layer) statement at-rule, declaring layers using `@layer` followed by the names of one or more layers. This creates named layers without assigning any styles to them.
+- The [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer) statement at-rule, declaring layers using `@layer` followed by the names of one or more layers. This creates named layers without assigning any styles to them.
 - The `@layer` block at-rule, in which all styles within a block are added to a named or unnamed layer.
-- The [`@import`](/en-US/docs/Web/CSS/@import) rule with the `layer` keyword or `layer()` function, which assigns the contents of the imported file into that layer.
+- The [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) rule with the `layer` keyword or `layer()` function, which assigns the contents of the imported file into that layer.
 
 All three methods create a layer if a layer with that name has not already been initialized. If no layer name is provided in the `@layer` at-rule or `@import` with `layer()`, a new anonymous (unnamed) layer is created.
 
@@ -154,7 +154,7 @@ Let's cover the three ways of creating a layer in a little more detail before di
 
 The order of layers is set by the order in which the layers appear in your CSS. Declaring layers using `@layer` followed by the names of one or more layers without assigning any styles is one way to define the [layer order](#determining_the_precedence_based_on_the_order_of_layers).
 
-The [`@layer`](/en-US/docs/Web/CSS/@layer) CSS at-rule is used to declare a cascade layer and to define the order of precedence when there are multiple cascade layers. The following at-rule declares three layers, in the order listed:
+The [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer) CSS at-rule is used to declare a cascade layer and to define the order of precedence when there are multiple cascade layers. The following at-rule declares three layers, in the order listed:
 
 ```css
 @layer theme, layout, utilities;
@@ -294,9 +294,9 @@ In wide screens, the `site` layer is declared in the first line, meaning `site`
 
 ### Importing style sheets into named and anonymous layers with @import
 
-The [`@import`](/en-US/docs/Web/CSS/@import) rule allows users to import style rules from other style sheets either directly into a CSS file or into a {{htmlelement('style')}} element.
+The [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) rule allows users to import style rules from other style sheets either directly into a CSS file or into a {{htmlelement('style')}} element.
 
-When importing stylesheets, the `@import` statement must be defined before any CSS styles within the stylesheet or `<style>` block. The `@import` statement must come first, before any styles, but can be preceded by an `@layer` at-rule that creates one or more layers without assigning any styles to the layers. (`@import` can also be preceded by an [`@charset`](/en-US/docs/Web/CSS/@charset) rule.)
+When importing stylesheets, the `@import` statement must be defined before any CSS styles within the stylesheet or `<style>` block. The `@import` statement must come first, before any styles, but can be preceded by an `@layer` at-rule that creates one or more layers without assigning any styles to the layers. (`@import` can also be preceded by an [`@charset`](/en-US/docs/Web/CSS/Reference/At-rules/@charset) rule.)
 
 You can import a stylesheet into a named layer, a nested named layer, or an anonymous layer. The following layer imports the style sheets into a `components` layer, a nested `dialog` layer within the `components` layer, and an un-named layer, respectively: