CSS @charset – Declaring Character Encoding for Stylesheets

#css #charset

😄 This post is based on the content from coding.courses.

@charset Rule

The CSS @charset syntax rule is used to declare the character encoding of the stylesheet.
It allows you to specify the desired character encoding for the stylesheet.
It is used to explicitly specify the character encoding directly within the stylesheet, rather than relying on an external environment that, for any reason, might not match the stylesheet's encoding.
It is particularly useful in environments where the default encoding of the HTML file or system is not set to the standard UTF-8, allowing you to independently set the stylesheet's internal encoding to UTF-8.

@charset "UTF-8"; /* Must be placed at the very beginning of the stylesheet */

/* CSS rules should be placed after this rule */
body {
    font-size: 18px;
}
...

Syntax

@charset "charset-name";

charset-name represents the character encoding to be specified. It must be the name of a web-safe character encoding registered in the IANA registry. It must be separated from @charset by exactly one space, enclosed in double quotes ("), and immediately followed by a semicolon (;). It is case-insensitive.

The @charset rule must be placed at the very beginning of the stylesheet, and no characters, including whitespace, may appear before it.
The @charset rule can only be used once in a stylesheet. If multiple @charset rules are used, only the first rule is applied.
The @charset rule is specific to stylesheets and cannot be replaced by the charset attribute of the <link> tag in an HTML document.
Stylesheets embedded in an HTML page, such as those within the <style> tag or the style attribute, share the character encoding of the entire document. Therefore, even if the @charset rule is used within the <style> tag, the stylesheet still uses the character encoding of the entire document.

# Valid and Invalid Syntax

---- Valid Syntax ----
@charset "ISO-8859-1";
@charset "utf-8"; /* Same as "UTF-8": case-insensitive */

---- Invalid Syntax ----
@charset 'ISO-8859-1'; /* Enclosed in single quotes */
@charset ISO-8859-1; /* Not enclosed in double quotes */
@charset    "ISO-8859-1"; /* More than one whitespace character after @charset */
    @charset "ISO-8859-1"; /* Characters, including whitespace, appear before the @charset rule */

Purpose of the @charset Rule

The @charset rule is used to explicitly specify the character encoding within a stylesheet, rather than relying on the encoding of an external environment that, for whatever reason, does not match the stylesheet's encoding.

It is recommended to use the standard encoding UTF-8 as the character encoding for stylesheets and HTML pages. Therefore, there is no need to use the @charset rule in stylesheets.

# Using the @charset Rule

Although it is ideal to always use UTF-8 as the character encoding for stylesheets and HTML documents, this is not always the case in practice. For example, existing systems may use different encodings, or specific requirements may mandate the use of another encoding.

It is used when a stylesheet contains non-ASCII characters and UTF-8 cannot always be used as the character encoding for the stylesheet and HTML documents.

- When UTF-8 Cannot Always Be Used as the Character Encoding for Stylesheets and HTML Pages

Even if a web server uses a different character encoding, such as ISO-8859-1, it is best practice to use the @charset rule to explicitly specify that a CSS file uses UTF-8 as its character encoding.
Even if a stylesheet file uses a character encoding other than UTF-8, it is best practice to use the @charset rule to explicitly specify the actual character encoding of the CSS file.

References