CSS syntax module and error handling (mdn#31076)

* New page: CSS syntax error handling * deprecate @charset and list as a rule not at-rule * Define character encoding * New page: error handling * New page: css syntax module * delete charset module. move to syntax module * still supported * table of contents * better grammar * better grammar * better grammar * better grammar * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <[email protected]> * added a few more notes - prefixes * edits per review * change h2 to h3 * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <[email protected]> * add guide to module page. * change UA to browser * address mdn#30793 (comment) * hyphens to underscores * rewrote the at-rule section * rewrite grammar section * fixing linter suggestions Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * final tweaks * Update files/en-us/web/css/css_syntax/error_handling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/css_syntax/error_handling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix flaws * closed comments * borked so fixed * trailing spaces Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/css_syntax/error_handling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/css_syntax/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Small punctuation fixes * Apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> * header for at-rule * updates based on review feedback * link to display property * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/css_syntax/error_handling/index.md * Update files/en-us/web/css/css_syntax/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fix broken links * typo fix --------- Co-authored-by: Dipika Bhattacharya <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chris Mills <[email protected]>
dipikabh · Jan 17, 2024 · 75ca0fc · 75ca0fc
1 parent b257899
commit 75ca0fc
Show file tree

Hide file tree

Showing 7 changed files with 340 additions and 33 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -11472,6 +11472,7 @@
 /en-US/docs/Web/CSS/CSS_User_Interface	/en-US/docs/Web/CSS/CSS_basic_user_interface
 /en-US/docs/Web/CSS/CSS_Variables	/en-US/docs/Web/CSS/CSS_cascading_variables
 /en-US/docs/Web/CSS/CSS_Viewport	/en-US/docs/Web/CSS
+/en-US/docs/Web/CSS/CSS_charsets	/en-US/docs/Web/CSS/CSS_syntax
 /en-US/docs/Web/CSS/CSS_descriptor_definition	/en-US/docs/Web/CSS
 /en-US/docs/Web/CSS/CSS_flex-wrap	/en-US/docs/Web/CSS/flex-wrap
 /en-US/docs/Web/CSS/CSS_grid_layout/Layout_using_line-based_placement	/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -77125,10 +77125,6 @@
     "modified": "2020-07-07T12:03:44.891Z",
     "contributors": ["wbamberg", "mfluehr"]
   },
-  "Web/CSS/CSS_charsets": {
-    "modified": "2020-10-15T21:38:35.251Z",
-    "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"]
-  },
   "Web/CSS/CSS_colors": {
     "modified": "2020-12-02T11:04:05.642Z",
     "contributors": ["peterbe", "wbamberg", "fscholz", "Sheppy", "mfluehr"]
@@ -78501,6 +78497,10 @@
     "modified": "2020-04-27T22:31:21.929Z",
     "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"]
   },
+  "Web/CSS/CSS_syntax": {
+    "modified": "2020-10-15T21:38:35.251Z",
+    "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"]
+  },
   "Web/CSS/CSS_table": {
     "modified": "2020-07-07T12:26:58.542Z",
     "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"]

diff --git a/files/en-us/web/css/@charset/index.md b/files/en-us/web/css/@charset/index.md
@@ -7,21 +7,28 @@ browser-compat: css.at-rules.charset
 
 {{CSSRef}}
 
-The **`@charset`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements), it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules). If several `@charset` at-rules are defined, only the first one is used, and it cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.
+The **`@charset`** [CSS](/en-US/docs/Web/CSS) rule specifies the character encoding used in the style sheet. Although the first character in `@charset` is the `@` symbol, it is not an [at-rule](/en-US/docs/Web/CSS/At-rule). The [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is [fully supported in all browsers](#browser_compatibility).
+
+The following assertions apply to valid `@charset` usage:
+
+- The `@charset` rule must be the first element in the style sheet and not be preceded by any character.
+- `@charset` is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements) and therefore cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
+- If several `@charset` at-rules are defined, only the first one is used.
+- `@charset` cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement("style") }} element where the character set of the HTML page is relevant.
 
 ```css
 @charset "utf-8";
 ```
 
 This at-rule is useful when using non-{{Glossary("ASCII")}} characters in some CSS properties, like {{ cssxref("content") }}.
 
-As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :
+As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result):
 
 1. The value of the [Unicode byte-order](https://en.wikipedia.org/wiki/Byte_order_mark) character placed at the beginning of the file.
 2. The value given by the `charset` attribute of the `Content-Type:` HTTP header or the equivalent in the protocol used to serve the style sheet.
 3. The `@charset` CSS at-rule.
 4. Use the character encoding defined by the referring document: the `charset` attribute of the {{ HTMLElement("link") }} element. This method is obsolete and should not be used.
-5. Assume that the document is UTF-8
+5. Assume that the document is UTF-8.
 
 ## Syntax
 

diff --git a/files/en-us/web/css/css_charsets/index.md b/files/en-us/web/css/css_charsets/index.md