diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index f9e85f8e511e64d..c505f72691c06c4 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -453,7 +453,7 @@ /en-US/docs/CSS/Adjacent_sibling_selectors /en-US/docs/Web/CSS/Next-sibling_combinator /en-US/docs/CSS/Alias /en-US/docs/Web/CSS/cursor /en-US/docs/CSS/Alternative_style_sheets /en-US/docs/Web/CSS/Alternative_style_sheets -/en-US/docs/CSS/At-rule /en-US/docs/Web/CSS/At-rule +/en-US/docs/CSS/At-rule /en-US/docs/Web/CSS/CSS_syntax/At-rule /en-US/docs/CSS/Attribute_selectors /en-US/docs/Web/CSS/Attribute_selectors /en-US/docs/CSS/Aural /en-US/docs/Web/CSS/@media/aural /en-US/docs/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts @@ -472,7 +472,7 @@ /en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator /en-US/docs/CSS/Class_selectors /en-US/docs/Web/CSS/Class_selectors -/en-US/docs/CSS/Comments /en-US/docs/Web/CSS/Comments +/en-US/docs/CSS/Comments /en-US/docs/Web/CSS/CSS_syntax/Comments /en-US/docs/CSS/Common_CSS_Questions /en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ /en-US/docs/CSS/Counters /en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters /en-US/docs/CSS/Currentcolor /en-US/docs/Web/CSS/color_value#currentcolor_keyword @@ -524,7 +524,7 @@ /en-US/docs/CSS/Scaling_of_SVG_backgrounds /en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds /en-US/docs/CSS/Shorthand_properties /en-US/docs/Web/CSS/Shorthand_properties /en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity -/en-US/docs/CSS/Syntax /en-US/docs/Web/CSS/Syntax +/en-US/docs/CSS/Syntax /en-US/docs/Web/CSS/CSS_syntax/Syntax /en-US/docs/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow /en-US/docs/CSS/Tutorial/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/CSS/Tutorials /en-US/docs/Web/CSS/Tutorials @@ -11817,6 +11817,7 @@ /en-US/docs/Web/CSS/Adjacent_sibling_selectors /en-US/docs/Web/CSS/Next-sibling_combinator /en-US/docs/Web/CSS/Alias /en-US/docs/Web/CSS/cursor /en-US/docs/Web/CSS/All_About_The_Containing_Block /en-US/docs/Web/CSS/CSS_display/Containing_block +/en-US/docs/Web/CSS/At-rule /en-US/docs/Web/CSS/CSS_syntax/At-rule /en-US/docs/Web/CSS/Aural /en-US/docs/Web/CSS/@media/aural /en-US/docs/Web/CSS/Block_formatting_context /en-US/docs/Web/CSS/CSS_display/Block_formatting_context /en-US/docs/Web/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts @@ -11949,6 +11950,7 @@ /en-US/docs/Web/CSS/CSS_values_syntax /en-US/docs/Web/CSS /en-US/docs/Web/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/Web/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator +/en-US/docs/Web/CSS/Comments /en-US/docs/Web/CSS/CSS_syntax/Comments /en-US/docs/Web/CSS/Common_CSS_Questions /en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ /en-US/docs/Web/CSS/Compositing_and_Blending /en-US/docs/Web/CSS/CSS_compositing_and_blending /en-US/docs/Web/CSS/Containing_block /en-US/docs/Web/CSS/CSS_display/Containing_block @@ -11980,6 +11982,7 @@ /en-US/docs/Web/CSS/Selector_lists /en-US/docs/Web/CSS/Selector_list /en-US/docs/Web/CSS/Selectors /en-US/docs/Web/CSS/CSS_Selectors /en-US/docs/Web/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity +/en-US/docs/Web/CSS/Syntax /en-US/docs/Web/CSS/CSS_syntax/Syntax /en-US/docs/Web/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow /en-US/docs/Web/CSS/Tools /en-US/docs/Web/CSS /en-US/docs/Web/CSS/Tools/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 17f7bb6f8edb95b..e37041dccac1141 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -75814,38 +75814,6 @@ "DBaron" ] }, - "Web/CSS/At-rule": { - "modified": "2020-11-13T09:49:20.788Z", - "contributors": [ - "ramiy", - "hinell", - "mfuji09", - "wbamberg", - "sashakrauzer", - "erictleung", - "cbb", - "xfq", - "mfluehr", - "Alhadis", - "BychekRU", - "Sebastianz", - "pygy", - "cvrebert", - "jwhitlock", - "bradleyflood", - "teoli", - "diraniyoussef", - "trevorh", - "RyanayR", - "FredB", - "ethertank", - "Sheppy", - "rsternagel", - "jeremy.booker", - "bpartridge81", - "Marsf" - ] - }, "Web/CSS/Attribute_selectors": { "modified": "2020-10-15T21:04:18.142Z", "contributors": [ @@ -77906,6 +77874,82 @@ "modified": "2020-10-15T21:38:35.251Z", "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] }, + "Web/CSS/CSS_syntax/At-rule": { + "modified": "2020-11-13T09:49:20.788Z", + "contributors": [ + "ramiy", + "hinell", + "mfuji09", + "wbamberg", + "sashakrauzer", + "erictleung", + "cbb", + "xfq", + "mfluehr", + "Alhadis", + "BychekRU", + "Sebastianz", + "pygy", + "cvrebert", + "jwhitlock", + "bradleyflood", + "teoli", + "diraniyoussef", + "trevorh", + "RyanayR", + "FredB", + "ethertank", + "Sheppy", + "rsternagel", + "jeremy.booker", + "bpartridge81", + "Marsf" + ] + }, + "Web/CSS/CSS_syntax/Comments": { + "modified": "2020-07-07T12:35:07.540Z", + "contributors": [ + "wbamberg", + "mfluehr", + "Sebastianz", + "BychekRU", + "SphinxKnight", + "Sheppy", + "ethertank", + "teoli", + "tregagnon", + "jswisher", + "McGurk" + ] + }, + "Web/CSS/CSS_syntax/Syntax": { + "modified": "2020-07-07T12:39:09.357Z", + "contributors": [ + "wbamberg", + "chrisdavidmills", + "dcompcoder", + "ramiy", + "JonathanPool", + "carlosevandro", + "mfuji09", + "estelle", + "fluorine", + "mfluehr", + "tshma", + "wahome", + "torazaburo", + "NetNerd", + "pygy", + "SphinxKnight", + "kscarfone", + "FredB", + "elomatreb", + "ethertank", + "teoli", + "Sheppy", + "peterholthoffman" + ] + }, "Web/CSS/CSS_table": { "modified": "2020-07-07T12:26:58.542Z", "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] @@ -78148,22 +78192,6 @@ "chrisdavidmills" ] }, - "Web/CSS/Comments": { - "modified": "2020-07-07T12:35:07.540Z", - "contributors": [ - "wbamberg", - "mfluehr", - "Sebastianz", - "BychekRU", - "SphinxKnight", - "Sheppy", - "ethertank", - "teoli", - "tregagnon", - "jswisher", - "McGurk" - ] - }, "Web/CSS/Descendant_combinator": { "modified": "2020-10-15T21:04:18.445Z", "contributors": [ @@ -78664,34 +78692,6 @@ "miken32" ] }, - "Web/CSS/Syntax": { - "modified": "2020-07-07T12:39:09.357Z", - "contributors": [ - "wbamberg", - "chrisdavidmills", - "dcompcoder", - "ramiy", - "JonathanPool", - "carlosevandro", - "mfuji09", - "estelle", - "fluorine", - "mfluehr", - "tshma", - "wahome", - "torazaburo", - "NetNerd", - "pygy", - "SphinxKnight", - "kscarfone", - "FredB", - "elomatreb", - "ethertank", - "teoli", - "Sheppy", - "peterholthoffman" - ] - }, "Web/CSS/Tutorials": { "modified": "2020-04-27T22:31:52.172Z", "contributors": ["mfluehr", "kscarfone", "Sheppy", "teoli", "robwala"] diff --git a/files/en-us/glossary/css_descriptor/index.md b/files/en-us/glossary/css_descriptor/index.md index 744c2b19378f7be..ff44c924a8e6828 100644 --- a/files/en-us/glossary/css_descriptor/index.md +++ b/files/en-us/glossary/css_descriptor/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -A **CSS descriptor** defines the characteristics of an [at-rule](/en-US/docs/Web/CSS/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-rule). At-rules may have one or multiple descriptors. Each descriptor has: - A name - A value, which holds the component values diff --git a/files/en-us/glossary/media/css/index.md b/files/en-us/glossary/media/css/index.md index e897855d5e3a3e7..cb35462b30c7ed9 100644 --- a/files/en-us/glossary/media/css/index.md +++ b/files/en-us/glossary/media/css/index.md @@ -16,5 +16,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/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-rule): 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 diff --git a/files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md b/files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md index 0331a63e22446d8..867a17da92e7d06 100644 --- a/files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md +++ b/files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md @@ -158,6 +158,6 @@ 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/At-rule) +- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [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 diff --git a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md index db69f56a8dc623e..e7dc62f123d3948 100644 --- a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md @@ -453,7 +453,7 @@ Look up different values of properties listed below. Try writing CSS rules that ### @rules -CSS [@rules](/en-US/docs/Web/CSS/At-rule) (pronounced "at-rules") provide instructions for how CSS should behave. One common @rule that you are likely to encounter is `@media`, which is used to create [media queries](/en-US/docs/Web/CSS/CSS_media_queries). Media queries use conditional logic for applying CSS styling. +CSS [@rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) (pronounced "at-rules") provide instructions for how CSS should behave. One common @rule that you are likely to encounter is `@media`, which is used to create [media queries](/en-US/docs/Web/CSS/CSS_media_queries). Media queries use conditional logic for applying CSS styling. In the example below, the stylesheet defines a default pink background for the `` element. However, a media query follows that sets a blue background on the `` element if the browser viewport is wider than 30em. diff --git a/files/en-us/learn_web_development/core/styling_basics/index.md b/files/en-us/learn_web_development/core/styling_basics/index.md index 4cc896039317f3b..eec989bdc5a10a4 100644 --- a/files/en-us/learn_web_development/core/styling_basics/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/index.md @@ -38,7 +38,7 @@ Before starting this module, you should have a basic work environment set up (as - [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - : The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts between style declarations are resolved. - [Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) - - : CSS rules contain [declarations](/en-US/docs/Web/CSS/Syntax#css_declarations), which in turn are composed of properties and values. Each property used in CSS has a **value type** that describes what kind of values it is allowed to have. In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work. + - : CSS rules contain [declarations](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_declarations), which in turn are composed of properties and values. Each property used in CSS has a **value type** that describes what kind of values it is allowed to have. In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work. - [Sizing items in CSS](/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing) - : Understanding how big the different features in your design will be is important. In this lesson we will summarize the various ways elements get a size via CSS and define a few terms about sizing that will help you in the future. - [Backgrounds and borders](/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders) diff --git a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md index 3beb6dabebec850..ae6b60d42a435fa 100644 --- a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md @@ -8,7 +8,7 @@ page-type: learn-module-chapter {{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Handling_conflicts", "Learn_web_development/Core/Styling_basics/Sizing", "Learn_web_development/Core/Styling_basics")}} -CSS rules contain [declarations](/en-US/docs/Web/CSS/Syntax#css_declarations), which in turn are composed of properties and values. +CSS rules contain [declarations](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_declarations), which in turn are composed of properties and values. Each property used in CSS has a **value type** that describes what kind of values it is allowed to have. In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md index 28b8a6bbc7c1870..732f08ab951a9e0 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md @@ -57,7 +57,7 @@ This section lists `page-type` values for pages under [Web/Accessibility](/en-US This section lists `page-type` values for pages under [Web/CSS](/en-US/docs/Web/CSS). Every page in that part of the tree must have a `page-type`, and its value must be one of those listed below or one of the [generic page type](#generic_page_types) values. -- `css-at-rule`: an [at-rule](/en-US/docs/Web/CSS/At-rule), like {{cssxref("@media")}}. +- `css-at-rule`: an [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), like {{cssxref("@media")}}. - `css-at-rule-descriptor`: an at-rule descriptor, like [`@counter-style/prefix`](/en-US/docs/Web/CSS/@counter-style/prefix). - `css-combinator`: a combinator, like the [descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator). - `css-function`: a [function](/en-US/docs/Web/CSS/CSS_Functions), like {{cssxref("max")}}. diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 02ec11963003687..ed2ef33a49690b5 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -354,7 +354,7 @@ For more information, see [Firefox bug 1807685](https://bugzil.la/1807685), [Fir ### @scope at-rule -The [@scope](/en-US/docs/Web/CSS/@scope) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) allows you to select specific child elements without having to overly increase the specificity of CSS selectors ([Firefox bug 1886441](https://bugzil.la/1886441)). +The [@scope](/en-US/docs/Web/CSS/@scope) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) allows you to select specific child elements without having to overly increase the specificity of CSS selectors ([Firefox bug 1886441](https://bugzil.la/1886441)). diff --git a/files/en-us/mozilla/firefox/releases/11/index.md b/files/en-us/mozilla/firefox/releases/11/index.md index 4c41f00ec46c5a3..21982bb1653611b 100644 --- a/files/en-us/mozilla/firefox/releases/11/index.md +++ b/files/en-us/mozilla/firefox/releases/11/index.md @@ -36,7 +36,7 @@ Firefox 11 shipped on March 13, 2012. This article provides information about th ### CSS - the [`text-size-adjust`](/en-US/docs/Web/CSS/text-size-adjust) property is now supported -- [CSS3](/en-US/docs/CSS/CSS3) [Conditional Rules](/en-US/docs/CSS/CSS3#conditional_rules) are now better supported: nested statements can now be added to [@media](/en-US/docs/Web/CSS/@media), [@-moz-document](/en-US/docs/Web/CSS/@document). (See [CSS Syntax](/en-US/docs/Web/CSS/Syntax) and [CSS at-rules](/en-US/docs/Web/CSS/At-rule)). +- [CSS3](/en-US/docs/CSS/CSS3) [Conditional Rules](/en-US/docs/CSS/CSS3#conditional_rules) are now better supported: nested statements can now be added to [@media](/en-US/docs/Web/CSS/@media), [@-moz-document](/en-US/docs/Web/CSS/@document). (See [CSS Syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) and [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule)). ### JavaScript diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md index 9fcaf172a3d254f..e697077fee16ad5 100644 --- a/files/en-us/mozilla/firefox/releases/114/index.md +++ b/files/en-us/mozilla/firefox/releases/114/index.md @@ -43,7 +43,7 @@ No notable changes. - The [WebTransport API](/en-US/docs/Web/API/WebTransport_API) is now supported, which includes the following interfaces: [`WebTransport`](/en-US/docs/Web/API/WebTransport), [`WebTransportBidirectionalStream`](/en-US/docs/Web/API/WebTransportBidirectionalStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream), [`WebTransportReceiveStream`](/en-US/docs/Web/API/WebTransportReceiveStream), [`WebTransportSendStream`](/en-US/docs/Web/API/WebTransportSendStream), [`WebTransportDatagramDuplexStream`](/en-US/docs/Web/API/WebTransportDatagramDuplexStream) and [`WebTransportError`](/en-US/docs/Web/API/WebTransportError). For more information see [Firefox bug 1692754](https://bugzil.la/1692754), [Firefox bug 1818754](https://bugzil.la/1818754), and [Firefox bug 1791835](https://bugzil.la/1791835). -- [`CSSImportRule.supportsText`](/en-US/docs/Web/API/CSSImportRule/supportsText) can now be used for getting any `supports()` conditions that were specified when using the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule) ([Firefox bug 1829590](https://bugzil.la/1829590)). +- [`CSSImportRule.supportsText`](/en-US/docs/Web/API/CSSImportRule/supportsText) can now be used for getting any `supports()` conditions that were specified when using the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) ([Firefox bug 1829590](https://bugzil.la/1829590)). #### Removals diff --git a/files/en-us/mozilla/firefox/releases/115/index.md b/files/en-us/mozilla/firefox/releases/115/index.md index b830cf026bceae5..eb3f20a87202780 100644 --- a/files/en-us/mozilla/firefox/releases/115/index.md +++ b/files/en-us/mozilla/firefox/releases/115/index.md @@ -18,7 +18,7 @@ This article provides information about the changes in Firefox 115 that affect d ### CSS - The CSS {{cssxref("animation-composition")}} property is now supported by default. You can use this property to specify the composite operation to use when multiple animations affect the same property simultaneously. ([Firefox bug 1823862](https://bugzil.la/1823862)). -- The `supports-conditions` in the CSS {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule) `supports()` function is now supported by default. This feature allows stylesheets to be imported only if the specified feature is supported in the user's browser. ([Firefox bug 1830779](https://bugzil.la/1830779)). +- The `supports-conditions` in the CSS {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) `supports()` function is now supported by default. This feature allows stylesheets to be imported only if the specified feature is supported in the user's browser. ([Firefox bug 1830779](https://bugzil.la/1830779)). ### JavaScript diff --git a/files/en-us/web/api/css_properties_and_values_api/guide/index.md b/files/en-us/web/api/css_properties_and_values_api/guide/index.md index 3bd0bdaf955f94b..ce6c6dee855c503 100644 --- a/files/en-us/web/api/css_properties_and_values_api/guide/index.md +++ b/files/en-us/web/api/css_properties_and_values_api/guide/index.md @@ -28,7 +28,7 @@ window.CSS.registerProperty({ ### @property -The same registration can take place in CSS. The following will register a [custom property](/en-US/docs/Web/CSS/--*) named `--my-prop` using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/At-rule). `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value: +The same registration can take place in CSS. The following will register a [custom property](/en-US/docs/Web/CSS/--*) named `--my-prop` using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). `--my-prop` will use the CSS color syntax, it will have a default value of `#c0ffee`, and it will not inherit its value: ```css @property --my-prop { diff --git a/files/en-us/web/api/css_properties_and_values_api/index.md b/files/en-us/web/api/css_properties_and_values_api/index.md index 3b75e09c971033b..27faface378c870 100644 --- a/files/en-us/web/api/css_properties_and_values_api/index.md +++ b/files/en-us/web/api/css_properties_and_values_api/index.md @@ -16,7 +16,7 @@ The **CSS Properties and Values API** — part of the [CSS Houdini](/en-US/docs/ - {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} - : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/--*). Access this interface through {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} in [JavaScript](/en-US/docs/Web/JavaScript). - {{cssxref('@property')}} - - : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/--*). Access this interface through {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/At-rule) in [CSS](/en-US/docs/Web/CSS). + - : Defines how a browser should parse [CSS custom properties](/en-US/docs/Web/CSS/--*). Access this interface through {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) in [CSS](/en-US/docs/Web/CSS). ## Examples @@ -31,7 +31,7 @@ window.CSS.registerProperty({ }); ``` -The same registration can take place in [CSS](/en-US/docs/Web/CSS) using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/At-rule): +The same registration can take place in [CSS](/en-US/docs/Web/CSS) using the {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule): ```css @property --my-color { diff --git a/files/en-us/web/api/cssconditionrule/index.md b/files/en-us/web/api/cssconditionrule/index.md index 25f6b3baa327958..33598336532faf3 100644 --- a/files/en-us/web/api/cssconditionrule/index.md +++ b/files/en-us/web/api/cssconditionrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSConditionRule {{ APIRef("CSSOM") }} -An object implementing the **`CSSConditionRule`** interface represents a single condition CSS [at-rule](/en-US/docs/Web/CSS/At-rule), which consists of a condition and a statement block. +An object implementing the **`CSSConditionRule`** interface represents a single condition CSS [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), which consists of a condition and a statement block. Three objects derive from `CSSConditionRule`: {{domxref("CSSMediaRule")}}, {{domxref("CSSContainerRule")}} and {{domxref("CSSSupportsRule")}}. diff --git a/files/en-us/web/api/csscounterstylerule/index.md b/files/en-us/web/api/csscounterstylerule/index.md index 8bfecef61a59b46..9c628a253c866cd 100644 --- a/files/en-us/web/api/csscounterstylerule/index.md +++ b/files/en-us/web/api/csscounterstylerule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSCounterStyleRule {{APIRef("CSSOM")}} -The **`CSSCounterStyleRule`** interface represents an {{CSSxRef("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSCounterStyleRule`** interface represents an {{CSSxRef("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssfontfacerule/index.md b/files/en-us/web/api/cssfontfacerule/index.md index b290a3ec73a723b..8327236a7e78a5a 100644 --- a/files/en-us/web/api/cssfontfacerule/index.md +++ b/files/en-us/web/api/cssfontfacerule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSFontFaceRule {{APIRef("CSSOM")}} -The **`CSSFontFaceRule`** interface represents an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSFontFaceRule`** interface represents an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssfontfacerule/style/index.md b/files/en-us/web/api/cssfontfacerule/style/index.md index 0435665bbe0de76..d2de922796895f2 100644 --- a/files/en-us/web/api/cssfontfacerule/style/index.md +++ b/files/en-us/web/api/cssfontfacerule/style/index.md @@ -8,7 +8,7 @@ browser-compat: api.CSSFontFaceRule.style {{APIRef("CSSOM")}} -The read-only **`style`** property of the {{domxref("CSSFontFaceRule")}} interface returns the style information from the {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/At-rule). This will be in the form of a {{domxref("CSSStyleDeclaration")}} object. +The read-only **`style`** property of the {{domxref("CSSFontFaceRule")}} interface returns the style information from the {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). This will be in the form of a {{domxref("CSSStyleDeclaration")}} object. ## Value diff --git a/files/en-us/web/api/cssfontfeaturevaluesrule/index.md b/files/en-us/web/api/cssfontfeaturevaluesrule/index.md index fceecfc4962024b..9fa02d141281068 100644 --- a/files/en-us/web/api/cssfontfeaturevaluesrule/index.md +++ b/files/en-us/web/api/cssfontfeaturevaluesrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSFontFeatureValuesRule {{APIRef("CSSOM")}} -The **`CSSFontFeatureValuesRule`** interface represents an {{cssxref("@font-feature-values")}} [at-rule](/en-US/docs/Web/CSS/At-rule), letting developers assign for each font face a common name to specify features indices to be used in {{cssxref("font-variant-alternates")}}. +The **`CSSFontFeatureValuesRule`** interface represents an {{cssxref("@font-feature-values")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), letting developers assign for each font face a common name to specify features indices to be used in {{cssxref("font-variant-alternates")}}. {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssfontpalettevaluesrule/index.md b/files/en-us/web/api/cssfontpalettevaluesrule/index.md index b50b75e7b707d8e..da383e4e6d26022 100644 --- a/files/en-us/web/api/cssfontpalettevaluesrule/index.md +++ b/files/en-us/web/api/cssfontpalettevaluesrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSFontPaletteValuesRule {{APIRef("CSSOM")}} -The **`CSSFontPaletteValuesRule`** interface represents an {{cssxref("@font-palette-values")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSFontPaletteValuesRule`** interface represents an {{cssxref("@font-palette-values")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssgroupingrule/index.md b/files/en-us/web/api/cssgroupingrule/index.md index 64b6332694f3efe..15530ca740116f3 100644 --- a/files/en-us/web/api/cssgroupingrule/index.md +++ b/files/en-us/web/api/cssgroupingrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSGroupingRule {{ APIRef("CSSOM") }} -The **`CSSGroupingRule`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents any CSS [at-rule](/en-US/docs/Web/CSS/At-rule) that contains other rules nested within it. +The **`CSSGroupingRule`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents any CSS [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) that contains other rules nested within it. {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssimportrule/href/index.md b/files/en-us/web/api/cssimportrule/href/index.md index fc45ea416c29eee..1437e767cfbc7e3 100644 --- a/files/en-us/web/api/cssimportrule/href/index.md +++ b/files/en-us/web/api/cssimportrule/href/index.md @@ -10,7 +10,7 @@ browser-compat: api.CSSImportRule.href The read-only **`href`** property of the {{domxref("CSSImportRule")}} interface returns the URL specified by the -{{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +{{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). The resolved URL will be the [`href`](/en-US/docs/Web/HTML/Element/link#href) attribute of the associated stylesheet. diff --git a/files/en-us/web/api/cssimportrule/index.md b/files/en-us/web/api/cssimportrule/index.md index d28e4a04fea0128..67123c879d4518e 100644 --- a/files/en-us/web/api/cssimportrule/index.md +++ b/files/en-us/web/api/cssimportrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSImportRule {{APIRef("CSSOM")}} -The **`CSSImportRule`** interface represents an {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSImportRule`** interface represents an {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssimportrule/layername/index.md b/files/en-us/web/api/cssimportrule/layername/index.md index 108669f9a211a8f..8640801418a819c 100644 --- a/files/en-us/web/api/cssimportrule/layername/index.md +++ b/files/en-us/web/api/cssimportrule/layername/index.md @@ -8,7 +8,7 @@ browser-compat: api.CSSImportRule.layerName {{APIRef("CSSOM")}} -The read-only **`layerName`** property of the {{domxref("CSSImportRule")}} interface returns the name of the cascade layer created by the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The read-only **`layerName`** property of the {{domxref("CSSImportRule")}} interface returns the name of the cascade layer created by the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). If the created layer is anonymous, the string is empty (`""`), if no layer has been created, it is the `null` object. diff --git a/files/en-us/web/api/cssimportrule/stylesheet/index.md b/files/en-us/web/api/cssimportrule/stylesheet/index.md index 64705bbf77d46e6..ee239789d75fc5d 100644 --- a/files/en-us/web/api/cssimportrule/stylesheet/index.md +++ b/files/en-us/web/api/cssimportrule/stylesheet/index.md @@ -10,10 +10,10 @@ browser-compat: api.CSSImportRule.styleSheet The read-only **`styleSheet`** property of the {{domxref("CSSImportRule")}} interface returns the CSS Stylesheet specified by the -{{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule). This will be +{{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). This will be in the form of a {{domxref("CSSStyleSheet")}} object. -An {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule) always has +An {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) always has an associated stylesheet. ## Value diff --git a/files/en-us/web/api/cssimportrule/supportstext/index.md b/files/en-us/web/api/cssimportrule/supportstext/index.md index 5207bbbd259c2c6..0b7279e4c0f343d 100644 --- a/files/en-us/web/api/cssimportrule/supportstext/index.md +++ b/files/en-us/web/api/cssimportrule/supportstext/index.md @@ -8,7 +8,7 @@ browser-compat: api.CSSImportRule.supportsText {{APIRef("CSSOM")}} -The read-only **`supportsText`** property of the {{domxref("CSSImportRule")}} interface returns the supports condition specified by the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The read-only **`supportsText`** property of the {{domxref("CSSImportRule")}} interface returns the supports condition specified by the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). ## Value diff --git a/files/en-us/web/api/csskeyframerule/index.md b/files/en-us/web/api/csskeyframerule/index.md index ef74bd050bb2ab0..9322744329c06d5 100644 --- a/files/en-us/web/api/csskeyframerule/index.md +++ b/files/en-us/web/api/csskeyframerule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSKeyframeRule {{APIRef("CSSOM")}} -The **`CSSKeyframeRule`** interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a {{cssxref("@keyframes")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSKeyframeRule`** interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a {{cssxref("@keyframes")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/csskeyframesrule/cssrules/index.md b/files/en-us/web/api/csskeyframesrule/cssrules/index.md index 3bfd0d2968d8073..9567b7cff5ee14e 100644 --- a/files/en-us/web/api/csskeyframesrule/cssrules/index.md +++ b/files/en-us/web/api/csskeyframesrule/cssrules/index.md @@ -8,7 +8,7 @@ browser-compat: api.CSSKeyframesRule.cssRules {{APIRef("CSSOM") }} -The read-only **`cssRules`** property of the {{domxref("CSSKeyframeRule")}} interface returns a {{domxref("CSSRuleList")}} containing the rules in the keyframes [at-rule](/en-US/docs/Web/CSS/At-rule). +The read-only **`cssRules`** property of the {{domxref("CSSKeyframeRule")}} interface returns a {{domxref("CSSRuleList")}} containing the rules in the keyframes [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). > [!NOTE] > The `CSSKeyframeRule` itself is indexable like an array, and functions similarly to its `cssRules` property. diff --git a/files/en-us/web/api/csskeyframesrule/index.md b/files/en-us/web/api/csskeyframesrule/index.md index c997ffb2328d0fb..40cec1214f9b179 100644 --- a/files/en-us/web/api/csskeyframesrule/index.md +++ b/files/en-us/web/api/csskeyframesrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSKeyframesRule {{APIRef("CSSOM")}} -The **`CSSKeyframesRule`** interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contents of a whole {{cssxref("@keyframes")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSKeyframesRule`** interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contents of a whole {{cssxref("@keyframes")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssnamespacerule/index.md b/files/en-us/web/api/cssnamespacerule/index.md index 6a22be2005a470a..f6b8ec8b5758c85 100644 --- a/files/en-us/web/api/cssnamespacerule/index.md +++ b/files/en-us/web/api/cssnamespacerule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSNamespaceRule {{APIRef("CSSOM")}} -The **`CSSNamespaceRule`** interface describes an object representing a single CSS {{ cssxref("@namespace") }} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSNamespaceRule`** interface describes an object representing a single CSS {{ cssxref("@namespace") }} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/csspagedescriptors/index.md b/files/en-us/web/api/csspagedescriptors/index.md index 7a9b5ee88f8238e..70819008a7ba9e3 100644 --- a/files/en-us/web/api/csspagedescriptors/index.md +++ b/files/en-us/web/api/csspagedescriptors/index.md @@ -9,7 +9,7 @@ browser-compat: api.CSSPageDescriptors {{APIRef("CSSOM")}}{{SeeCompatTable}} -The **`CSSPageDescriptors`** interface represents a CSS declaration block for an {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSPageDescriptors`** interface represents a CSS declaration block for an {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). The interface exposes style information and various style-related methods and properties for the page. Each multi-word property has versions in camel- and snake-case. diff --git a/files/en-us/web/api/csspagerule/style/index.md b/files/en-us/web/api/csspagerule/style/index.md index 21292ee97622069..21fc12c38b77ae5 100644 --- a/files/en-us/web/api/csspagerule/style/index.md +++ b/files/en-us/web/api/csspagerule/style/index.md @@ -9,11 +9,11 @@ browser-compat: api.CSSPageRule.style {{APIRef("CSSOM")}} The **`style`** read-only property of the {{domxref("CSSPageRule")}} interface returns a {{domxref("CSSPageDescriptors")}} object. -This represents a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) for a CSS {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), and exposes style information and various style-related methods and properties for the page. +This represents a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) for a CSS {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), and exposes style information and various style-related methods and properties for the page. ## Value -A {{domxref("CSSPageDescriptors")}} object with properties that match the associated {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +A {{domxref("CSSPageDescriptors")}} object with properties that match the associated {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). > [!NOTE] > Earlier versions of the specification defined this property as a {{domxref("CSSStyleDeclaration")}}. diff --git a/files/en-us/web/api/csspositiontrydescriptors/index.md b/files/en-us/web/api/csspositiontrydescriptors/index.md index 818a84b03d629ed..569e7e5d450a07b 100644 --- a/files/en-us/web/api/csspositiontrydescriptors/index.md +++ b/files/en-us/web/api/csspositiontrydescriptors/index.md @@ -9,7 +9,7 @@ browser-compat: api.CSSPositionTryDescriptors {{APIRef("CSSOM")}}{{SeeCompatTable}} -The **`CSSPositionTryDescriptors`** interface defines properties that represent the list of CSS descriptors that can be set in the body of a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSPositionTryDescriptors`** interface defines properties that represent the list of CSS descriptors that can be set in the body of a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). Each descriptor in the body of the corresponding {{cssxref("@position-try")}} at-rule can be accessed using either its property name in [bracket notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#bracket_notation) or the camel-case version of the property name "propertyName" in [dot notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#dot_notation). For example, you can access the CSS property "property-name" as `style["property-name"]` or `style.propertyName`, where `style` is a `CSSPositionTryDescriptors` instance. diff --git a/files/en-us/web/api/csspositiontryrule/index.md b/files/en-us/web/api/csspositiontryrule/index.md index f5ece1d94fdb1de..957262d84ec80eb 100644 --- a/files/en-us/web/api/csspositiontryrule/index.md +++ b/files/en-us/web/api/csspositiontryrule/index.md @@ -9,7 +9,7 @@ browser-compat: api.CSSPositionTryRule {{APIRef("CSSOM")}}{{SeeCompatTable}} -The **`CSSPositionTryRule`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSPositionTryRule`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} diff --git a/files/en-us/web/api/cssstylesheet/insertrule/index.md b/files/en-us/web/api/cssstylesheet/insertrule/index.md index 367b4943cdc1dd8..fc68dcda57fbb6d 100644 --- a/files/en-us/web/api/cssstylesheet/insertrule/index.md +++ b/files/en-us/web/api/cssstylesheet/insertrule/index.md @@ -31,10 +31,10 @@ insertRule(rule, index) - : A string containing the rule to be inserted. What the inserted rule must contain depends on its type: - - **For [rule-sets](/en-US/docs/Web/CSS/Syntax#css_statements)**, both + - **For [rule-sets](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_statements)**, both a [selector](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) and a style declaration. - - **For [at-rules](/en-US/docs/Web/CSS/At-rule)**, both an + - **For [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule)**, both an at-identifier and the rule content. - `index` {{optional_inline}} diff --git a/files/en-us/web/api/csssupportsrule/index.md b/files/en-us/web/api/csssupportsrule/index.md index fa5f538042a455c..05eca45f7bf5dd6 100644 --- a/files/en-us/web/api/csssupportsrule/index.md +++ b/files/en-us/web/api/csssupportsrule/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSSupportsRule {{APIRef("CSSOM")}} -The **`CSSSupportsRule`** interface represents a single CSS {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`CSSSupportsRule`** interface represents a single CSS {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). {{InheritanceDiagram}} @@ -21,7 +21,7 @@ _Inherits methods from its ancestors {{domxref("CSSConditionRule")}}, {{domxref( ## Examples -The CSS includes a CSS feature query using the {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/At-rule), containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`. +The CSS includes a CSS feature query using the {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), containing one style rule. This will be the first CSSRule returned by `document.styleSheets[0].cssRules`. `myRules[0]` therefore returns a `CSSSupportsRule` object. ```css diff --git a/files/en-us/web/css/@charset/index.md b/files/en-us/web/css/@charset/index.md index 8f982301b260633..03405a6d627bb16 100644 --- a/files/en-us/web/css/@charset/index.md +++ b/files/en-us/web/css/@charset/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.charset {{CSSRef}} -The **`@charset`** [CSS](/en-US/docs/Web/CSS) rule specifies the character encoding used in the style sheet. This syntax is useful when using non-{{Glossary("ASCII")}} characters in some CSS properties, like {{ cssxref("content") }}. Although the first character in `@charset` is the `@` symbol, it is not an [at-rule](/en-US/docs/Web/CSS/At-rule). It is a specific byte sequence that can only be placed at the very beginning of a stylesheet. No other characters, except the Unicode byte-order mark, are allowed before it. It also does not follow normal CSS syntax rules such as use of quotes or whitespace. +The **`@charset`** [CSS](/en-US/docs/Web/CSS) rule specifies the character encoding used in the style sheet. This syntax is useful when using non-{{Glossary("ASCII")}} characters in some CSS properties, like {{ cssxref("content") }}. Although the first character in `@charset` is the `@` symbol, it is not an [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). It is a specific byte sequence that can only be placed at the very beginning of a stylesheet. No other characters, except the Unicode byte-order mark, are allowed before it. It also does not follow normal CSS syntax rules such as use of quotes or whitespace. If a `@charset` is not recognized as the charset declaration, it is parsed as a normal at-rule. The [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module deprecates this fallback behavior, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked. diff --git a/files/en-us/web/css/@color-profile/index.md b/files/en-us/web/css/@color-profile/index.md index 2ccdb69c512c912..e67c18c6adf175d 100644 --- a/files/en-us/web/css/@color-profile/index.md +++ b/files/en-us/web/css/@color-profile/index.md @@ -7,7 +7,7 @@ spec-urls: https://www.w3.org/TR/css-color-5/#at-profile {{CSSRef}} -The **`@color-profile`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) defines and names a color profile which can later be used in the {{cssxref("color_value/color", "color()")}} function to specify a color. +The **`@color-profile`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) defines and names a color profile which can later be used in the {{cssxref("color_value/color", "color()")}} function to specify a color. ## Syntax diff --git a/files/en-us/web/css/@container/index.md b/files/en-us/web/css/@container/index.md index 7f0c103fa5ddb15..bcf3e345598bd96 100644 --- a/files/en-us/web/css/@container/index.md +++ b/files/en-us/web/css/@container/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.container {{CSSRef}} -The **`@container`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is a conditional group rule that applies styles to a [containment context](/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts). +The **`@container`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is a conditional group rule that applies styles to a [containment context](/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts). Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container size or [``](#container_style_queries) value changes. @@ -275,7 +275,7 @@ Container queries can also evaluate the computed style of the container element. } ``` -The parameter of each `style()` is a single ``. A **``** is a valid CSS [declaration](/en-US/docs/Web/CSS/Syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). +The parameter of each `style()` is a single ``. A **``** is a valid CSS [declaration](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). ```css @container style(--themeBackground), diff --git a/files/en-us/web/css/@counter-style/index.md b/files/en-us/web/css/@counter-style/index.md index 139d39c6ed66023..7866325e9fe4781 100644 --- a/files/en-us/web/css/@counter-style/index.md +++ b/files/en-us/web/css/@counter-style/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.counter-style {{CSSRef}} -The **`@counter-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The `@counter-style` rule contains [descriptors](#descriptors) defining how the counter value is converted into a string representation. +The **`@counter-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The `@counter-style` rule contains [descriptors](#descriptors) defining how the counter value is converted into a string representation. ```css @counter-style thumbs { diff --git a/files/en-us/web/css/@counter-style/symbols/index.md b/files/en-us/web/css/@counter-style/symbols/index.md index c10c925e876af5d..f396c1147af0d3e 100644 --- a/files/en-us/web/css/@counter-style/symbols/index.md +++ b/files/en-us/web/css/@counter-style/symbols/index.md @@ -31,7 +31,7 @@ The `symbols` descriptor is specified as a list of one or more space-separated ` ## Description -A symbol can be a string, image, or identifier. It is used within the {{cssxref("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +A symbol can be a string, image, or identifier. It is used within the {{cssxref("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). When the value of the {{cssxref('@counter-style/system', 'system')}} descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, the `symbols` descriptor must be specified. For the `additive` system, use the {{cssxref('@counter-style/additive-symbols', 'additive-symbols')}} descriptor instead to specify the symbols. diff --git a/files/en-us/web/css/@document/index.md b/files/en-us/web/css/@document/index.md index 67083a93068529b..9f154b5d6fc177e 100644 --- a/files/en-us/web/css/@document/index.md +++ b/files/en-us/web/css/@document/index.md @@ -10,7 +10,7 @@ browser-compat: css.at-rules.document {{CSSRef}}{{Deprecated_header}}{{Non-standard_header}} -The **`@document`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets (see [userchrome.org](https://www.userchrome.org/) for more information), though it can be used on author-defined style sheets, too. +The **`@document`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets (see [userchrome.org](https://www.userchrome.org/) for more information), though it can be used on author-defined style sheets, too. ```css @document url("https://www.example.com/") diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index 41c62b8e8ef674b..56c4d2e6c404556 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-face {{CSSRef}} -The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. +The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. ## Syntax diff --git a/files/en-us/web/css/@font-feature-values/index.md b/files/en-us/web/css/@font-feature-values/index.md index 81d314172dfd8ea..1b00e935fe52565 100644 --- a/files/en-us/web/css/@font-feature-values/index.md +++ b/files/en-us/web/css/@font-feature-values/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-feature-values {{CSSRef}} -The **`@font-feature-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you use a common name in the {{cssxref("font-variant-alternates")}} property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts. +The **`@font-feature-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) lets you use a common name in the {{cssxref("font-variant-alternates")}} property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts. The `@font-feature-values` at-rule may be used either at the top level of your CSS or inside any CSS conditional-group at-rule. 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 a943a3c3c5d9361..9ff59b7a11b5f55 100644 --- a/files/en-us/web/css/@font-palette-values/index.md +++ b/files/en-us/web/css/@font-palette-values/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.font-palette-values {{CSSRef}} -The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) allows you to customize the default values of [font-palette](/en-US/docs/Web/CSS/font-palette) created by the font-maker. +The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) allows you to customize the default values of [font-palette](/en-US/docs/Web/CSS/font-palette) created by the font-maker. ## Syntax diff --git a/files/en-us/web/css/@import/index.md b/files/en-us/web/css/@import/index.md index a31d21c2df93079..625274e82b01099 100644 --- a/files/en-us/web/css/@import/index.md +++ b/files/en-us/web/css/@import/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.import {{CSSRef}} -The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other valid stylesheets. +The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is used to import style rules from other valid stylesheets. An `@import` rule _must_ be defined at the top of the stylesheet, before any other at-rule (except [@charset](/en-US/docs/Web/CSS/@charset) and [@layer](/en-US/docs/Web/CSS/@layer)) and style declarations, or it will be ignored. ## Syntax @@ -63,7 +63,7 @@ As the `@import` at-rule is declared after the styles it is invalid and hence ig /* more styles */ ``` -The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/CSS_conditional_rules#at-rules). +The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/CSS_syntax/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/CSS_conditional_rules#at-rules). So that {{glossary("user agent", "user agents")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) after the URL. In the absence of any media query, the import is not conditional on the media used. Specifying `all` for the `list-of-media-queries` has the same effect. diff --git a/files/en-us/web/css/@import/layer_function/index.md b/files/en-us/web/css/@import/layer_function/index.md index 1a917fa0ce46906..8faa74e2a8bceb7 100644 --- a/files/en-us/web/css/@import/layer_function/index.md +++ b/files/en-us/web/css/@import/layer_function/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.import.layer {{CSSRef}} -The **`layer()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used along with the [`@import`](/en-US/docs/Web/CSS/@import) [at-rule](/en-US/docs/Web/CSS/At-rule) to put the imported resource in a separate named [cascade layer](/en-US/docs/Web/CSS/@layer). +The **`layer()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used along with the [`@import`](/en-US/docs/Web/CSS/@import) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) to put the imported resource in a separate named [cascade layer](/en-US/docs/Web/CSS/@layer). ## Syntax diff --git a/files/en-us/web/css/@keyframes/index.md b/files/en-us/web/css/@keyframes/index.md index 31708ee31f1a80b..5cebf9cd0b531ae 100644 --- a/files/en-us/web/css/@keyframes/index.md +++ b/files/en-us/web/css/@keyframes/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.keyframes {{CSSRef}} -The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](/en-US/docs/Web/CSS/CSS_transitions). +The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](/en-US/docs/Web/CSS/CSS_transitions). ## Syntax diff --git a/files/en-us/web/css/@layer/index.md b/files/en-us/web/css/@layer/index.md index 434f72815964272..57a8430064c288f 100644 --- a/files/en-us/web/css/@layer/index.md +++ b/files/en-us/web/css/@layer/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.layer {{CSSRef}} -The **`@layer`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers. +The **`@layer`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers. {{EmbedInteractiveExample("pages/tabbed/at-rule-layer.html", "tabbed-standard")}} diff --git a/files/en-us/web/css/@media/-webkit-transition/index.md b/files/en-us/web/css/@media/-webkit-transition/index.md index fe6fd792ccf6453..ccb83776ecfff34 100644 --- a/files/en-us/web/css/@media/-webkit-transition/index.md +++ b/files/en-us/web/css/@media/-webkit-transition/index.md @@ -32,7 +32,7 @@ Apple has [a description in Safari CSS Reference](https://developer.apple.com/li ### Use @supports instead -Do not use the `-webkit-transition` media feature. Instead, test for transition support using the CSS {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/At-rule), like this: +Do not use the `-webkit-transition` media feature. Instead, test for transition support using the CSS {{cssxref("@supports")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), like this: ```css @supports (transition: initial) { diff --git a/files/en-us/web/css/@media/index.md b/files/en-us/web/css/@media/index.md index a3059db4fd3b8e2..fcc323af37c2c69 100644 --- a/files/en-us/web/css/@media/index.md +++ b/files/en-us/web/css/@media/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.media {{CSSRef}} -The **`@media`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to apply part of a style sheet based on the result of one or more [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used. +The **`@media`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) can be used to apply part of a style sheet based on the result of one or more [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used. > [!NOTE] > In JavaScript, the rules created using `@media` can be accessed with the {{domxref("CSSMediaRule")}} CSS object model interface. diff --git a/files/en-us/web/css/@namespace/index.md b/files/en-us/web/css/@namespace/index.md index f9614b1832b8d0c..3d2dd0cefd0919c 100644 --- a/files/en-us/web/css/@namespace/index.md +++ b/files/en-us/web/css/@namespace/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.namespace {{CSSRef}} -**`@namespace`** is an [at-rule](/en-US/docs/Web/CSS/At-rule) that defines XML [namespaces](/en-US/docs/Glossary/Namespace) to be used in a [CSS](/en-US/docs/Glossary/CSS) [style sheet](/en-US/docs/Web/API/StyleSheet). +**`@namespace`** is an [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) that defines XML [namespaces](/en-US/docs/Glossary/Namespace) to be used in a [CSS](/en-US/docs/Glossary/CSS) [style sheet](/en-US/docs/Web/API/StyleSheet). {{EmbedInteractiveExample("pages/tabbed/at-rule-namespace.html", "tabbed-shorter")}} diff --git a/files/en-us/web/css/@page/size/index.md b/files/en-us/web/css/@page/size/index.md index db410550b4e40d0..0c5e3b1df85e112 100644 --- a/files/en-us/web/css/@page/size/index.md +++ b/files/en-us/web/css/@page/size/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.page.size {{CSSRef}} -The **`size`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) descriptor, used with the {{cssxref("@page")}} at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable. +The **`size`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) descriptor, used with the {{cssxref("@page")}} at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable. Size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions. diff --git a/files/en-us/web/css/@position-try/index.md b/files/en-us/web/css/@position-try/index.md index 04b003bb27cf8ac..eaf3ec9a041affe 100644 --- a/files/en-us/web/css/@position-try/index.md +++ b/files/en-us/web/css/@position-try/index.md @@ -9,7 +9,7 @@ browser-compat: css.at-rules.position-try {{CSSRef}}{{SeeCompatTable}} -The **`@position-try`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to define a custom position try fallback option, which can be used to define positioning and alignment for anchor-positioned elements. One or more sets of position try fallback options can be applied to the anchored element via the {{cssxref("position-try-fallbacks")}} property or {{cssxref("position-try")}} shorthand. When the positioned element is moved to a position where it starts to overflow its containing block or the viewport, the browser will select the first position try fallback option it finds that places the positioned element fully back on-screen. +The **`@position-try`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is used to define a custom position try fallback option, which can be used to define positioning and alignment for anchor-positioned elements. One or more sets of position try fallback options can be applied to the anchored element via the {{cssxref("position-try-fallbacks")}} property or {{cssxref("position-try")}} shorthand. When the positioned element is moved to a position where it starts to overflow its containing block or the viewport, the browser will select the first position try fallback option it finds that places the positioned element fully back on-screen. Each position option is named with a {{cssxref("dashed-ident")}} and contains a descriptor list specifying declarations that define information such as inset position, margin, sizing, and self-alignment. The `` is used to reference the custom position option in the {{cssxref("position-try-fallbacks")}} property and {{cssxref("position-try")}} shorthand. diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 7e54de53d55b2f5..669690ac2d80ad9 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.property {{CSSRef}} -The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) set of APIs. It allows developers to explicitly define [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. +The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) set of APIs. It allows developers to explicitly define [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JavaScript. Valid `@property` rules result in a registered custom property, which is similar to calling {{domxref('CSS.registerProperty_static', 'registerProperty()')}} with equivalent parameters. diff --git a/files/en-us/web/css/@property/inherits/index.md b/files/en-us/web/css/@property/inherits/index.md index ba62caf5c3f4613..3bcb765e90a6c79 100644 --- a/files/en-us/web/css/@property/inherits/index.md +++ b/files/en-us/web/css/@property/inherits/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.property.inherits {{CSSRef}} -The **`inherits`** [CSS](/en-US/docs/Web/CSS) descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) controls whether or not the registered [CSS custom property](/en-US/docs/Web/CSS/--*) inherits by default. +The **`inherits`** [CSS](/en-US/docs/Web/CSS) descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) controls whether or not the registered [CSS custom property](/en-US/docs/Web/CSS/--*) inherits by default. It is a required descriptor; if missing or invalid, the entire `@property` rule is invalid and ignored. ## Syntax diff --git a/files/en-us/web/css/@property/initial-value/index.md b/files/en-us/web/css/@property/initial-value/index.md index 04245a7503bf5a9..6e8b49f6a6d46c3 100644 --- a/files/en-us/web/css/@property/initial-value/index.md +++ b/files/en-us/web/css/@property/initial-value/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.property.initial-value {{CSSRef}} -The **`initial-value`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) specifies the initial value for the registered [CSS custom property](/en-US/docs/Web/CSS/--*). +The **`initial-value`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) specifies the initial value for the registered [CSS custom property](/en-US/docs/Web/CSS/--*). It is a required descriptor unless the {{cssxref("@property/syntax", "syntax")}} descriptor value is the universal syntax (`*`). If required but missing or invalid, the entire `@property` rule is invalid and ignored. diff --git a/files/en-us/web/css/@property/syntax/index.md b/files/en-us/web/css/@property/syntax/index.md index c9c383210ea84f0..0a69d84bb22a354 100644 --- a/files/en-us/web/css/@property/syntax/index.md +++ b/files/en-us/web/css/@property/syntax/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.property.syntax {{CSSRef}} -The **`syntax`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/At-rule) defines the allowed value types for the registered [CSS custom property](/en-US/docs/Web/CSS/--*). +The **`syntax`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) defines the allowed value types for the registered [CSS custom property](/en-US/docs/Web/CSS/--*). It controls how the property's specified value is processed to derive the {{cssxref("computed_value","computed value")}}. It is a required descriptor; if missing or invalid, the entire `@property` rule is invalid and ignored. diff --git a/files/en-us/web/css/@scope/index.md b/files/en-us/web/css/@scope/index.md index b93b2b356aceb8f..1be5f9560c1a5b2 100644 --- a/files/en-us/web/css/@scope/index.md +++ b/files/en-us/web/css/@scope/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.scope {{CSSRef}} -The **`@scope`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure. +The **`@scope`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure. In JavaScript, `@scope` can be accessed via the CSS object model interface {{DOMxRef("CSSScopeRule")}}. diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md index daa5941bb7924f2..30e3631fab899a0 100644 --- a/files/en-us/web/css/@starting-style/index.md +++ b/files/en-us/web/css/@starting-style/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.starting-style {{CSSRef}} -The **`@starting-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page. +The **`@starting-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page. ## Syntax diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index 616bdb66025b006..281031c25e5a4f3 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.supports {{CSSRef}} -The **`@supports`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you specify CSS declarations that depend on a browser's support for CSS features. +The **`@supports`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a _feature query_. The rule must be placed at the top level of your code or nested inside any other conditional group at-rule. diff --git a/files/en-us/web/css/@view-transition/index.md b/files/en-us/web/css/@view-transition/index.md index 6ad0a66fef23bf1..ea48fe539b2e63a 100644 --- a/files/en-us/web/css/@view-transition/index.md +++ b/files/en-us/web/css/@view-transition/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.view-transition {{CSSRef}} -The **`@view-transition`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to opt in the current and destination documents to undergo a [view transition](/en-US/docs/Web/API/View_Transition_API), in the case of a cross-document navigation. +The **`@view-transition`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) is used to opt in the current and destination documents to undergo a [view transition](/en-US/docs/Web/API/View_Transition_API), in the case of a cross-document navigation. For a cross-document view transition to work, the current and destination documents of the navigation also need to be on the same origin. @@ -101,5 +101,5 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr - {{cssxref("::view-transition-group", "::view-transition-group()")}} - {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} - [View Transition API](/en-US/docs/Web/API/View_Transition_API) -- [CSS at-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) diff --git a/files/en-us/web/css/_colon_first/index.md b/files/en-us/web/css/_colon_first/index.md index f34d07ed84cc4da..4fd0cc1832acf39 100644 --- a/files/en-us/web/css/_colon_first/index.md +++ b/files/en-us/web/css/_colon_first/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.first {{CSSRef}} -The **`:first`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), represents the first page of a printed document. (See {{cssxref(":first-child")}} for general first element of a node.) +The **`:first`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), represents the first page of a printed document. (See {{cssxref(":first-child")}} for general first element of a node.) ```css /* Selects the first page when printing */ diff --git a/files/en-us/web/css/_colon_left/index.md b/files/en-us/web/css/_colon_left/index.md index b711c163acac67d..86e0292ec00a1f4 100644 --- a/files/en-us/web/css/_colon_left/index.md +++ b/files/en-us/web/css/_colon_left/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.left {{CSSRef}} -The **`:left`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), represents all left-hand pages of a printed document. +The **`:left`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), represents all left-hand pages of a printed document. ```css /* Selects any left-hand pages when printing */ diff --git a/files/en-us/web/css/_colon_right/index.md b/files/en-us/web/css/_colon_right/index.md index 1c5223ef0c213a8..eabaa8979984a80 100644 --- a/files/en-us/web/css/_colon_right/index.md +++ b/files/en-us/web/css/_colon_right/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.right {{CSSRef}} -The **`:right`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), represents all right-hand pages of a printed document. +The **`:right`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule), represents all right-hand pages of a printed document. ```css /* Selects any right-hand pages when printing */ diff --git a/files/en-us/web/css/_colon_scope/index.md b/files/en-us/web/css/_colon_scope/index.md index 019b3fad81ba3b8..fea22f3dec5cf93 100644 --- a/files/en-us/web/css/_colon_scope/index.md +++ b/files/en-us/web/css/_colon_scope/index.md @@ -164,7 +164,7 @@ The scope of `context` is the element with the [`id`](/en-US/docs/Web/HTML/Globa ## See also -- The {{cssxref("@scope")}} [at-rule](/en-US/docs/Web/CSS/At-rule) +- The {{cssxref("@scope")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - The {{cssxref(":root")}} [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) - [Locating DOM elements using selectors](/en-US/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors) - {{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}} diff --git a/files/en-us/web/css/at-rule-functions/index.md b/files/en-us/web/css/at-rule-functions/index.md index d0c367776d7343b..5c56fb4756eaa71 100644 --- a/files/en-us/web/css/at-rule-functions/index.md +++ b/files/en-us/web/css/at-rule-functions/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -**[CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) functions** are at-rule statements that represent complex rules or can invoke special data processing or calculations. +**[CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) functions** are at-rule statements that represent complex rules or can invoke special data processing or calculations. ## Syntax diff --git a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md index 0384576962ce448..642e537523e8167 100644 --- a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md @@ -44,9 +44,9 @@ Finally, note that for non-replaced inline elements, the amount of space taken u - [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md index c4d8756587d3b32..3e29542f9cf0d70 100644 --- a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -73,9 +73,9 @@ p { ## See also - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/css_cascade/actual_value/index.md b/files/en-us/web/css/css_cascade/actual_value/index.md index 50e2ba07bfccd00..8d370a172215ce5 100644 --- a/files/en-us/web/css/css_cascade/actual_value/index.md +++ b/files/en-us/web/css/css_cascade/actual_value/index.md @@ -27,9 +27,9 @@ The {{glossary("user agent")}} performs four steps to calculate a property's act ## See also - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/css_cascade/cascade/index.md b/files/en-us/web/css/css_cascade/cascade/index.md index b81f48a7aa18a3d..ca2ac2ebaab8ef9 100644 --- a/files/en-us/web/css/css_cascade/cascade/index.md +++ b/files/en-us/web/css/css_cascade/cascade/index.md @@ -336,7 +336,7 @@ Only CSS property/value pair declarations participate in the cascade. CSS at-rul ### At-rules -CSS [at-rules](/en-US/docs/Web/CSS/At-rule) containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing _descriptors_, don't participate in the cascade. +CSS [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing _descriptors_, don't participate in the cascade. For the most part, the properties and descriptors defined in at-rules don't participate in the cascade. Only at-rules as a whole participate in the cascade. For example, within a `@font-face` rule, font names are identified by [`font-family`](/en-US/docs/Web/CSS/@font-face/font-family) descriptors. If several `@font-face` rules with the same descriptor are defined, only the most appropriate `@font-face`, as a whole, is considered. If more than one are identically appropriate, the entire `@font-face` declarations are compared using steps 1, 2, and 4 of the algorithm (there is no specificity when it comes to at-rules). @@ -417,8 +417,8 @@ After your content has finished altering styles, it may find itself in a situati - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values diff --git a/files/en-us/web/css/css_cascade/computed_value/index.md b/files/en-us/web/css/css_cascade/computed_value/index.md index c4c23b5f0084155..9fb9d2aab5af06f 100644 --- a/files/en-us/web/css/css_cascade/computed_value/index.md +++ b/files/en-us/web/css/css_cascade/computed_value/index.md @@ -29,9 +29,9 @@ However, for some properties (those where percentages are relative to something - {{domxref("window.getComputedStyle")}} - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/css_cascade/inheritance/index.md b/files/en-us/web/css/css_cascade/inheritance/index.md index 5aaf88523fe2aed..76b71bb21525771 100644 --- a/files/en-us/web/css/css_cascade/inheritance/index.md +++ b/files/en-us/web/css/css_cascade/inheritance/index.md @@ -102,9 +102,9 @@ We can see here another border around the word "emphasized text". - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) guide +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) guide - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting) diff --git a/files/en-us/web/css/css_cascade/initial_value/index.md b/files/en-us/web/css/css_cascade/initial_value/index.md index 24e2f3a98093af8..1e67e9d7eb6a8b3 100644 --- a/files/en-us/web/css/css_cascade/initial_value/index.md +++ b/files/en-us/web/css/css_cascade/initial_value/index.md @@ -27,9 +27,9 @@ You can explicitly specify the initial value by using the {{cssxref("initial")}} - {{cssxref("initial")}} - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/css_cascade/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md index 1182ac98738ae77..f75db578de8ea3a 100644 --- a/files/en-us/web/css/css_cascade/specificity/index.md +++ b/files/en-us/web/css/css_cascade/specificity/index.md @@ -495,10 +495,10 @@ A few things to remember about specificity: - [SpeciFISHity](https://specifishity.com/) - [Specificity Calculator](https://specificity.keegan.st/): An interactive website to test and understand your own CSS rules - [_ID-CLASS-TYPE_ exercise](https://estelle.github.io/CSS/selectors/exercises/specificity.html) a specificity quiz -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) guide +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) guide - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) diff --git a/files/en-us/web/css/css_cascade/specified_value/index.md b/files/en-us/web/css/css_cascade/specified_value/index.md index 375e644b69e416b..e4f2552da67333a 100644 --- a/files/en-us/web/css/css_cascade/specified_value/index.md +++ b/files/en-us/web/css/css_cascade/specified_value/index.md @@ -61,8 +61,8 @@ p { - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) diff --git a/files/en-us/web/css/css_cascade/used_value/index.md b/files/en-us/web/css/css_cascade/used_value/index.md index 87687b5b69be7a2..4a9327b229b6be7 100644 --- a/files/en-us/web/css/css_cascade/used_value/index.md +++ b/files/en-us/web/css/css_cascade/used_value/index.md @@ -105,8 +105,8 @@ CSS 2.0 defined only _computed value_ as the last step in a property's calculati - {{domxref("window.getComputedStyle")}} - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) 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 6545f8c6ab3db3c..3fbf44989fc3e23 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 @@ -125,7 +125,7 @@ A _container style query_ is a `@container` query that evaluates computed styles } ``` -The parameter of each `style()` function is a single **``**. Per the CSS containment specification, a `` can be a valid CSS [declaration](/en-US/docs/Web/CSS/Syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). The only style feature currently supported is custom properties, with or without a value. See the [browser compatibility table](#browser_compatibility). +The parameter of each `style()` function is a single **``**. Per the CSS containment specification, a `` can be a valid CSS [declaration](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_declarations), a CSS property, or a [``](/en-US/docs/Web/CSS/var#values). The only style feature currently supported is custom properties, with or without a value. See the [browser compatibility table](#browser_compatibility). If the `` includes a value, the style query evaluates to true if the computed value of the custom property (or, in the future, the CSS declaration) passed as the `style()` argument is true for the container being queried. Otherwise, it resolves to false. A style feature without a value evaluates to true if the computed value is different from the [initial value](#registered_properties) for the given property. diff --git a/files/en-us/web/css/css_display/block_formatting_context/index.md b/files/en-us/web/css/css_display/block_formatting_context/index.md index 8dc38c47e3b53d0..11e94c4f627be76 100644 --- a/files/en-us/web/css/css_display/block_formatting_context/index.md +++ b/files/en-us/web/css/css_display/block_formatting_context/index.md @@ -227,7 +227,7 @@ In this example, we wrap the second `
` in an outer `
`, and create a ne ## See also -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md index 38debfdf00d05fe..b085c70a23ff34b 100644 --- a/files/en-us/web/css/css_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -16,7 +16,7 @@ Media queries are a key component of [responsive design](/en-US/docs/Learn_web_d Other common examples include increasing the font size and hiding navigation menus when printing a page, adjusting the padding between paragraphs when a page is viewed in portrait or landscape mode, or increasing the size of buttons to provide a larger hit area on touchscreens. -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")}}. +In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/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_containment/Container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics. diff --git a/files/en-us/web/css/css_media_queries/using_media_queries/index.md b/files/en-us/web/css/css_media_queries/using_media_queries/index.md index b283c18c53ab09f..706ca6a350e58fd 100644 --- a/files/en-us/web/css/css_media_queries/using_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/using_media_queries/index.md @@ -10,7 +10,7 @@ page-type: guide 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 conditionally apply styles with the [CSS](/en-US/docs/Web/CSS) {{cssxref("@media")}} and {{cssxref("@import")}} [at-rules](/en-US/docs/Web/CSS/CSS_syntax/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=` or `sizes="` attributes. - 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. diff --git a/files/en-us/web/css/css_namespaces/index.md b/files/en-us/web/css/css_namespaces/index.md index abf75d7b3158428..9364e82b98d1d78 100644 --- a/files/en-us/web/css/css_namespaces/index.md +++ b/files/en-us/web/css/css_namespaces/index.md @@ -63,6 +63,6 @@ The `@namespace` rule is used for declaring a default namespace and for binding - [``](/en-US/docs/Web/SVG/Element/a#example) SVG element - [CSS `` type](/en-US/docs/Web/CSS/url_value) -- [CSS at-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) diff --git a/files/en-us/web/css/css_nesting/nesting_at-rules/index.md b/files/en-us/web/css/css_nesting/nesting_at-rules/index.md index 7fc2f9e59c1d8c6..edbad4f3de8628a 100644 --- a/files/en-us/web/css/css_nesting/nesting_at-rules/index.md +++ b/files/en-us/web/css/css_nesting/nesting_at-rules/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -Any [at-rule](/en-US/docs/Web/CSS/At-rule) whose body contains style rules can be nested inside another style rule using CSS nesting. Style rules nested inside at-rules take their nesting selector definition from the nearest ancestor style rule. Properties can be directly included inside a nested at-rule, acting as if they were nested in a `& {...}` block. +Any [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) whose body contains style rules can be nested inside another style rule using CSS nesting. Style rules nested inside at-rules take their nesting selector definition from the nearest ancestor style rule. Properties can be directly included inside a nested at-rule, acting as if they were nested in a `& {...}` block. ## at-rules that can be nested diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/css_syntax/at-rule/index.md similarity index 83% rename from files/en-us/web/css/at-rule/index.md rename to files/en-us/web/css/css_syntax/at-rule/index.md index 8421362f33f8e28..095ab88c7111afe 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/css_syntax/at-rule/index.md @@ -1,16 +1,20 @@ --- title: At-rules -slug: Web/CSS/At-rule +slug: Web/CSS/CSS_syntax/At-rule page-type: guide -spec-urls: https://drafts.csswg.org/css-conditional/ +spec-urls: https://drafts.csswg.org/css-syntax/ --- {{CSSRef}} -**At-rules** are [CSS statements](/en-US/docs/Web/CSS/Syntax#css_statements) that instruct CSS how to behave. They begin with an at sign, `@` (U+0040 COMMERCIAL AT), followed by an identifier, and include everything up to the next semicolon, `;` (U+003B SEMICOLON), or the next [CSS block](/en-US/docs/Web/CSS/Syntax#css_declaration_blocks), whichever comes first. +**At-rules** are [CSS statements](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_statements) that instruct CSS how to behave. They begin with an at-sign, `@` (U+0040 COMMERCIAL AT), followed by an identifier. They include everything from the at-keyword up to the next semicolon, `;` (U+003B SEMICOLON), or the next [CSS block](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_declaration_blocks), whichever comes first. + +At-rules are used to group and structure style rules and other at-rules, declare style information not directly associated with selected content, and manage syntactic constructs such as imports and namespaces keyword mappings. ## Syntax +The at-rule is defined in the [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module, with different at-rules being defined in their respective modules. They generally take one of two forms depending on the specific rule and its purpose: statement at-rules and block at-rules, which can contain nested qualified rules, at-rules, or declarations. + ### Statement at-rules ```css @@ -100,9 +104,9 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) - [Nesting CSS at-rules](/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules) -- [CSS statements](/en-US/docs/Web/CSS/Syntax#css_statements) +- [CSS statements](/en-US/docs/Web/CSS/CSS_syntax/Syntax#css_statements) - [CSSRule](/en-US/docs/Web/API/CSSRule) interface - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) diff --git a/files/en-us/web/css/comments/index.md b/files/en-us/web/css/css_syntax/comments/index.md similarity index 59% rename from files/en-us/web/css/comments/index.md rename to files/en-us/web/css/css_syntax/comments/index.md index 4e3aa4dd8b9a719..322e3fca2635b88 100644 --- a/files/en-us/web/css/comments/index.md +++ b/files/en-us/web/css/css_syntax/comments/index.md @@ -1,7 +1,10 @@ --- title: Comments -slug: Web/CSS/Comments +slug: Web/CSS/CSS_syntax/Comments page-type: guide +spec-urls: + - https://www.w3.org/TR/CSS21/syndata.html#comments + - https://drafts.csswg.org/css-syntax-3/#consume-comment --- {{CSSRef}} @@ -44,17 +47,10 @@ The `/* */` comment syntax is used for both single and multiline comments. There ## Specifications -- [CSS 2.1 Syntax and basic data types #comments](https://www.w3.org/TR/CSS21/syndata.html#comments) +{{Specifications}} ## See also - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module -- [Syntax](/en-US/docs/Web/CSS/Syntax) guide -- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) +- [Syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) guide - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) -- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) -- [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) -- [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) -- [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module -- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values diff --git a/files/en-us/web/css/css_syntax/error_handling/index.md b/files/en-us/web/css/css_syntax/error_handling/index.md index 693bf984e3bb2fd..1b670ba3667284f 100644 --- a/files/en-us/web/css/css_syntax/error_handling/index.md +++ b/files/en-us/web/css/css_syntax/error_handling/index.md @@ -39,16 +39,16 @@ After parsing each declaration, style rule, at-rule, and so on, the browser chec The `@` symbol, known in CSS specifications as an ``, indicates the beginning of a CSS {{cssxref("at-rule")}}. Once an at-rule begins with the `@` symbol, nothing is considered invalid from the parser's standpoint. Everything up to the first semi-colon (`;`) or the opening curly brace (`{`) is part of the at-rule's prelude. The content of each at-rule is interpreted according to the grammar rules for that particular at-rule. -Statement at-rules, such as {{cssxref("@import")}} and {{cssxref("@namespace")}} declarations, contain just a prelude. The semicolon ends the at-rule immediately for [statement at-rules](/en-US/docs/Web/CSS/At-rule#statement_at-rules). If the contents of the prelude are invalid according to the grammar for that at-rule, the at-rule is ignored, with the browser continuing to parse CSS after it encounters the next semi-colon. For example, if an `@import` at-rule occurs after any CSS declaration other than `@charset`, `@layer` or other `@import` statements, the `@import` declaration is ignored. +Statement at-rules, such as {{cssxref("@import")}} and {{cssxref("@namespace")}} declarations, contain just a prelude. The semicolon ends the at-rule immediately for [statement at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule#statement_at-rules). If the contents of the prelude are invalid according to the grammar for that at-rule, the at-rule is ignored, with the browser continuing to parse CSS after it encounters the next semi-colon. For example, if an `@import` at-rule occurs after any CSS declaration other than `@charset`, `@layer` or other `@import` statements, the `@import` declaration is ignored. ```css @import "assets/fonts.css" layer(fonts); @namespace svg url(http://www.w3.org/2000/svg); ``` -If the parser encounters a curly brace (`{`) before a semi-colon is encountered, the at-rule is parsed as a block at-rule. [Block at-rules](/en-US/docs/Web/CSS/At-rule#block_at-rules) like {{cssxref("@font-face")}} and {{cssxref("@keyframes")}}, contain a block of declarations surrounded by curly braces (`{}`). The opening curly brace informs the browser where the at-rule prelude ends and the at-rule's body starts. The parser looks forward, seeking matching blocks (content surrounded by `()`, `{}`, or `[]`) until it finds a closing curly brace (`}`) that isn't matched by any other curly braces: this closes the body of the at-rule. +If the parser encounters a curly brace (`{`) before a semi-colon is encountered, the at-rule is parsed as a block at-rule. [Block at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule#block_at-rules) like {{cssxref("@font-face")}} and {{cssxref("@keyframes")}}, contain a block of declarations surrounded by curly braces (`{}`). The opening curly brace informs the browser where the at-rule prelude ends and the at-rule's body starts. The parser looks forward, seeking matching blocks (content surrounded by `()`, `{}`, or `[]`) until it finds a closing curly brace (`}`) that isn't matched by any other curly braces: this closes the body of the at-rule. -Different at-rules have different grammar rules, different (or no) descriptors, and different rules for what, if anything, will invalidate the entire at-rule. The expected grammar for [each at-rule](/en-US/docs/Web/CSS/At-rule) and how errors are handled are documented on the respective at-rule page. The handling of invalid content depends on the error. +Different at-rules have different grammar rules, different (or no) descriptors, and different rules for what, if anything, will invalidate the entire at-rule. The expected grammar for [each at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) and how errors are handled are documented on the respective at-rule page. The handling of invalid content depends on the error. For example, the `@font-face` rule requires both a [`font-family`](/en-US/docs/Web/CSS/@font-face/font-family) and [`src`](/en-US/docs/Web/CSS/@font-face/src) descriptor. If either of these is omitted or invalid, the entire `@font-face` rule is invalid. Including an unrelated descriptor, any other valid font descriptor with an invalid value, or a property style declaration within the `@font-face` nested block will not invalidate the font declaration. As long as the font name and font source are included and valid, any invalid CSS within the at-rule is ignored, but the `@font-face` block is still parsed. @@ -199,5 +199,5 @@ To better control the way custom properties fall back, use the {{cssxref("@prope ## See also - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module -- [Syntax](/en-US/docs/Web/CSS/Syntax) guide +- [Syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) guide - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) diff --git a/files/en-us/web/css/css_syntax/index.md b/files/en-us/web/css/css_syntax/index.md index ff04a16592edbc9..afaeb55df15ef18 100644 --- a/files/en-us/web/css/css_syntax/index.md +++ b/files/en-us/web/css/css_syntax/index.md @@ -9,7 +9,7 @@ spec-urls: https://drafts.csswg.org/css-syntax The **CSS syntax** module describes, in general terms, the structure and syntax of cascading stylesheets, or CSS. It defines CSS as the language for describing the rendering of structured documents (such as HTML and XML), on the web and elsewhere. -This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functions](/en-US/docs/Web/CSS/CSS_Functions), or [at-rules](/en-US/docs/Web/CSS/At-rule). Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS. +This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functions](/en-US/docs/Web/CSS/CSS_Functions), or [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule). Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS. ## At-rules @@ -24,7 +24,7 @@ This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_ - {{cssxref("at-rule")}} - [character escaping](/en-US/docs/Web/CSS/custom-ident#escaping_characters) -- [CSS comments](/en-US/docs/Web/CSS/Comments) +- [CSS comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [CSS declaration](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration) - [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) - [CSS function](/en-US/docs/Web/CSS/CSS_Functions) @@ -40,7 +40,7 @@ This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_ ## Guides -- [Syntax](/en-US/docs/Web/CSS/Syntax) +- [Syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) - : Overview of CSS syntax, including CSS declarations, declaration blocks, rulesets, and statements. diff --git a/files/en-us/web/css/syntax/css_syntax_-_block.png b/files/en-us/web/css/css_syntax/syntax/css_syntax_-_block.png similarity index 100% rename from files/en-us/web/css/syntax/css_syntax_-_block.png rename to files/en-us/web/css/css_syntax/syntax/css_syntax_-_block.png diff --git a/files/en-us/web/css/syntax/css_syntax_-_declaration.png b/files/en-us/web/css/css_syntax/syntax/css_syntax_-_declaration.png similarity index 100% rename from files/en-us/web/css/syntax/css_syntax_-_declaration.png rename to files/en-us/web/css/css_syntax/syntax/css_syntax_-_declaration.png diff --git a/files/en-us/web/css/syntax/css_syntax_-_statements_venn_diag.png b/files/en-us/web/css/css_syntax/syntax/css_syntax_-_statements_venn_diag.png similarity index 100% rename from files/en-us/web/css/syntax/css_syntax_-_statements_venn_diag.png rename to files/en-us/web/css/css_syntax/syntax/css_syntax_-_statements_venn_diag.png diff --git a/files/en-us/web/css/syntax/declaration-block.png b/files/en-us/web/css/css_syntax/syntax/declaration-block.png similarity index 100% rename from files/en-us/web/css/syntax/declaration-block.png rename to files/en-us/web/css/css_syntax/syntax/declaration-block.png diff --git a/files/en-us/web/css/syntax/index.md b/files/en-us/web/css/css_syntax/syntax/index.md similarity index 74% rename from files/en-us/web/css/syntax/index.md rename to files/en-us/web/css/css_syntax/syntax/index.md index 6c38a52ff922571..850d1228f314783 100644 --- a/files/en-us/web/css/syntax/index.md +++ b/files/en-us/web/css/css_syntax/syntax/index.md @@ -1,6 +1,6 @@ --- title: Syntax -slug: Web/CSS/Syntax +slug: Web/CSS/CSS_syntax/Syntax page-type: guide --- @@ -17,7 +17,7 @@ Setting CSS properties to specific values is the core function of the CSS langua Both properties and values are case-insensitive by default in CSS. The pair is separated by a colon, `:` (U+003A COLON), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored. -![css syntax - declaration.png](css_syntax_-_declaration.png) +![A css declaration is a property value pair, with a colon separating the two entities and a semi-colon closing the declaration.](css_syntax_-_declaration.png) There are [hundreds of different properties](/en-US/docs/Web/CSS/Reference) in CSS and a practically endless number of different values. Not all pairs of properties and values are allowed and each property defines what are the valid values. When a value is not valid for a given property, the declaration is deemed _invalid_ and is wholly ignored by the CSS engine. @@ -25,13 +25,13 @@ There are [hundreds of different properties](/en-US/docs/Web/CSS/Reference) in C Declarations are grouped in **blocks**, that is in a structure delimited by an opening brace, `{` (U+007B LEFT CURLY BRACKET), and a closing one, `}` (U+007D RIGHT CURLY BRACKET). Blocks sometimes can be nested, so opening and closing braces must be matched. -![css syntax - block.png](css_syntax_-_block.png) +![Two braces delimit the start and end of a CSS block, with css content or no content between the braces.](css_syntax_-_block.png) Such blocks are naturally called **declaration blocks** and declarations inside them are separated by a semicolon, `;` (U+003B SEMICOLON). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semicolon, though it is often considered _good style_ to do it as it prevents forgetting to add it when extending the block with another declaration. A CSS declaration block is visualized in the diagram below. -![css syntax - declarations block.png](declaration-block.png) +![Within a CSS block, encompassed in braces, semicolons separate declarations, with the final semicolon being optional but recommended as good practice.](declaration-block.png) > [!NOTE] > The content of a CSS declaration block, that is a list of semicolon-separated declarations, without the initial and closing braces, can be put inside an HTML [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. @@ -44,7 +44,7 @@ CSS allows this by associating conditions with declarations blocks. Each (valid) A CSS ruleset (or rule) is visualized in the diagram below. -![css syntax - ruleset.png](ruleset.png) +![A group of comma-separated selectors precedes the brace-delimited declaration block, which contains multiple declarations ending in semicolons.](ruleset.png) As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm (see [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)). @@ -59,12 +59,12 @@ Rulesets are the main building blocks of a style sheet, which often consists of A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semicolon (outside a string, non-escaped and not included into another {}, () or \[] pair). -![css syntax - statements Venn diag.png](css_syntax_-_statements_venn_diag.png) +![A Venn diagram of statements noting all rulesets are nested statements, while some at-rules are nested statements but most aren't. Anthing that is not an at-rule or nested is invalid.](css_syntax_-_statements_venn_diag.png) There are two kinds of statements: - **Rulesets** (or _rules_) that, as seen, associate a collection of CSS declarations to a condition described by a [selector](/en-US/docs/Web/CSS/CSS_selectors). -- **At-rules** that start with an at sign, `@` (U+0040 COMMERCIAL AT), followed by an identifier and then continuing up to the end of the statement, that is up to the next semicolon (;) outside of a block, or the end of the next block. Each type of [at-rules](/en-US/docs/Web/CSS/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@layer") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}). +- **At-rules** that start with an at sign, `@` (U+0040 COMMERCIAL AT), followed by an identifier and then continuing up to the end of the statement, that is up to the next semicolon (;) outside of a block, or the end of the next block. Each type of [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@layer") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}). Any statement which isn't a ruleset or an at-rule is invalid and ignored. @@ -74,20 +74,17 @@ There is another group of statements – the **nested statements**. These are st ## See also -- CSS key concepts: - - **CSS syntax** - - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - - Values - - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) - - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) - - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) - - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module +- [Selectors and combinators](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators) +- [Selector structure](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) +- [Error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) +- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) +- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) +- Values + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) +- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) diff --git a/files/en-us/web/css/syntax/ruleset.png b/files/en-us/web/css/css_syntax/syntax/ruleset.png similarity index 100% rename from files/en-us/web/css/syntax/ruleset.png rename to files/en-us/web/css/css_syntax/syntax/ruleset.png diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 4bb34eb0a387724..7f1e1f9d288a074 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -27,10 +27,10 @@ After CSS 2.1, the scope of the specification increased significantly and the pr The [CSS reference](/en-US/docs/Web/CSS/Reference) is an exhaustive reference for seasoned Web developers, describing every property and concept of CSS, including: -- The [syntax and forms of the language](/en-US/docs/Web/CSS/Syntax) +- The [syntax and forms of the language](/en-US/docs/Web/CSS/CSS_syntax/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), and [the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors), including [pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements), [nesting](/en-US/docs/Web/CSS/CSS_nesting), [scoping](/en-US/docs/Web/CSS/CSS_scoping) and [shadow parts](/en-US/docs/Web/CSS/CSS_shadow_parts) -- [CSS at-rules](/en-US/docs/Web/CSS/At-rule), including [media](/en-US/docs/Web/CSS/CSS_media_queries) and [container](/en-US/docs/Web/CSS/CSS_containment) queries +- [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule), including [media](/en-US/docs/Web/CSS/CSS_media_queries) and [container](/en-US/docs/Web/CSS/CSS_containment) queries - [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) and [functional notations](/en-US/docs/Web/CSS/CSS_Functions) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) and [margin collapse](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - The [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) diff --git a/files/en-us/web/css/layout_mode/index.md b/files/en-us/web/css/layout_mode/index.md index 05db363db8ecff7..3976987e5289b57 100644 --- a/files/en-us/web/css/layout_mode/index.md +++ b/files/en-us/web/css/layout_mode/index.md @@ -22,9 +22,9 @@ A [CSS](/en-US/docs/Web/CSS) **layout mode**, sometimes called _layout_, is an a ## See also - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/page/index.md b/files/en-us/web/css/page/index.md index 973a3ebd486094f..f8572208fd1c8fb 100644 --- a/files/en-us/web/css/page/index.md +++ b/files/en-us/web/css/page/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.page {{CSSRef}} -The **`page`** [CSS](/en-US/docs/Web/CSS) property is used to specify the named page, a specific type of page defined by the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule). +The **`page`** [CSS](/en-US/docs/Web/CSS) property is used to specify the named page, a specific type of page defined by the {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule). If there are multiple selectors that are using a named page consecutively then a forced page break using [`break-after`](/en-US/docs/Web/CSS/break-after) may be needed. diff --git a/files/en-us/web/css/reference/index.md b/files/en-us/web/css/reference/index.md index 9b268234ee8c64a..dd8beb6091a79ff 100644 --- a/files/en-us/web/css/reference/index.md +++ b/files/en-us/web/css/reference/index.md @@ -6,7 +6,7 @@ page-type: landing-page {{CSSRef}} -Use this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](/en-US/docs/Web/CSS) properties, [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functional notations](/en-US/docs/Web/CSS/CSS_Functions) and [at-rules](/en-US/docs/Web/CSS/At-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom). +Use this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](/en-US/docs/Web/CSS) properties, [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functional notations](/en-US/docs/Web/CSS/CSS_Functions) and [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom). ## Basic rule syntax @@ -44,11 +44,11 @@ div.menu-bar li:hover > ul { } ``` -For a beginner-level introduction to the syntax of selectors, see our [guide on CSS Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors). Be aware that any [syntax](/en-US/docs/Web/CSS/Syntax) error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely ({{Glossary("ASCII")}}) [text-based](https://www.w3.org/TR/css-syntax-3/#intro), whereas DOM-CSS / CSSOM (the rule management system) is [object-based](https://www.w3.org/TR/cssom/#introduction). +For a beginner-level introduction to the syntax of selectors, see our [guide on CSS Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors). Be aware that any [syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely ({{Glossary("ASCII")}}) [text-based](https://www.w3.org/TR/css-syntax-3/#intro), whereas DOM-CSS / CSSOM (the rule management system) is [object-based](https://www.w3.org/TR/cssom/#introduction). ### At-rule syntax -As the structure of at-rules varies widely, please see [At-rule](/en-US/docs/Web/CSS/At-rule) to find the syntax of the specific one you want. +As the structure of at-rules varies widely, please see [At-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) to find the syntax of the specific one you want. ## Index @@ -109,10 +109,10 @@ Combinators are selectors that establish a relationship between two or more simp ### Syntax and semantics -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) -- [Comments](/en-US/docs/Web/CSS/Comments) +- [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Descriptor](/en-US/docs/Glossary/CSS_Descriptor) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) diff --git a/files/en-us/web/css/replaced_element/index.md b/files/en-us/web/css/replaced_element/index.md index 235ae746be1bf1b..b188fe9589e4805 100644 --- a/files/en-us/web/css/replaced_element/index.md +++ b/files/en-us/web/css/replaced_element/index.md @@ -53,9 +53,9 @@ Certain CSS properties can be used to specify how the object contained within th - [HTML Spec](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements) - {{glossary("void element", "Void elements")}} - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/resolved_value/index.md b/files/en-us/web/css/resolved_value/index.md index b18568cab7501aa..372dac28ce2ff3e 100644 --- a/files/en-us/web/css/resolved_value/index.md +++ b/files/en-us/web/css/resolved_value/index.md @@ -26,8 +26,8 @@ For most properties, the resolved value is the [computed value](/en-US/docs/Web/ - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) diff --git a/files/en-us/web/css/shorthand_properties/index.md b/files/en-us/web/css/shorthand_properties/index.md index a8d2380b4e973db..e5ac91a571a7965 100644 --- a/files/en-us/web/css/shorthand_properties/index.md +++ b/files/en-us/web/css/shorthand_properties/index.md @@ -245,8 +245,8 @@ See [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/H ## See also -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [At-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) +- [At-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) diff --git a/files/en-us/web/css/value_definition_syntax/index.md b/files/en-us/web/css/value_definition_syntax/index.md index 50dd2788b503cca..3d97b825a115722 100644 --- a/files/en-us/web/css/value_definition_syntax/index.md +++ b/files/en-us/web/css/value_definition_syntax/index.md @@ -443,8 +443,8 @@ Here are some more examples: ## See also - CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [Comments](/en-US/docs/Web/CSS/Comments) + - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) + - [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) diff --git a/files/en-us/web/css/visual_formatting_model/index.md b/files/en-us/web/css/visual_formatting_model/index.md index 98f70759fb1814b..6174eff61f11df6 100644 --- a/files/en-us/web/css/visual_formatting_model/index.md +++ b/files/en-us/web/css/visual_formatting_model/index.md @@ -249,8 +249,8 @@ A block box is a block-level box that is also a block container. As described in ## See also -- [CSS syntax](/en-US/docs/Web/CSS/Syntax) guide -- [Comments](/en-US/docs/Web/CSS/Comments) +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax/Syntax) guide +- [Comments](/en-US/docs/Web/CSS/CSS_syntax/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) diff --git a/files/en-us/web/html/comments/index.md b/files/en-us/web/html/comments/index.md index 71ec39e684478cf..9d0df869efafc50 100644 --- a/files/en-us/web/html/comments/index.md +++ b/files/en-us/web/html/comments/index.md @@ -67,5 +67,5 @@ While comments do start with a `<` and end in a `>`, a comment is not an HTML el ## See also - [Comments in JavaScript](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#comments) -- [Comments in CSS](/en-US/docs/Web/CSS/Comments) +- [Comments in CSS](/en-US/docs/Web/CSS/CSS_syntax/Comments) - {{domxref("Comment")}} API (`Comment` inherits from {{domxref("Node")}})