CSS @charset At-Rule
The @charset at-rule specifies the character encoding of an external CSS stylesheet. It is a legacy encoding declaration that must appear at the very beginning of the file. Modern stylesheets should use UTF-8 encoding.
@charset Syntax
@charset "UTF-8";The declaration uses the keyword @charset, followed by a character encoding name in double quotation marks and a semicolon.
The encoding name is case-insensitive, but the @charset keyword must be written in lowercase and the declaration must follow the exact required format.
Unlike ordinary CSS at-rules, this declaration is recognized through special processing of the stylesheet's initial bytes.
How @charset Works
Browsers must determine a stylesheet's character encoding before interpreting its CSS content. The encoding controls how the file's bytes are converted into characters.
The @charset declaration provides encoding information when it appears in the required position and format. However, a Unicode byte order mark (BOM) or encoding information supplied by the HTTP response can take precedence.
If no higher-priority encoding information is available, a valid @charset declaration can be used to determine the stylesheet's encoding.
For modern web development, saving CSS files as UTF-8 is recommended. A separate @charset declaration is usually unnecessary when the stylesheet is already served with the correct encoding.
Placement Rules
The @charset declaration must be the first content in a CSS file, except for an optional byte order mark. No comments, whitespace, or other CSS rules may appear before it.
Correct Placement
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
}Incorrect Placement
/* Main stylesheet */
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
}In the incorrect example, the comment appears before @charset. As a result, the declaration is not recognized as an encoding declaration.
The declaration must also use double quotation marks. Single quotation marks are not valid for this special encoding declaration.
Character Encoding
Character encoding determines how text characters are stored in a file. UTF-8 supports a wide range of characters, including accented letters, symbols, and characters from many writing systems.
When a stylesheet uses UTF-8, special characters can be included in CSS strings and generated content without relying on older character encodings.
@charset "UTF-8";
.notice::before {
content: "✓ ";
}The check mark is stored as a Unicode character. The stylesheet must actually be saved using the declared encoding for the content to be interpreted correctly.
For external stylesheets, the HTTP Content-Type header can also specify the encoding, such as text/css; charset=utf-8. This information takes precedence over an @charset declaration when no BOM is present.
@charset Example
The following example shows a complete external stylesheet beginning with a UTF-8 encoding declaration.
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
color: #333;
}
.message::before {
content: "★ ";
color: #e67e22;
}The declaration appears before all other CSS content. The .message::before rule inserts a star symbol before the text of an element with the class message.
Browser Support
The @charset encoding declaration is part of CSS stylesheet encoding processing. Modern browsers support UTF-8 stylesheets, and explicit encoding declarations are generally unnecessary when files are correctly encoded and served. For compatibility information, visit Can I Use? and search for CSS character encoding.
Specifications
The @charset declaration is described in the CSS Syntax Module Level 3 specification. It is a legacy mechanism for specifying a stylesheet's character encoding rather than a normal CSS at-rule.